hexo的写作方法

Posted on

这篇文章记录我自己在使用Hexo过程遇到的问题和一些使用方法。

创建一篇新文章

$hexo new [layout] <title>

添加文章更新时间^1

首先修改/themes/next/layout/_macro/下的post.swig文件，在<span class="post-time">...</span>
标签后添加如下内容:

1
2
3
4
5
6
7
8
{%if post.updated and post.updated > post.date%}
  <span class="post-updated">
    &nbsp; | &nbsp; {{ __('post.updated') }}
    <time itemprop="dateUpdated" datetime="{{ moment(post.updated).format() }}" content="{{ date(post.updated, config.date_format) }}">
      {{ date(post.updated, config.date_format) }}
    </time>
  </span>
{% endif %}

其次若博客站点默认语言为中文，则修改/themes/next/languages/下的zh_Hans.yml文件

1
2
post:
  updated: 更新于

若为其他语言，则修改对应的语言文件即可。
最后修改主题配置文件，添加如下内容

1
display_updated: true

添加Gitalk

Error: not found

看了很多帖子，但是还是没有解决。

Next 显示文章阅读数

为博客显示站点访问人数/站点浏览量/文章浏览量
在Next主题中内置有不蒜子统计

设置方法
在主题设置文件_config.yml中搜索busuanzi_count

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
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: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o">阅读</i>
  page_pv_footer: 次

出现的问题
这样设置之后看网站上并未显示出访问数，查询之后，发现是不蒜子的域名更换了，所以我们网站
中对应的不蒜子域名也要进行更换。官网消息在这里

将/theme/next/layout/_third-party/analytics/下的busuanzi-counter.swig文件中的

1
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

更改为

1
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

即可，这样设置之后提交就可以发现访问数字显示出来了。

文章设置

Next文章调整宽度

修改\themes\next\source\css\_variables\base.styl文件，搜索content-desktop-large
然后设置想要的宽度即可。

21.8.1 更新

如果博客文章宽度太宽，读者的阅读体验会下降（至少我是这样，目光转动的范围太大，自己会很累）。

官方主题的文章展示宽度如下

1
2
3
4
5
// Layout sizes
// --------------------------------------------------
$content-desktop                = 700px;
$content-desktop-large          = 800px;
$content-desktop-largest        = 900px;

现在将这三项都改为 576px，这样每行展示的字数就会缩小，阅读也更加简易方便。修改方式类似这里

我们在 博客根目录/source/_data/_variables.styl下加入以下这些配置，记得不要修改原本的主题文件夹下的配置

1
2
3
4
5
// Layout sizes
// --------------------------------------------------
+$content-desktop                = 576px;
+$content-desktop-large          = 576px;
+$content-desktop-largest        = 576px;

Next文章修改文字大小

修改\themes\next\source\css\_variables\base.styl文件，搜索font-size-base
然后设置想要的文字大小即可。

(21.7.28 更新) 上面这种方式在新版 next 主题有了更为方便的改法，具体的可以看这篇博客。

设置字体^2

此位博主博客极为精品，干货极多。

添加博客图片方式

我所使用方式是相对路径本地引用，另外还有绝对路径和CDN生成链接的方式，在这里展示第一种。
设置站点配置文件

1
2
- post_asset_folder: false
+ post_asset_folder: true

之后在git bash中执行$hexo new [layout] article_name后本地会在~/source/_posts下自动生成一个article_name文件夹。

注意如果你的md文件如果设置了自动添加日期到名称的选项，在接下来的引用中你需要将日期给去掉，在执行$hexo g后你会发现在~/public/posts/下的同名文件夹是没有日期的，是一个“裸的”文章名称文件夹。这一点需要注意。
文件夹生成之后就将图片添加进去，在文章中使用![image_name](image_path)即可了。

打开文章时不同时显示目录

当初在新建博客的时候将文章目录在打开的时候也自动从右边弹出，但是发现这样并不怎么美观，并且我一般看博客文章的目录都喜欢在最开始看，不想将自己的目光一瞥看一眼目录，这样的目光转动我觉得很麻烦，也可能是自己的习惯问题。所以就将目录自动弹出关闭。

关闭自动弹出

1
2
3
# file path: themes/next/source/css/_custom/custom.style
//文章目录默认展开
//.post-toc .nav .nav-child { display: block; }

将代码注释或删除即可。

1
2
3
4
# 文件：站点配置文件_config.yml
toc:
-  enable: true
+  enable: false

完全移除sidebar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 文件: 主题配置文件
sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  position: left
  #position: right

  # Sidebar Display, available value (only for Muse | Mist):
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  Totally remove sidebar including sidebar toggle.
-  display: post
+  #display: post
  #display: always
  #display: hide
-  #display: remove
+  display: remove

写英文标题

1
hexo new "This is a test"  # 注意使用双引号将文章题目包裹，不然只会只用最后一个单词作为标题

设置代码块字体

1
2
3
4
5
6
7
8
# 文件：主题配置文件
font:
  ...
  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: monospace
    size:

我在这里设置的字体是monospace

设置目录，在正文上方^3

(1) 安装hexo-toc插件

1
npm install hexo-toc --save

npm如果太慢，使用cnpm.

(2) 配置站点配置文件_config.yml

1
2
3
4
5
6
7
8
9
toc:
  maxdepth: 3
  class: toc
  slugify: transliteration
  decodeEntities: false
  anchor:
    position: after
    symbol: '#'
    style: header-anchor

(3) 在文章中加入

1
<!-- toc -->

注: 如果标题处设置了脚注，类似[^1]这样的，则在生成好的目录处点击并不会跳转。关于这一点我还没有找到解决方法。

关闭本地搜索

1
2
3
4
# 文件：主题配置文件
local_search:
-  enable: true
+  enable: false

添加文章底部版权声明^4

Hexo 日志

20.4.10

  • hexo md不支持[toc]写法

20.4.11

  • 想要进行仓库分支备份博客源码，但是由于自己设置了主页，导致备份后的链接跳转变乱，就又使用会最初无备份的版本，自己另寻他路备份。

20.4.12

  • 添加博客图片相对路径方式
  • 在代码块中使用diff展示增减行
  • 打开文章时不同时显示目录
  • 设置代码块字体
  • 关闭本地搜索
  • 完全移除Sidebar

20.4.25

  • 移除gitalk

20.5.4

  • 正文上方添加目录
  • 添加文章底部版权声明

21.7.6