一看就会的保姆级教程,10分钟搭建个人博客(三)

简介: 接上文。

四、开始输入文章吧


按照上面进行配置,一个基本的博客就搭建好了,现在就可以开始疯狂输入文章了,所有的文章只需要以.md文件格式放在blogs文件夹下即可


我们创建一篇文章试试吧~


---
title: 我的第一篇文章
date: 2021-05-07
categories:
 - 分类1
tags:
 - 标签1
 - 标签2
---
这是我的第一篇文章


这里有四个属性可以配置,分别是titledatecategoriestags


这四个属性在页面上的体现如下图所示:


a4219f14a0c79ea77ba2b2ff57f1cf15.png


其中,date的时间也会在时间轴中呈现出来,即你所有的文章会按date的时间从上到下按时间新->旧的顺序进行排序


fc54f3838b81302295d8077c274843fb.png


另外,我们本文使用的主题框架还为文章提供了一个很不错的功能:加密,只需要在文章中给keys属性赋值一个md5加密后的字符串即可


比如我们将密码设为zero2one,那么打开在线md5加密 (opens new window)[5]网站,将密码输入到框中,就能得到一串密文,该密文就是我们要设置的keys的值


45b3346b8d260d927447ff595cc0259b.png


---
title: 我的第一篇文章
date: 2021-05-07
categories:
 - 分类1
tags:
 - 标签1
 - 标签2
keys:
 - 'ababf713be53f3d10366196bf0297c30'
---
这是我的第一篇文章


来看下效果:


2426825ea727fea873506df7f3d59763.jpg


五、添加评论模块


其实这个主题框架已经内置了评论插件@vuepress-reco/vuepress-plugin-comments,我们需要做的就是做一些额外的配置


首先去Valine官网 (opens new window)[6]注册一下Valine账号,注册好后进行登录,然后进入控制台,点击左下角创建应用


7b8d6fe4ce279511fb27a588bde0f224.png


应用创建好以后,进入刚刚创建的应用,选择左下角的设置>应用Key,然后就能看到你的APP IDAPP Key了:


c38277d74ebd572c8615edc44554b988.png


拿到APP IDAPP Key后,我们来到我们项目中.vuepress/config.js中的themeConfig属性中,按如下设置即可:


module.exports = {
  // ...
  themeConfig: {
    // ....
    valineConfig: {     // valine 评论功能配置信息
      appId: '在这输入你的appid',// your appId
      appKey: '在这输入你的appKey', // your appKey
      placeholder: '尽情留下你想说的话吧~',           // 评论框占位符
      avatar: 'wavatar',           // 评论用户的头像类型
      highlight: true,         // 代码高亮
      recordIP: true,         // 记录评论者的IP
    },
  }
  // ...
}


这样我们就能看到我们每篇文章的最底部都有留言功能了


280692e9e3c368b901699f39a7170ec2.png


当然如果我们不想让某篇文章有留言板,也可以设置isShowComments属性为false即可


---
title: 我的第一篇文章
date: 2021-05-07
categories:
 - 分类1
tags:
 - 标签1
 - 标签2
keys:
 - 'ababf713be53f3d10366196bf0297c30'
isShowComments: false
---
这是我的第一篇文章


此时留言板就不存在了


六、总结


到此为止,基本上一个博客该有的功能就都具备了。其实本文介绍的这个主题脚手架他还提供了一个插件广场(支持实现各种各样的功能),目前这个插件广场中有:打赏插件回到顶部插件、音乐播放器插件、可爱光标插件、流程图插件等等


4319ac9048826e134ff29d62b628ca96.png


最后,大家也可以访问一下我搭建的个人博客[7] ,我正在我的个人博客里打造一套完整的宝典,欢迎关注~

相关文章
|
1月前
|
监控 安全 数据可视化
情报搜集神器:Spiderfoot 保姆级教程
情报搜集神器:Spiderfoot 保姆级教程
60 1
|
安全 Java 关系型数据库
💖10分钟阿里云搭建个人网站(保姆级新手向)💖
我通常都会说自己搭建一个网站,利用阿里云/腾讯云/华为云/七牛云等等各种云服务器来快速搭建一个属于自己的装x小网站,虽然不是很牛x,但是对于说找实习、做毕业设计加分,这种纯粹是绰绰有余,别人会觉得你很有动手能力,话不多说,马上开始,给我十分钟,带你学会一个装x的小知识点。
1396 0
💖10分钟阿里云搭建个人网站(保姆级新手向)💖
|
网络安全 数据库
【保姆级教程】基于阿里云搭建网站,看这篇就够了!
本文演示了三种网站的搭建,分别是:博客、论坛、个人作品。从域名选择,到阿里云服务器的购买,到最后的网站搭建。
【保姆级教程】基于阿里云搭建网站,看这篇就够了!
|
1月前
|
XML 网络协议 搜索推荐
情报搜集神器:theHarvester 保姆级教程(附链接)
情报搜集神器:theHarvester 保姆级教程(附链接)
72 0
|
5月前
|
编译器 C++
《C++避坑神器·八》史上最全模板的使用
《C++避坑神器·八》史上最全模板的使用
29 0
|
开发工具 git 开发者
【保姆级教程】白嫖老外的云服务器
【保姆级教程】白嫖老外的云服务器
【保姆级教程】白嫖老外的云服务器
|
安全 网络协议 搜索推荐
快速搭建个人博客——保姆级教程 下
快速搭建个人博客——保姆级教程
574 0
快速搭建个人博客——保姆级教程 下
|
JavaScript 前端开发 Shell
快速搭建个人博客——保姆级教程 上
快速搭建个人博客——保姆级教程
222 0
快速搭建个人博客——保姆级教程 上
|
缓存 JavaScript 前端开发
手把手教你从0开始搭建个人博客,东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
手把手教你从0开始搭建个人博客,东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
手把手教你从0开始搭建个人博客,东半球最详细的保姆级博客搭建部署教程 | 程序员人手必备个人博客网站
|
分布式计算 资源调度 Hadoop
二十三、HadoopHA环境搭建(保姆篇,手把手搭建)
二十三、HadoopHA环境搭建(保姆篇,手把手搭建)
二十三、HadoopHA环境搭建(保姆篇,手把手搭建)