Skip to content

【为实现内容自由】给博客系统增加管理后台

Image您好,我是Hellos AI,擅长AI编程、分享AI工具资讯等,立志让更多普通人了解AI、学会AI,利用AI找到人生的第二曲线。

昨天我这个静态博客系统发布了,接着我亲身体验使用visual  studio code来在里面写文章,结果真是一言难尽!好像要求有点高啊,在markdown里面直接写,并且还在visual  studio code里面。

这怎么能行呢?我想要愉快的写文章,我想要爽快的写文章,我不需要记这个标题是什么语法,那个列表是什么语法,还有插入图片该怎么办!

那就只能让这个博客系统可以在浏览器上写文章啦,那么接下来对他做了如下的一些改进!

0****1****改进01****启动更方便

对于我们开发人员来说,脚本启动、快捷方式启动或者命令行启动都差不多,但是对于不是从事计算机方面的朋友来说,这个门槛可有点大了。。。

那么给这个博客系统加一个启动脚本就必不可少啦!

幸好现在有AI,把自己的需求扔给他,吭哧吭哧,他就给我写好了,测试/修改几轮就搞定,你看,现在我本地启动博客系统鼠标点一下就完事!

图片

看到这里输出界面跟我这个差不多一样,那就是启动成功啦!接着就是复制http://localhost:5173/到浏览器访问就好了!

当然当前应用需要依赖的那些软件在启动过程中都会检测,如果没安装都会在这个命令行窗口中打印提示信息,按照提示下载和安装就好了!

02管理后端

从我个人角度来说,我增加/编辑/删除一个导航菜单倒是很容易,但是对于非计算机方面的朋友,他拿到这个东西,该怎么改呢?当前项目默认的菜单都不是他想要的、还有文章的撰写也都是难题,所以这些我都放到管理后台了。

启动后,在页面右上角有一个菜单"管理工具",点击后进入如下页面:

图片

注:这个管理后端只会在本地启动时会显示,博客文章推送到服务器后页面是看不到它的!

03爬取文章

我们有文章了最烦的是什么?当然是各种复制粘贴啊,文字、段落、图片烦得很!那最好是有什么?当然是给给一个链接给它,他就可以把文章下载好啦!

这个静态博客系统就有这个功能了(偷偷告诉你,昨天还没有哦)

例如,我把文章年底冲刺:年前拿下 AI Agent,拒绝空手跨年!(Day 1)

图片

放到如下功能页面中,如:

图片

爬取完毕,这个文章就进入到我的草稿箱啦!

ps:杰哥偷偷的告诉你,这里可以一次爬取多篇文章哦!一行放一个就好了!

04草稿箱

点击上面的草稿箱,我就会看到这篇文章,点击它可以进行编辑和预览,边改边看效果,是不是很爽?

图片

当我们把文章编辑时我们可以保存草稿,也可以发布到指定子菜单下,如:

图片

好了,它发布到博客->推荐目录下了,我们去看看:

图片

立刻就可以在博客->推荐 这里看到它啦!

05已上线

当然对于已经发布的文章,也可以点击下架,把文档退回到草稿箱中来!

图片

图片06垃圾箱

还有对于不想要的文章,我们可以把它删除,删除后文章就进入到垃圾箱,如下:

图片

图片

这里可以选择删除它或者是恢复到草稿箱中去!

07菜单管理

对于当前菜单不满意,没关系菜单管理能够解决这个问题。

在该页面中,只需要新增导航菜单或者子菜单就可以成功建立主页的那些菜单和子菜单,后续只需要发布文章时指定到目标菜单就好了!

图片

你看,这里新增了一个测试菜单,导航栏就正常显示了!子菜单同理,在底下新增就好了!

08网站管理

对于当前网站的banner、欢迎词、页脚、接入google等配置等等都可以使用该功能进行管理,如下:

图片

好了,接下来就是对这个管理后端的页面共进行完善,提高用户体验,最好是能够做到发布文章后自动提交文章、图片等资源到github,这样就更方便了!

0****2****写在最后

如果朋友您也对这个项目有兴趣,也可以加入进来我们一起把这个静态博客系统做的更好!

github地址:https://github.com/tansunyj/vitepress-blog-starter

我不生产工具,我只是好工具的搬运工。

关注杰哥不迷路,每天给你分享不一样的实用好工具。

免责声明:本公众号分享的内容以及软件等来自互联网,仅供大家学习交流,同时请遵守你当地的法律法规,否则造成的一切后果自负,与本公众号无关。如有侵权联删!部分知识难免有时效性,若内容过期失效,请见谅,感谢!

***喜欢这篇干货?如果觉得不错,请帮我一键三连,转发给您的朋友,都是对我最大的鼓励与认可。如果想第一时间收到推送,可以把我的公众号加个星标🌟方便后面我们一起探讨AI或有意思的东西,还能够快速找到我!我们明天见!END图 | 来源网络侵删欢迎点赞,在看,转发给我鼓励~👇👇关注我👇👇👇👇扫码加入粉丝群领取福利👇👇

杰哥的技术小站