hexo的写作方法

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

创建一篇新文章

$hexo new [layout] <title>"

添加文章更新时间¹

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

{%ifpost.updatedTand post.updated > post.date%}+08 = '00'
T<span class='"post-updated">+08 = 00'
T  &nbsp; | &nbsp; {{ __('post.updated') }}+08 = '00'
T  <time itemprop='"dateUpdated" datetime="{{ moment(post.updated).format() }}" content="{{ date(post.updated, config.date_format) }}">+08 = 00'
T    {{ date(post.updated, config.date_format) }}+08 = '00'
    </time>
  </span>
{% endif %}

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

post =
Tupdated =  '更新于+08:00'

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

display_updated = 'true+08:00'

添加Gitalk

Error = not found

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

Next 显示文章阅读数

为博客显示站点访问人数/站点浏览量/文章浏览量 在Next主题中内置有[不蒜子统计](http =//theme-next.iissnan.com/third-party-services.html#analytics-busuanzi)

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

# 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 = 次

出现的问题 这样设置之后看网站上并未显示出访问数，查询之后，发现是不蒜子的域名更换了，所以我们网站中对应的不蒜子域名也要进行更换。官网消息在[这里](http =//ibruce.info/2015/04/04/busuanzi/)

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

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

更改为

<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 更新

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

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

// Layout sizes
// --------------------------------------------------
$content-desktop                = 700px;
$content-desktop-large          = 800px;
$content-desktop-largest        = 900px;

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

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

// 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 主题有了更为方便的改法，具体的可以看这篇博客。

设置字体²

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

添加博客图片方式

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

- 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)即可了。

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

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

关闭自动弹出

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

将代码注释或删除即可。

# 文件：站点配置文件_config.yml
toc =
-  enable = true
+  enable = false

# 文件 = 主题配置文件
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

写英文标题

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

设置代码块字体

# 文件：主题配置文件
font =
  ...
  # Font settings for <code> and code blocks.
  codes =
    external = true
    family = monospace
    size =

我在这里设置的字体是monospace

设置目录，在正文上方³

(1) 安装hexo-toc插件

npm install hexo-toc --save

npm如果太慢，使用cnpm.

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

toc =
  maxdepth = 3
  class = toc
  slugify = "transliteration"
  decodeEntities = false
  anchor =
    position = after
    symbol = '#'
    style = header-anchor

(3) 在文章中加入

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

关闭本地搜索

# 文件：主题配置文件
local_search =
-  enable = true
+  enable = false

添加文章底部版权声明⁴

如何将已发布的文章置为未发布

将文章从_post文件夹移入到_draft文件夹中.

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

使用 Github Action 对博客改造进行 CI/CD，将部署步骤移除本地

2020/04/04

创建一篇新文章

添加文章更新时间¹

添加Gitalk

Error = not found

Next 显示文章阅读数

文章设置

Next文章调整宽度

Next文章修改文字大小

设置字体²

添加博客图片方式

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

完全移除sidebar

写英文标题

设置代码块字体

设置目录，在正文上方³

关闭本地搜索

添加文章底部版权声明⁴

如何将已发布的文章置为未发布

Hexo 日志

hexo的写作方法

2020/04/04

创建一篇新文章

添加文章更新时间1

添加Gitalk

Error = not found

Next 显示文章阅读数

文章设置

Next文章调整宽度

Next文章修改文字大小

设置字体2

添加博客图片方式

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

完全移除sidebar

写英文标题

设置代码块字体

设置目录，在正文上方3

关闭本地搜索

添加文章底部版权声明4

如何将已发布的文章置为未发布

Hexo 日志

添加文章更新时间¹

设置字体²

设置目录，在正文上方³

添加文章底部版权声明⁴