简介
截止上节,我们已经利用 Hexo
搭建起完整博客环境,现在你应该可以愉快写作并管理自己的博客啦。在实际操作过程中,可能还是会遇到一些问题不知道如何解决。下面,我将整理一些我的实际操作过程遇到一些麻烦以及解决的方法,供大家参考。
自定文字大小与颜色
Markdown语法本身没有指定文字大小与颜色的内容,但在实际写作过程中,可能会遇到这方面的需要,如下图:
在文章结尾,有一个版权声明,为了醒目,需要对文字做个颜色上的区分,相信大家在写作过程中,也会遇到这样的需求,如何解决呢?
鉴于Markdown是一种弱格式的语法,在许多Markdown工具中,为丰富一些编排效果,添加了对一些html标签的支持。 Hexo
也是如此,要实现如上图的效果,很简单,只需以html标签包起来,并对标签添加相关属性即可,代码如下:
> 版权声明:本文为原创,欢迎转载,转载请注明出处,勿用于商业用途!
当然,如果要自定义文字大小,只需要在 font
标签添加 size
属性即可。
首行缩进
写作时,有些人可能有段落首行缩进的习惯,出于习惯,于是在首行开始处,手动输入空格缩进,就像在word等文字编辑工具中那样。但一预览,就会发现,首行输入的空格消失了。Markdown语法规范会自动清理首行头部的这些空格。那我们想首行缩进,该如何处理呢?
加空格缩进的思路肯定是没错的,现在就要想办法阻止我们添加的空格被清理掉。方法当然有,就是添加空格的硬编码,这样强制显示出空格,代码如下:
//半角空格(英文)
//全角空格(中文)
如下,就是添加了首行缩进以及自定义文字大小的示例
本站是使用[Hexo](https://hexo.io)框架搭建,托管在[Github](https://github.com/gradyu)之上,博客主题使用的是[NexT](http://theme-next.iissnan.com)。
注意,空格编码
&emsp
后面一定不要漏了 ; 这个英文分号。
图片引用
“有图有真相”曾一度风靡网络,现在谁写博文章里面没几张图片呢?Markdown写作引用图片何其简单,无非就是 ![](url)
这样简单的语法就能搞定了,这也值得拿出来说事?不然,至少有下面一些问题我需要在此探讨一下:
- url是远程还是本地?
- 如果是远程,怎样保证url上对应图片不会被别人删除?
- 如果是本地,我们要怎么管理这些本地图片?
本地管理
我们先说本地管理的方式,此种方法管理起来相对比较简单,但写作不太方便。以下详细介绍:
统一管理
可以在站点源码的source目录下添加一个images目录,然后将图片放入此目录下,在文章以![](/images/图片文件名)
方式引用即可。
此种方法最简单,但图片在首页或归档页里显示不出来。 Hexo
为解决这个问题,提供了资源文件夹功能。
资源文件夹
此功能默认是关闭的,可以通过将 站点配置文件
中的 post_asset_folder
选项改为 true
来打开。
_config.yml
post_asset_folder: true
打开 资源文件夹
功能后,Hexo
会在每次执行 hexo new [layout]
命令时自动创建一个与之对应的文件夹,此文件夹拥有与对应的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空间。这空间对文字而言,应该是绰绰有余,如果有图片,那就很难说啦。有些人可能还在博客上开通相册功能,如此空间就很可能不够使用啦。
这时可能有人帮忙出点子啦,指出文章的图片可以直接引用网上的资源,这样不是就解决所有问题啦。当然,如果这图片是你网盘或者其他自己能够控制的资源,也不是不可以。我要特别提醒的是,千万不要引用自己无法控制的资源,因为这资源说不定什么时候就可能被别人移除啦。
如果你手头没有现成的图片管理资源,或者说自己也不太想直接引用自己的网盘资源,那么我就建议你使用七牛,原因如下:
- 提供10GB免费存储,每月10GB的免费下载流量,对个人博客来说,这绰绰有余啦;
- 配合极简图床可以将效率提到最高;
- Hexo提供七牛同步插件,一次配置好后,在部署时,可以自动上传并生成引用路径。
具体的使用方法,大家可以参考相关链接,这里不作展开啦。
文章引用
在写作时,文章里面可能需要引用自己写的另一篇文章,相信这种情况大家也比较常见,如下图:
针对这种情况,Hexo
也提供特定标签来处理,其语法如下:
{% post_path slug %}
{% post_link slug [title] %}
其中 slug
是md文件对应的文件名,title
是要在文章引用显示的标题。
文本居中
实际写作中,可能会文本居中显示的需求,Markdown本身没有相关语法, Hexo
提供了相关支持,有两种书写方式,如下:
blah blah blah
{% centerquote %}blah blah blah{% endcenterquote %}
阅读全文
在首页显示文章的部分内容,并提供一个 阅读全文
的按钮,点击跳转至文章全文,这是一个比较常用的需求。 NexT
主题提供三种方式来控制文章在首页显示的方式,如下:
- 在文章中使用 `` 手动进行截断,Hexo 提供的方式
- 在文章的 front-matter 中添加 description,并提供文章摘录
- 自动形成摘要,在 主题配置文件 中添加:
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
正好是没有实现相册功能的主题之一。毕竟博客是用来写作的,而另方面,实现相册也比较难:
图片放哪里,放在
source
文件夹中,需要解析成静态文件,图片一旦多的话就会解析的非常慢。怎么批量获取图片 url (文件名),图片那么多,不可能一个一个的手动输入图片 url;
如何显示这些图片,你不仅需要添加
相册
页面,还需要编程实现图片的显示排版;
基于以上,我不建议大家在博客里面开通相册功能,不过如果你有强烈的开通意愿的话,我建议你使用 yilia主题 , 该主题实现了相册功能,且与 NexT
的 Pisces
模式比较接近。大家有兴趣可以自己去研究下,这也是一个很不错的主题,我就不展开了。
添加音乐播放
有人可能希望读者阅读时,自动播放些背景音乐,以给读者更好的阅读体验,要集成音乐播放服务,也很简单,步骤如下:
- 进入网易音乐,找到自己喜欢的乐单;
- 进入乐单,点击
生成外链播放器
-
选择自己需要的尺寸,确认是否自动播放,系统自动生成插件代码
-
复制html代码到相应的文章或页面,重新生成本地预览
注意:你也可以将播放器添加到侧边栏里,修改主题目录下
layout/_macro
的sidebar.swig
,将刚才的html代码贴到你想要放到的位置。这样读者进入站点的任何地方都会播放背景音乐。当然,你也可以将html代码中的width
和height
改成0
来隐藏那个播放器界面,以实现真正的背景音乐。
资源压缩
NexT
并未对 HTML
、JavaScript
以及 CSS
做压缩处理。而且,如果你细心些,可能已经发现 Hexo
生成部署页面里有大量的空白,这些空白进一步也会增加文件大小,进而影响网站响应上的体验。这些虽然不影响功能,但对一些追求完美与极致的人来说,可能没法接受。如何解决呢?
有过前端开发经验的人,可能会想到在构建时,利用工具进行相关处理,gulp
可能是许多人比较容易接受的方案,这里面有相当量的开发工作,需要写一些 task
,复杂度比较高,具体操作大家可以参考使用gulp精简hexo博客代码。
可能许多人没有前端开发经验,对 gulp
也不太熟悉,如果也想进行资源压缩,那么我建议你试试 hexo-all-minifier 插件。能过这个插件,避免编写代码,配置也不太复杂,也可以达到压缩目的。
解决多说不稳定
相信大家使用过程中,可能偶尔遇到 多说
评论加载出错或者加载速度慢的情况。也许你建议我换掉 多说
,但我对多说那是“深爱”啊!不换它,如何解决问题呢?
解决方法,从原理上来说其实很简单,主要思路如下:
- 将多说css文件由头部加载改为尾部加载;
- 利用七牛进行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
还有如下优点:
- 仓库名没有特殊要求,且仓库可私有,你如果对源码信息比较敏感,可以将源码管理迁移至
Coding
。 - 可以部署在任何分支上,这样我们在源码管理时,可以将源码放到
master
, 网站页面部署在其他分支,避免按之前的方式,我们每次克隆仓库后,还要手动检出源码分支。 - 支持最多5个域名绑定,而且绑定过程仅在后台就可以完成。
- 绑定域后,还可以支持https,并提供免费SSL/TLS证书申请。当然,要完全支持https,你页面引用的资源的url还需要做相当的修改,这个大家可以自己去尝试。而在
Github
绑定域名后,就无法支持https。
如果你决定添加 Coding
部署,强烈建议你将源码管理也迁移过来,迁移方法这里不做具体介绍,若有疑问,可以私信我。
双线解析
双线解析前提是你必须要有一个自己的域名,如若没有,强烈建议你去 万网 购买一个便宜域名,几块钱就可以搞定。
进入域名管理后台,添加如下dns解析信息
这里我使用的二级域名,你想使用主域名,就将图中的 blog
改为 @
或 www
。如此,访问你指定的域名,国内读者就会解析到 Coding
,国外读者就会解析到 Github
。
总结
本文是 Hexo
博客搭建系统文章的终结篇,这个系列是我在自己搭建博客站点时的经验总结,所有的东西基本都来源于网络,我仅是一个整理总结,这可以说众人智慧的结晶,在此,我想再次感谢这些人贡献,也希望我个人微薄的努力,能给大家带来帮助,最后,也要感谢大家对我的支持,我经后还会将更多更好的文章带给大家。这个系列结束后,下个系列将介绍mac系统上各种开发环境搭建,敬请大家期待!
版权声明:本文为原创,欢迎转载,转载请注明出处,勿用于商业用途!