Hexo博客搭建全攻略(四)高级应用

简介

截止上节，我们已经利用 Hexo 搭建起完整博客环境，现在你应该可以愉快写作并管理自己的博客啦。在实际操作过程中，可能还是会遇到一些问题不知道如何解决。下面，我将整理一些我的实际操作过程遇到一些麻烦以及解决的方法，供大家参考。

自定文字大小与颜色

Markdown语法本身没有指定文字大小与颜色的内容，但在实际写作过程中，可能会遇到这方面的需要，如下图：

在文章结尾，有一个版权声明，为了醒目，需要对文字做个颜色上的区分，相信大家在写作过程中，也会遇到这样的需求，如何解决呢？

鉴于Markdown是一种弱格式的语法，在许多Markdown工具中，为丰富一些编排效果，添加了对一些html标签的支持。 Hexo 也是如此，要实现如上图的效果，很简单，只需以html标签包起来，并对标签添加相关属性即可，代码如下：

> <font color="ff0000">版权声明：本文为原创，欢迎转载，转载请注明出处，勿用于商业用途！</font>

当然，如果要自定义文字大小，只需要在 font 标签添加 size 属性即可。

首行缩进

写作时，有些人可能有段落首行缩进的习惯，出于习惯，于是在首行开始处，手动输入空格缩进，就像在word等文字编辑工具中那样。但一预览，就会发现，首行输入的空格消失了。Markdown语法规范会自动清理首行头部的这些空格。那我们想首行缩进，该如何处理呢？

加空格缩进的思路肯定是没错的，现在就要想办法阻止我们添加的空格被清理掉。方法当然有，就是添加空格的硬编码，这样强制显示出空格，代码如下：

 //半角空格（英文）
 //全角空格（中文）

如下，就是添加了首行缩进以及自定义文字大小的示例

  本站是使用<font size=4>[Hexo](https://hexo.io)</font>框架搭建，托管在<font size=4>[Github](https://github.com/gradyu)</font>之上，博客主题使用的是<font size=4>[NexT](http://theme-next.iissnan.com)</font>。

注意，空格编码 &emsp 后面一定不要漏了 <font color="ff0000"> ; </font>这个英文分号。

图片引用

“有图有真相”曾一度风靡网络，现在谁写博文章里面没几张图片呢？Markdown写作引用图片何其简单，无非就是 ![](url) 这样简单的语法就能搞定了，这也值得拿出来说事？不然，至少有下面一些问题我需要在此探讨一下：

1. url是远程还是本地？
2. 如果是远程，怎样保证url上对应图片不会被别人删除？
3. 如果是本地，我们要怎么管理这些本地图片？

本地管理

我们先说本地管理的方式，此种方法管理起来相对比较简单，但写作不太方便。以下详细介绍：

统一管理

可以在站点源码的source目录下添加一个images目录，然后将图片放入此目录下，在文章以![](/images/图片文件名) 方式引用即可。

此种方法最简单，但图片在首页或归档页里显示不出来。 Hexo 为解决这个问题，提供了资源文件夹功能。

资源文件夹

此功能默认是关闭的，可以通过将 站点配置文件 中的 post_asset_folder 选项改为 true 来打开。

_config.yml
post_asset_folder: true

打开 资源文件夹 功能后，Hexo会在每次执行 hexo new [layout] <title> 命令时自动创建一个与之对应的文件夹，此文件夹拥有与对应的md文件名一样的名字，所有与文章对应用的资源都可以放在此文件夹中，当然包括图片资源。

在文章中如何引用这些资源呢？通过Markdown常规引用语法，当然可以引用到资源，但依然无法解决在首页或归档页无法显示的问题。为此，Hexo 专门引入了特定标签来解决，语法如下：

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

举列来说，你把 example.jpg 放入资源文件夹中，正确引用的方式如下：

{% asset_img example.jpg This is an example image %}

远程管理

也许有人会问，即然本地管理已经很好的解决了图片显示的问题，为什么我还要讨论远程管理？

可能有人已经猜到了，本地图片在部署时，最终还是要传到网络空间的。而网络空间是有限制的，以Github为例，如果我所记不差，应该只有200M空间。这空间对文字而言，应该是绰绰有余，如果有图片，那就很难说啦。有些人可能还在博客上开通相册功能，如此空间就很可能不够使用啦。

这时可能有人帮忙出点子啦，指出文章的图片可以直接引用网上的资源，这样不是就解决所有问题啦。当然，如果这图片是你网盘或者其他自己能够控制的资源，也不是不可以。我要特别提醒的是，千万不要引用自己无法控制的资源，因为这资源说不定什么时候就可能被别人移除啦。

如果你手头没有现成的图片管理资源，或者说自己也不太想直接引用自己的网盘资源，那么我就建议你使用七牛，原因如下：

1. 提供10GB免费存储，每月10GB的免费下载流量，对个人博客来说，这绰绰有余啦；
2. 配合极简图床可以将效率提到最高；
3. Hexo提供七牛同步插件，一次配置好后，在部署时，可以自动上传并生成引用路径。

具体的使用方法，大家可以参考相关链接，这里不作展开啦。

文章引用

在写作时，文章里面可能需要引用自己写的另一篇文章，相信这种情况大家也比较常见，如下图：

针对这种情况，Hexo 也提供特定标签来处理，其语法如下：

{% post_path slug %}
{% post_link slug [title] %}

其中 slug 是md文件对应的文件名，title 是要在文章引用显示的标题。

文本居中

实际写作中，可能会文本居中显示的需求，Markdown本身没有相关语法， Hexo 提供了相关支持，有两种书写方式，如下：

<!-- HTML方式: 直接在 Markdown 文件中编写 HTML 来调用 -->
<!-- 其中 class="blockquote-center" 是必须的 -->
  <blockquote class="blockquote-center">blah blah blah</blockquote>

  <!-- 标签 方式，要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}

阅读全文

在首页显示文章的部分内容，并提供一个 阅读全文 的按钮，点击跳转至文章全文，这是一个比较常用的需求。 NexT 主题提供三种方式来控制文章在首页显示的方式，如下：

1. 在文章中使用 `` 手动进行截断，Hexo 提供的方式
2. 在文章的 front-matter 中添加 description，并提供文章摘录
3. 自动形成摘要，在 主题配置文件 中添加：

auto_excerpt:
  enable: true
  length: 150

建议使用 ``（即第一种方式），除了可以精确控制需要显示的摘录内容以外， 这种方式也可以让 Hexo 中的插件更好的识别。

代码主题

NexT 使用 Tomorrow Theme作为代码高亮主题，共5款可供选择，分别是 normal，night， night blue， night bright， night eighties

更改 主题配置文件 中的 highlight_theme 字段，将其值设定成你所喜爱的高亮主题，例如：

# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: normal

添加相册

Hexo中实现相册功能的主题寥寥无几，不幸的是，NexT 正好是没有实现相册功能的主题之一。毕竟博客是用来写作的，而另方面，实现相册也比较难：

1. 图片放哪里，放在 source 文件夹中，需要解析成静态文件，图片一旦多的话就会解析的非常慢。

2. 怎么批量获取图片 url (文件名)，图片那么多，不可能一个一个的手动输入图片 url；

3. 如何显示这些图片，你不仅需要添加 相册 页面，还需要编程实现图片的显示排版；

基于以上，我不建议大家在博客里面开通相册功能，不过如果你有强烈的开通意愿的话，我建议你使用 yilia主题 , 该主题实现了相册功能，且与 NexT 的 Pisces 模式比较接近。大家有兴趣可以自己去研究下，这也是一个很不错的主题，我就不展开了。

添加音乐播放

有人可能希望读者阅读时，自动播放些背景音乐，以给读者更好的阅读体验，要集成音乐播放服务，也很简单，步骤如下：

1. 进入网易音乐，找到自己喜欢的乐单；
2. 进入乐单，点击 生成外链播放器
   

3. 选择自己需要的尺寸，确认是否自动播放，系统自动生成插件代码

   
   

4. 复制html代码到相应的文章或页面，重新生成本地预览

   
   

注意：你也可以将播放器添加到侧边栏里，修改主题目录下 layout/_macro 的 sidebar.swig ，将刚才的html代码贴到你想要放到的位置。这样读者进入站点的任何地方都会播放背景音乐。当然，你也可以将html代码中的 width 和 height 改成 0 来隐藏那个播放器界面，以实现真正的背景音乐。

资源压缩

NexT 并未对 HTML、JavaScript 以及 CSS 做压缩处理。而且，如果你细心些，可能已经发现 Hexo 生成部署页面里有大量的空白，这些空白进一步也会增加文件大小，进而影响网站响应上的体验。这些虽然不影响功能，但对一些追求完美与极致的人来说，可能没法接受。如何解决呢？

有过前端开发经验的人，可能会想到在构建时，利用工具进行相关处理，gulp 可能是许多人比较容易接受的方案，这里面有相当量的开发工作，需要写一些 task，复杂度比较高，具体操作大家可以参考使用gulp精简hexo博客代码。

可能许多人没有前端开发经验，对 gulp 也不太熟悉，如果也想进行资源压缩，那么我建议你试试 hexo-all-minifier 插件。能过这个插件，避免编写代码，配置也不太复杂，也可以达到压缩目的。

解决多说不稳定

相信大家使用过程中，可能偶尔遇到 多说 评论加载出错或者加载速度慢的情况。也许你建议我换掉 多说 ，但我对多说那是“深爱”啊！不换它，如何解决问题呢？

解决方法，从原理上来说其实很简单，主要思路如下：

1. 将多说css文件由头部加载改为尾部加载；
2. 利用七牛进行CDN加速；

具体操作可以参考多说评论不稳定，加载速度慢优化方法

双线部署

我们现在是将站点部署在 Github ，众所周知的原因，站点加载速度应该不会让大家满意。正如之前所说，我们其实可以将站点部署在 Coding。其实如果你有自己的域名，我建议你最好做双线部署，这样，国内访问解析至 Coding ，国外解析至 Github。无论如何，我们先要添加 Coding 部署。

添加Coding部署

首先，自行到Coding注册账号。

在 用户账号 SSH公钥 页面添加本机公钥，方式与之前在 Github 添加公钥类似。

在本机终端输入以下指令测试ssh公钥连接

ssh -T git@git.coding.net

终端上返回以下信息表明连接成功

Hello username You've connected to Coding.net by SSH successfully!

创建仓库，仓库名任意。

进入仓库，点击 代码 的 Pages 服务，进行相关配置

修改 站点配置文件 的 deploy 信息如下

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
      github: git@github.com:yourname/yourname.github.io.git,master
      coding: git@git.coding.net:yourname/yourname.git,master

执行部署

hexo d -g

观察终端控制台输出，正常情况下，你会发现 Hexo 自动将页面部署至 Coding 和 Github。

浏览器打开 http://yourname.coding.me/blog 即可访问部署在 Coding 的博客站点。

浏览器打开 http://yourname.github.io/ 即可访问部署在 Github 的博客站点。

整理上面部署的过程，你会发现，与 Github Pages 相比，除过国内访问速度快之外， Coding 还有如下优点：

1. 仓库名没有特殊要求，且仓库可私有，你如果对源码信息比较敏感，可以将源码管理迁移至 Coding 。
2. 可以部署在任何分支上，这样我们在源码管理时，可以将源码放到 master， 网站页面部署在其他分支，避免按之前的方式，我们每次克隆仓库后，还要手动检出源码分支。
3. 支持最多5个域名绑定，而且绑定过程仅在后台就可以完成。
4. 绑定域后，还可以支持https，并提供免费SSL/TLS证书申请。当然，要完全支持https，你页面引用的资源的url还需要做相当的修改，这个大家可以自己去尝试。而在 Github 绑定域名后，就无法支持https。

如果你决定添加 Coding 部署，强烈建议你将源码管理也迁移过来，迁移方法这里不做具体介绍，若有疑问，可以私信我。

双线解析

双线解析前提是你必须要有一个自己的域名，如若没有，强烈建议你去 万网 购买一个便宜域名，几块钱就可以搞定。

进入域名管理后台，添加如下dns解析信息

这里我使用的二级域名，你想使用主域名，就将图中的 blog 改为 @ 或 www。如此，访问你指定的域名，国内读者就会解析到 Coding，国外读者就会解析到 Github。

总结

本文是 Hexo 博客搭建系统文章的终结篇，这个系列是我在自己搭建博客站点时的经验总结，所有的东西基本都来源于网络，我仅是一个整理总结，这可以说众人智慧的结晶，在此，我想再次感谢这些人贡献，也希望我个人微薄的努力，能给大家带来帮助，最后，也要感谢大家对我的支持，我经后还会将更多更好的文章带给大家。这个系列结束后，下个系列将介绍mac系统上各种开发环境搭建，敬请大家期待！

版权声明：本文为原创，欢迎转载，转载请注明出处，勿用于商业用途！