hexo：从0开始与踩坑实录

发表于 更新于 分类于

下载插件

curl下载github zip链接

1
curl -LJO https://github.com/theme-next/theme-next-fancybox3

unzip

1
unzip theme-next-fancybox3-master.zip

page布局有什么用？

官文档说的布局概念

布局概念含糊不清！

为什么主页将所有文章以详情的形式全列出来了？

文章没有添加 description 属性。形如

1
2
3
4
5
6
7
8
9
---
title: hexo：从0开始与踩坑实录
date: 2021-03-16 14:46:49
categories: 
- hexo
tags:
- hexo
description: 记录入坑hexo的过程中遇到的问题与最终解决
---

只有添加 description并且字段值不为空（可以使用空格占位），才会以概览模式在主页列出所有文章！

参考

文章中的图片的保存位置以及使用方式

post_asset_folder

开启 post_asset_folder，将生成文章同名目录。可以使用路径访问此目录下的资源！

1
2
# _config.yml
post_asset_folder: true

使用Markdown语法

1
2
3
4
5
# _config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

启用后，资源图片将会被自动解析为其对应文章的路径。
例如： image.jpg 位置为 /2020/01/02/foo/image.jpg ，这表示它是 /2020/01/02/foo/ 文章的一张资源图片， ![](image.jpg) 将会被解析为 <img src="/2020/01/02/foo/image.jpg">。

参考

Next如何添加分类页与标签页？

将Next配置文件中的Menu开启

路径：themes/next/_config.yml

将配置开启后，就可以在页面上看到 分类页 和 标签页 的入口。但是仅仅只有入口没有内容！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  # about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  # schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

添加页面

添加分类页面。执行下面命令将会生成 source/categories/index.md

1
hexo new page categories

categories/index.md 的内容如下，还需做些必要修改：添加 type: "categories"

1
2
3
4
5
---
title: categories
date: 2023-02-14 16:56:26
type: "categories"
---

标签页的添加与以上大部分相似！需要注意的是：

  • 标签页创建：hexo new page tags；
  • 标签页属性修改：type: "tags"

使用分类

在 source/_posts/ 目录的文章中的yml配置，添加 categories 属性。如下面例子。

文章添加标签后，再编译就会生成对应的标签文件！

1
2
3
4
5
6
7
8
9
---
title: 面试题62. 圆圈中最后剩下的数字
date: 2020-04-17 02:13:49
categories: 
- 算法题
tags:
- LCOF
description: ' '
---

编译

编译后继承生成分类、标签目录，见下：

1
2
3
4
5
6
categories
├── hexo
|  └── index.html
├── index.html
└── 算法题
   └── index.html

预览图片

打开 fancybox 开关

1
2
# NexT _config.yml
fancybox: true

加载资源

方式1：CDN

打开 NexT 配置文件FancyBox资源配置的注释即可！

1
2
3
4
5
# NexT _config.yml
# FancyBox
# jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
# fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
# fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css

方式2：下载 fancybox 插件资源

将 fancybox 包下载到 cd next/source/lib，并将资源解压（假如需要）后命名为 fancybox 即可！

fancybox包：https://github.com/theme-next/theme-next-fancybox3

评论插件(gittalk)

仓库：https://github.com/gitalk/gitalk

NexT已经内置，只需要修改NexT配置文件！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Gitalk
# For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk
gitalk:
  enable: true
  github_id:  # GitHub repo owner
  repo:  # Repository name to store issues
  client_id:  # GitHub Application Client ID
  client_secret:  # GitHub Application Client Secret
  admin_user:  # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: false # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language: zh-CN

上面配置 client_id 和 client_secret 需要在github注册 OAuth App:

https://github.com/settings/applications/new

1
2
3
4
Application name： # 应用名称，随意填写即可
Homepage URL： # 你的网站地址，如https://yourname.github.io
Application description # 描述，随意填写即可
Authorization callback URL：# 你的网站地址，如https://yourname.github.io

参考

参考