Hexo优化与写作技巧

前言

前二篇文章已经介绍了作者Hexo+Next搭建优化博客的全过程。本篇作为该系列的最后一篇，主要介绍Hexo的一些写作方面的设置和主题的美化。该篇结束后，作者也将停止对博客的折腾开始进行相关技术的学习整理阶段。今天和老同事聊天，他问我下一步想学什么？？？这个问题把我给难住了好像什么都想学设计模式、ES6、ASP.NET MVC……现在也没什么方向。希望明天早上一觉醒来能有答应吧，不废话了进入正题。

文章写作技巧

Front-matter

使用Hexo n [文章名]创建一篇新的文章时，Hexo会自动使用scaffold文件下的布局文件为模版创建一个新的MD文件。默认的布局文件都包含Front-matter的内容。

Front-matter 可以设置文章的全局参数，在文章的最上方以---开头结尾。一般需要自己设置的参数是tags,categories。tags 用来设置文章的标签，categories用来设置文章的分类。Hexo目前不支持多级分类，文章分类只能有一级。设置方法如下。

categories:
- 博客搭建
tags:
- Hexo
- Next

首页添加阅读全文

写前两篇文章的时候，首页的文章列表显示了每一篇文章的详细内容。我刚开始以为就是这样后来通过BAIDU才知道原来可以通过设置文章参数或者加标记的方式解决该问题。

方法一添加more标记

在文章中合适的位置添加

1	<!--more-->

重新生成后首页的文章列表就会将该标记之前的内容作为描述信息，描述信息后面会显示阅读全文按钮。

方法二设置Front-matter参数

在Front-matter中添加description参数

title: Hexo优化与写作技巧
date: 2017-09-06 18:56:34
tags: [Hexo,Next]
categories: 博客搭建
description: Hexo优化与写作技巧Hexo优化与写作技巧Hexo优化与写作技巧Hexo优化与写作技巧

推荐使用第一种方法。比较灵活，可以自己控制。

七牛床图

虽然作者审美不太好，也不喜欢找图片。但感觉总会需要用到图片的时候，使用的git的空间好像有300M的限制，所以还是用外链的图片比较好。找了一些文章基本上都是用的七牛存储的，所以作者也使用了七牛。设置的过程也比较简单可以参考这两篇文章

使用七牛为Hexo存储图片

Hexo文章图片存储选七牛

Hext常用标签插件

Hext通过标签可以插入特定的内容以下是我感觉比较有用的。详细的请参考网官文档

引用块

在文章中插入引言，可以包含作者来源和标题。

1
2
3

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

样例

原谅我这一生不羁放纵爱自由

beyond, 海阔天空酷狗音乐

Bootstrap Callout

该插件包含了Bootstrap中一些引用样式。

1	{% note class_name %} Content (md partial supported) {% endnote %}

class_name 包含

default
primary
success
info
warning
danger

样例

default

primary

success

info

warning

danger

样式再美化

Fork me on GitHub

虽然作者的github上没有什么自己的开源项目，但是谁知道以后会不会有呢。先加上看上去不是也高大上些。

先去选个样式传送门

复制代码到主题文件F:\Tools\qzdotnet\themes\next\layout的_layout.swig文件中

1
2

<div class="headband"></div>
   <a href="https://github.com/qzdotnet"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a>

添加RSS

想要实现RSS需求安装插件hexo-generator-feed

1	npm install hexo-generator-feed

然后配置站点配置文件 添加

#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 30

最后配置主题配置文件的rss结点

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

阅读量

阅读量分两部分，每一篇文章的阅读量和网站总体的阅读量。

文章阅读量请参考：为NexT主题添加文章阅读量统计功能，基本的步骤呢是先到LeanCloud注册，然后配置主题配置文件

网站总体的阅读量使用的不蒜子统计，Next新版本已经集成了只需要修改主题配置文件

busuanzi_count:
  # count values only if the other configs are false
  enable: true                      
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: 本站访客数 #<i class="fa fa-user"></i>
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 本站总访问量 # <i class="fa fa-eye"></i>
  site_pv_footer: 次

本文结束

给每一篇文章未尾增加本文结束提示语，在\themes\next\layout\_macro目录下新建post-end-tag.swig内容如下

<div style="text-align:center;color: #ccc;font-size:14px;margin:10px 0">
  -------------本文结束
    <i class="fa fa-space-shuttle"></i>
   感谢您的阅读-------------
</div>

然后编辑同目录下的post.swig文件在<footer class="post-footer">之前插入

{% if theme.post_end_tag.enable and not is_index %}
  <div>      
     {% include 'post-end-tag.swig' %}      
  </div>
{% endif %}

最后在主题配置文件中增加配置项

1 2	post_end_tag: enabled: true

总结

三天的时候终于将博客搭建起来了。虽然大部分内容都是照着网上的内容做的，自己也没有学到太多的知识。但是整体的效果我还是非常满意的。从无到有，还了解了Hexo、Next还查了一些Swig、Yaml的资料也算有收获。博客就不再花时间折腾了。下一步还是抓紧确认要学习的技术，并开始深度学习。加油！！！！！！！！！！！！！！

前言