摘要:上一节主要介绍了基本环境的配置,通过上一节的操作,已经能完成简单博客的搭建,但是还有很多不完美的地方,比如主页显示内容太多等。本节主要介绍如何个性化定制自己的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 最初的版本,黑白主调,大量留白
扫描二维码关注公众号,回复: 9637068 查看本文章 -
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. 总结
经过上面的操作实例,个人博客基本构建完成,剩下的就是一些细节美化,参考文中提到的参考链接即可。