记录hexo配置中遇到的各种问题，随缘更新中……

  • OS：Windows 10
  • 主页类型：gitpage
  • 官方文档：文档 | Hexo

第一个网页#

此部分根据官方文档操作即可完成，故不赘述

部署到github#

此部分根据官方文档操作即可完成，故不赘述

配置主题#

这里面有非常多主题，随便选一个自己喜欢的用就好了。

我选择的主题是Anatolo，这个主题的作者锦心是一位可爱的OIer妹妹（她还不到大一就能自己写theme，而我配置她的主题都磕磕绊绊quq），她的主页：Lhc_fl Home (lhcfl.github.io)

安装#

参考Anatolo (lhcfl.github.io)

配置#

复制_config.example.yml为_config.yml，修改hexo根目录下的 _config.yml ： theme: Anatolo

上面是锦心写的配置方法，但是当时我花了很久时间才理解，具体来说应该是把themes/Anatolo下的_config.example.yml文件复制到themes/Anatolo（一开始我以为是复制到根目录……），然后修改hexo项目根目录下的 _config.yml ： theme: Anatolo。

正文部分#

写入正文#

  • 新建文章 ：用hexo new <title> ，可以在_post目录下新建<title>.md文件，之后便可以按照markdown语法开始写作。

编辑文章的分类、标签#

参照如下写法即可

1
2
3
4
5
6
7
title: hexo配置问题
date: 2023-01-12 02:45:58
tags: 
    - 环境配置
    - hexo
categories:
    - 环境配置

插入图片#

这篇文章十分详细地讲了如何方便地结合Typora插入图片：hexo博客如何插入图片 - 知乎 (zhihu.com)

插入公式#

找不到参考的文章了quq

告诫我配置完环境一定要马上整理

警钟长鸣

插入TOC目录#

直接用Typora中的TOC是不能插入目录的！

正确插入方法如下：

  1. 安装hexo-toc插件：npm install hexo-toc --save

  2. 参照文档内的方法编辑_config.yml

  3. 在想插入目录的地方写入

    1
    <!-- toc -->

插入代码#

无需插件，正常写入即可。

TODO：学习利用插件对代码块进行优化的方法。

嵌入youtube视频#

  1. 打开一个youtube视频
  2. 点击视频下方的分享键
  3. 点击弹出窗口中“嵌入”上方的按钮
  4. 复制右侧iframe开头的代码
  5. 直接复制到md文件中即可（md文件是兼容html语法的）

下面是一个示例

1
<iframe width="560" height="315" src="https://www.youtube.com/embed/7XZR0-4uS5s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

About页#

用hexo new page "about"新建“关于”页面，然后正常写入内容即可

Tag页#

用hexo new page "tag"新建标签统计页面即可，无需写入任何内容

开启评论区#

我使用的是gitalk，配置参照如下两篇博客

Hexo-Anatolo主题添加gitalk评论系统 - 简书 (jianshu.com)

微调Hexo主题Anatolo接入gitalk · Csome

但是需要提醒一点：

  • _config.yml下的repo属性只需要填写仓库名字即可，不要填写仓库链接！

首页显示文章摘要#

配置步骤：

  1. Anatolo/layout/page.pug文件中block content中调用+make_post函数时的true改成false
  2. Anatolo/_config.yml文件中useSummary的值设置为false
  3. md文件中的front-matter里面加上excerpt: xxx，xxx为摘要内容

尝试对上面的步骤做一个解释（因为我不懂前端，这个步骤也没有文档说明，解释的可能不对）

Anatolo/layout/page.pug 的content这个block可能是产生首页、about页内容的部分，我注意到里面调用了一个mixins中定义的make_post函数，page参数代表的是md文件中的front-matter和正文组成的struct。

1
2
3
4
5
6
block content
    .autopagerize_page_element: .content: .post-page
        include mixins
        +make_post(page, false)
        if page.comments
            include partial/comments

然后找到Anatolo/layout/mixins.pug中的make_post函数的，这边关注它的前半部分就可以了。我们呢发现如果is_detail的值是true，那么首页的摘要处只会显示文章内容和copyright两部分，所以要修改make_post中的输入参数（步骤1）。

然后我们发现无论config文件中的useSummary值如何，这时程序会去找item.excerpt，所以我们front-matter中要写入excerpt属性，内容为摘要（步骤3）。而如果useSummary的值是false，那么如果我们在front-matter中写入了excerpt属性，那么就会把excerpt的内容作为摘要，如果没有写入，则会把文章的内容直接作为摘要。

设置false的原因是我发现如果设置true，about页面会清楚格式（例如无序列表）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
mixin make_post(item, is_detail)
	.post.animated.fadeInDown
		.post-title
			h3
				if is_detail
					a= item.title
				else
					a(href= url_for(item.path))= item.title
		if is_detail
			.post-content
				p!= item.content
				if theme.copyright.show
					.tip!= (item.copyright || theme.copyright.default) + "<br>" + __("author") + ": " + (item.author || theme.author)
		else
			.post-content
				if theme.useSummary
					- var summary = item.excerpt || item.content
					p!= truncate(strip_html(summary), {length: 160})
				else
					.card
						if item.excerpt
							p!= item.excerpt
						else
							p!= item.summary || item.content

本文采用CC-BY-SA-3.0协议，转载请注明出处
作者: 核子