通过github搭建个人博客2-博客个性化设置

摘要：上一节主要介绍了基本环境的配置，通过上一节的操作，已经能完成简单博客的搭建，但是还有很多不完美的地方，比如主页显示内容太多等。本节主要介绍如何个性化定制自己的blog，主要涉及到主题的安装以及设置，插入图片技巧，以及首页显示摘要等。

再次声明，本文中的所有操作都是基于windows操作系统，具体版本为win10 64位。

1. 主题的安装以及配置

hexo框架可以选用多种主题渲染，主题主页为：https://hexo.io/themes/ ， 用户可以在该网站下载任意主题并进行个性化配置。我喜欢next这个主题，该小节以next主题为例。

（1） 下载主题：将next主题下载到博客目录下的themes里面的next文件夹中。

git clone https://github.com/theme-next/hexo-theme-next themes / next

完成后可以看到：

（2）启用主题：修改blog目录下的_config.yml 文件中的theme值改为next

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

（3） 主题设置

• a. 选择Scheme

  Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持4种 Scheme，分别是：

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白

  • Mist - Muse 的紧凑版本，整洁有序的单栏外观

  • Pisces - 双栏 Scheme，小家碧玉似的清新

  • Gemini - 左侧网站信息及目录，块+片段结构布局

  Scheme 的更改通过更改next目录下的_config.yml ，搜索 scheme 关键字。 你会看到有四行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

我选择的是第三个。

• b. 将语言设置为中文

  在next目录下的_config.yml中，进行如下修改

• 设置其他信息，例如作者等

  

• 其他设置参照文献：https://blog.csdn.net/qq_32454537/article/details/79482896 或者 https://blog.csdn.net/qq_33699981/article/details/72716951

2. 插入图片技巧

因为hexo渲染是根据markdown文档渲染，在处理图片的时候会直接引用地址，需要做一些修改。

（1） 在blog文件夹的source目录下建立一个…/images文件夹，专门用来存放图片。而且这样设置之后的好处是既可以本地实时预览，部署网页又不需要修改，能够做到所见即所得。

b. markdown 编辑器使用typota（一款我觉得最优秀的markdown编辑器，下载地址：https://www.typora.io/），设置图片目录：编辑-图片工具-当插入图片时，目录选择a中建立的../images目录,此时文档的最上面会出现如下代码：

这样操作之后，由于hexo new blog所建立的文档都在_posts中，图片引用地址为：…/images/pic.jpg

,这样markdown编辑器刚好能实时预览。

（2）修改博客目录下的_config.yml文件，

也就是去掉前面的日期，这样渲染的过程中不会自动产生日期目录，文档目录为：

图中三步分刚好对应了github上的目录，public是主目录，第二个是每个博客网页的目录，图片都在images目录中，博客网页目录中只有一个index.HTML文件，刚好图片引用地址为：…/images/pic.jpg,与本地实时预览一样，做到网页与本地一致的效果。

hexo 新建的时候有post和page之分，唯一的区别是page会建立一个单独的文件夹，而post默认在_post文件夹下，上述图片插入方式只支持post，也是默认方式。

3. 主页显示摘要

默认情况下hexo博客(如本站)的首页显示的是完整的文章 – 而文章比较长的时候这无疑会带来很多不方便的地方。通过在每篇博客中添加：

做到主页仅仅显示摘要的效果，在 之前为主页显示的内容。之后为文章剩下的内容。复制该段代码一定选择粘贴文本。

4. 总结

经过上面的操作实例，个人博客基本构建完成，剩下的就是一些细节美化，参考文中提到的参考链接即可。

5. 效果图