业界动态
基于vuepress2搭建专属自己的博客,并集成评论、打赏等常用功能
2024-12-26 11:20

博客首页

两年前,我弃用了原来的hexo博客系统,并用vuepress1.4.1版本快速搭建了自己现在的专属静态博客系统。并一直更新维护至今。博客内陆陆续续的定制了自己的个性首页和列表页,扩展了评论、footer、复制、图片预览等等博客常见功能,效果和UI实现还是让我比较满意的。但是自从vuepress升级到2.X后,就一直心动的想要将现有博客进行升级,奈何平时比较忙(懒癌晚期),所以一直没有付诸行动,最近闲下来,所有打算动起来。
这次虽然是重新从零搭建,但其实很多逻辑和1.0是相通的,所以我的博客1.0还是可以用来参考的,如果你也是vuepress1.X版本,也可以参考官方的迁移文档

  • 简介至上

  • 支持vue3.0,就是好用。

  • 支持typescript,学习、开发必备技能。

  • vite打包,就是快。

  • 多语言支持

    VuePress和其它博客系统的对比可以参看官方给出的介绍

项目创建&初始化


在 中添加一些scripts


命令行内运行下面代码,就可以顺利的启动一个热重载的博客项目了



vuepress允许我们依赖来自定义页面布局;下面说一下首页

  • 文件内新建文件,因为自定义的页面说白了也是一个组件,所以我们可以按照平时写vue3组件的方式去写首页内容

    
    
  • 在 文件中注册Home组件

    
    
  • 在一开始创建的文件内,讲自定义布局组件进行引入

    
    

到这我们的首页就生成好了,还是比较简单的对吧,别急,下面的列表页才是最复杂的地方

列表页最关键的就是要如何才能拿到所有文章的数据内容,这里我们依赖官方的插件API来实现

因为我们需要创建很多md文件,但是并不一定所有的文件都需要显示在列表页,所以我们首先要约定下什么格式的文件才是我们需要的博客文档:我们可以设置黑名单来进行排除,当然我这里用的正则匹配的方式,即是我们需要的博客文件,否则就是其他文件,不进行统计,比如:、

第一步:创建插件文件:


当然,向列表页传递数据也可以参考官方给的方案:向客户端代码传递数据

第二步:创建自定义列表布局


第三步:注册列表布局


第四步:创建列表文件,将我们的自定义布局引入进去


至此我们最重要的首页和列表页就完成了

先来看看我文章内最重要的两个


  • :文章自定义的描述信息,在列表页内方法可以拿到

  • 就是我们文章的自定义标签,通过就可以获得了,我是在列表页用到的

    
    

我们既然可以拿到所有的文章列表的数组,那么我们就可以通过来自定义我们的分页逻辑了,还是比较简单的,对吧!

具体文章页如果只需要官方默认的布局那可以不看这部分内容,我做的事情主要是继承了官方默认布局,并扩展了阅读进度、评论、打赏、footer等功能;

创建


添加默认布局组件


好了,完成这一步后,我们所有文章页都会使用这个布局方式来渲染。

观察组建可以发现我们都是通过插槽来实现的扩展,更多布局插槽可以参考官方继承,相信聪明的博友应该能过痛过它实现更有意思的东西

评论是一个博客的灵魂,为博客提供了互动的能力,上一版博客我是用的GITALK来实现的,它是基于来实现的,所以它有一些不好的地方让我不是很满意,比如:评论无法叠楼层、需要博主先登录文章页去初始化评论功能,所以这次我决定改用基于的Giscus来实现;当然,如果你依然对情有独钟,可以参考这篇文章。

通过上一步的布局扩展发现,我们可以将评论组件放置在插槽内,贴心的问我们提供了各种常用的引用方式:、、等方式;我们可以使用自己喜欢的方式进行安装引用。


我们主要说一下、、、怎么去获得:

首先进入Giscus官网,按照流程填写必要信息,注意仓库地址不要带https,填写完后,下面就会生成必要信息,我们直接在组件内替换对应的参数就可以了

一个完整、个性、有意思的博客肯定还会有很多自定义的JS内容要实现,比如copy自动添加版权、控制台默认输出定制log、动态页面title等等;这些大部分都有第三方组件来协助我们完成这些东西,但是如果找不到我们就需要自己去写,我们以为例(这个也有三方插件,可以自行搜索):

新建文件


修改文件:


代表函数不运行在服务端(SSR)下;这个常量是Vuepress为我们提供的,更多变量参考常量

很多时候我们可能会同时写多篇笔记和文章,或者是写完后暂时不想发出去,这个时候,就需要一个草稿箱来暂时存储我们的文章,以防影响发表别的文章,我们有两种方式来实现

第一种就是修改文件,通过在代码中过滤掉特定格式的文件来实现不讲文件链接往外暴露,这种方式间接的实现了草稿箱功能,但是如果知道链接或者通过搜索功能搜索到了这个页面还是可以进去的

第二种也是我现在正在用的方式:通过官方提供的功能,它可以避免某个文件被 VuePress 处理,所以我们可以通过这个功能来实现想要的效果,我是将所有下划线开头的文件作为草稿文件的

修改



博客只有在别人能够搜索的到才有更多创作的意义,因此我们需要生成站点地图:,它做seo必不可少的文件,首先安装装这个插件;然后修改


然后我们就可以将生成的文件进行百度收录、谷歌收录、360、搜狗、Bing等等能提交的都提交下

我的源码文件和打包文件是分开来存储的,一个私有,一个公开。主要是因为源码中包含一些备注文件不太方便公开,因此为了方便,写了一个自动打包上传的方法,


Package.json中添加一个script:·"deploy": "bash deploy.sh"·,这样就可以通过一键操作了,还是比较香的

    以上就是本篇文章【基于vuepress2搭建专属自己的博客,并集成评论、打赏等常用功能】的全部内容了,欢迎阅览 ! 文章地址:http://www78564.xrbh.cn/news/30567.html 
     文章      相关文章      动态      同类文章      热门文章      栏目首页      网站地图      返回首页 迅博思语移动站 http://www78564.xrbh.cn/mobile/ , 查看更多   
最新文章
SEO 短视频网页入口网站推广:提升网站排名,增加流量,提高转化率
如何通过 SEO 短视频网页入口网站推广提升网站排名、增加流量并提高转化率在当今数字化时代,短视频已成为一种极具吸引力的内容
Open Chat GPT软件推荐理由
OpenChat GPT是一款以人工智能为主的聊天软件,其中有大量的知识可以了解,开启机器人与之对话,还能让它帮助你解答各种问题,这
因赛集团:公司自研大模型与豆包等有合作,近期陆续会有AI电商营销等应用产品版本更新/上线
因赛集团12月19日互动平台表示,字节既是公司客户,也是公司供应商。公司已取得字节/抖音星图、云图、AD、千川、优选等一代端口/
cp名生成器网页版 cp名生成器在线生成网址入口
cp名生成器网页版,cp名生成器在线生成网址入口是什么?现在为大家带来cp名生成器网址入口,可以直接在线生成cp名,只需要直接输
flash插件已不再受支持怎么解决
flash插件是一款可以帮助用户在手机上看视频玩游戏的软件,借助flash插件手机版软件用户可以享受到更为良好的flash配置体验,无
2018年山西对口升学计算机应用类专业常用工具与软件考纲题库
1.下列无法解决操作系统资源不足的是( )。A、定期进行磁盘整理 B、彻底删除不用的程序C、在装有操作系统的分区内安装其他应用
39条常见的Linux系统简单面试题
1、如何看当前Linux系统有几颗物理CPU和每颗CPU的核数?答:[root@centos6 ~ 10:55 #35]# cat /proc/cpuinfo|grep -c 'physical
6款免费的ai变声器,助你开麦就变声「2024抢先看」
你是否也曾想模仿电视剧中的明星说话,或者想像泰勒一样有着独特的嗓音呢?通过免费版ai变声器,你可以轻松实现实时变声,将你的
Mac电脑VS Code配置Flutter开发环境(图文超详细)
官网地址: https://developer.android.google.cn/历史版本下载地址: https://developer.android.com/studio/archi
Docker部署web项目
1、安装Docker2、安装JDK3、上传打包好的项目Jar包到服务器4、在项目Jar包的同目录下创建Dockerfile5、构建程序镜像6、查看镜像7