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

2019-05-26 10:35:08 浏览数 (1)

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

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

1. 主题的安装以及配置

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

(1) 下载主题:将next主题下载到博客目录下的themes里面的next文件夹中。

代码语言:javascript复制
git clone https://github.com/theme-next/hexo-theme-next themes / next

完成后可以看到:

(2)启用主题:修改blog目录下的_config.yml 文件中的theme值改为next

代码语言:javascript复制
# 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. 效果图

0 人点赞