DmxZ
hexo-theme-blank 文档-进阶设置
置顶
2020.05.19
2022.02.13
hexo blank
2.2k 字 10 分钟

目录

  1. 1. 导航栏菜单
  2. 2. 首页 Title 或者 Avatar
  3. 3. 座右铭&社交图标
  4. 4. 图片懒加载
  5. 5. 文章置顶
  6. 6. 文章的meta设置
  7. 7. 首页文章隐藏
  8. 8. 文章目录
  9. 9. 文章自动摘要
  10. 10. 评论系统
  11. 11. 全局字体设置
  12. 12. 百度&谷歌分析
  13. 13. 百度自动推送
  14. 14. fancybox
  15. 15. 代码高亮
    1. 15.1. 如果你的blank主题版本在 V1.85前，则代码高亮方法如下
    2. 15.2. highlight 用法
    3. 15.3. 如果你的blank主题版本在 V1.85后，则代码高亮方法如下
  16. 16. MathJax支持
  17. 17. mermaid流程图
    1. 17.1. 使用方法
  18. 18. 预加载
  19. 19. 侧边栏全局音乐播放器

hexo-theme-blank 文档二 ，这篇文章，介绍 blank 主题的其他个性化设置

导航栏菜单

1
2
3
4
5
6
7
8
9
10
11
12
# 顶部菜单  
# 如果不需要显示某项,可以用'#'注释掉
menu:
  search: /search/ || fas fa-search-plus || rgb(3 169 244)
  home: / || fab fa-fort-awesome || rgb(255 107 107)
  archive: /archives/ || fas fa-archive || rgb(10 189 227)
  tag: /tags/ || fas fa-hashtag || rgb(254 202 87)
  categories: /categories || far fa-folder-open || rgb(29 209 161)
  about: /about/ || fab fa-grav || rgb(154 106 247)
  guestbook: /guestbook/ || fab fa-telegram || hsl(205deg 100% 50%)
  friends: /link/ || fab fa-weixin || hsl(152deg 73% 45%)
  说说: /shuoshuo/ || fas fa-coffee ||#31c7c1

从最后一栏可以看出，可以自定义图标的颜色了
颜色支持 rgb hsl # 三种格式
可以根据你想要的颜色修改即可

首页 Title 或者 Avatar

打开主题设置

1
2
3
4
# 首页显示Avatar或者Title
logo:
  method: 1
  avatar:
  1. 如果 method: 1 ，则显示 hexo 根目录 _config.yml 的 title: xxx
  2. 如果 method: 2，则显示头像Avatar，把图片链接填入 avatar: 后面
  • 标题（Title）模式

  • 头像（Avatar）模式

座右铭&社交图标

1
2
3
4
5
6
7
8
9
10
11
subtitle_social: 
  method: 3
  subtitle:
    motto: Do what you love,love what you do.
    font-size: 1.25em
    font-color: "#84ccc9"

  social:
    Github:
      icon: iconfont icon-GitHub
      url: https://github.com/a2396837
  1. 如果 method: 1 只显示 subtitle
  2. 如果 method: 2 同时显示 subtitle和social
  3. 如果 method: 3 只显示 social
  • subtitle部分，可以在 motto 改成你喜欢的文字，还可以修改字体大小，字体颜色
fontawesome 写法为： 显示图标名字-图标-链接

举个例子，我要显示我的Github和邮箱

1
2
3
4
5
6
7
social:
  Github:
    icon: fab fa-github
    url: https://github.com/a2396837
  Email:
    icon: fa fa-envelope
    url: mailto:894049579@qq.com
  • （缺点）fontawesome 的图片都是单色的，所以更建议使用 iconfont 的图标

图片懒加载

打开主题设置（默认打开）

1
2
3
4
5
# Lazyload (图片懒加载)
lazyload:
  enable: true
  image: /img/loading.gif
  script: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js

文章置顶

  • 卸载默认排序插件
1
npm uninstall hexo-generator-index --save
  • 安装插件 hexo-generator-index-pin-top 或者 hexo-generator-indexed（推荐）

安装： hexo-generator-index-pin-top

1
npm install hexo-generator-index-pin-top --save

安装：hexo-generator-indexed （推荐）

1
npm install hexo-generator-indexed
  • 如果你使用 hexo-generator-index-pin-top ，在需要置顶的文章的Front-matter中加上top即可：
1
2
3
4
5
title: 
tags:
top: true   +加上这个
date: 2020-04-28 12:01:56
categories:
  • 如果你使用 hexo-generator-indexed ，在需要置顶的文章的Front-matter中加上sticky即可：
1
2
3
4
5
title: 
tags:
sticky: 1   支持多文章置顶，数字越大，置顶的优先级越大
date: 2020-04-28 12:01:56
categories:

文章的meta设置


1
2
3
4
5
6
7
8
9
10
11
12
# 文章的相关信息
post_meta:
  page:
    date: true                    # 主页是否显示日期
    categories: true             # 主页是否显示分类
    wordcount: true             # 主页是否显示字数统计
    min2read: true             # 主页是否显示阅读时长
  post:
    date: true                # 文章页是否显示日期
    categories: true         # 文章页是否显示字分类
    wordcount: true         # 文章页是否显示字数统计
    min2read: true         # 文章页是否显示阅读时长

首页文章隐藏

  • 首页文章隐藏功能，需要 hexo-generator-indexed 插件
1
npm install hexo-generator-indexed
  • 在文章的 Front-matter 中增加一个 hide 参数用来隐藏。
1
2
3
4
---
title: example
hide: true
---

文章目录

主题自带了一个很简单的目录
可以在

1
2
3
# 文章目录
toc:
  enable: true

把它关掉，或者在文章 Front-matter 把它关掉

1
2
3
4
5
6
7
---
title: Hello World
comments: false
date: 2019-8-25 15:23:36
abbrlink: 16107
toc: false   +加上这个
---

文章自动摘要

打开主题设置

1
2
3
4
# 文章自动摘要
auto_excerpt:
  enable: true
  length: 350

文章默认显示全文，如果只想显示摘要，可以使用以下方法只显示摘要

  1. (推荐）使用 <!--more--> 标记精确截取文章部分作为摘要。

  2. 在文章 Front-matter 写 description

  3. 在文章 Front-matter 写 auto_excerpt: true 即可显示 length: 350 个字的摘要

评论系统

目前-截至时间2021/1/5

增加了Waline评论系统

所以支持的评论是:

  • Valine
  • Waline

用法: 打开主题设置.yml

1
2
3
使用valine
valine:
  enable: true

或者

1
2
3
使用Waline
waline:
  enable: true
评论系统只能用一个，当你把其中一个enable: true，其他评论系统enable: false 必须关掉

全局字体设置

如果你想要谷歌字体替换默认的全局字体，可以在配置文件中添加

1
2
3
fonts:
  font_link:
  font-family:

例如，之前我觉得这个主题配上思源宋体很好看，所以我设置成这样

1
2
3
fonts:
  font_link: https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap
  font-family: Noto Serif SC, serif, sans-serif

虽然谷歌字体服务器已经在中国，但是路线不同，难免解析到美国，日本的服务器，网站速度难免会拖慢，所以更建议用默认字体。

百度&谷歌分析

在 _config.yml ，添加获取的代码即可

1
2
3
4
#谷歌分析
google_analytics: xxxxxx
#百度分析
baidu_analytics: xxxxxx

百度自动推送

在 config.yml ,开启即可

1
2
3
#百度自动推送
baidu_push:
  enable: true

如果您觉得SEO还不够，您可以安装 sitemap 插件

  • 执行以下代码
1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
  • 在博客目录的 config.yml 最下面新增
1
2
3
4
5
# 自动生成sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

fancybox

主题 _config.yml 处开启

1
2
3
# fancybox
fancybox:
  enable: true

代码高亮

v1.85之前

如果你的blank主题版本在 V1.85前，则代码高亮方法如下

hexo-theme-blank,支持所有 highlightjs 的主题样式
由于 hexo 内置的 highlight 代码行号有些问题，所以我另外引进的代码行号，必须在hexo根目录的 _config.yml 进行关闭：

  • 打开hexo根目录的 _config.yml ，找到 highlight 部分，改成下面：
1
2
3
4
5
6
7
highlight:
  enable: true
  line_number: false
  auto_detect: true
  tab_replace: ''
  wrap: false
  hljs: true
  • 寻找你喜欢的代码高亮

https://highlightjs.org/

  • 找到对应的 css 的CDN

https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.3/build/styles/

  • 复制粘贴到主题目录下的 _config.yml 相应位置

highlight 用法

  • 如果你只想高亮 短代码，类似这样

你可以用 

1
2
``短代码``

  • 如果你想要高亮 长代码

把2个点改成3个就行

v1.85之后

如果你的blank主题版本在 V1.85后，则代码高亮方法如下

新版本，把highlightjs的 js和 highlightjs-line-numbers （行号）的 js 给去掉了，使用 hexo 内置的highlight的js

用法：

  • 进入根目录下的 _config.yml ，把 hljs: false 
1
2
3
4
5
6
7
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace: ''
  wrap: true
  hljs: false  把这个给关了

  • 进入highlightjs官网https://highlightjs.org/ ，挑选你喜欢的样式

  • 主题自带了 highlightjs 的94种样式，所以你只需要修改这个位置的的名称

可以从图片看出，现在的样式是 atom-one-light ，你也可以换成别的样式，比如 vs,github,tomorrow……

  • 当把 - /css/partial/highlight/atom-one-light.css # highlight代码高亮样式 删掉后，没有代码高亮，如图

MathJax支持

Supported by LuminousXLB

在主题目录下的_config.yml，把 MathJax 打开即可

1
2
3
4
#MathJax
mathjax:
  enable: true
  script: https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js

mermaid流程图

1
2
3
4
5
# mermaid
mermaid:
  enable: true
  theme: default   #可选 default/forest/dark/neutral
  script: https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js

使用 mermaid 标籤可以绘製 Flowchart（流程图）、Sequence diagram（时序图 ）、Class Diagram（类别图）、State Diagram（状态图）、Gantt（甘特图）和 Pie Chart（圆形图），具体可以查看 mermaid 文档

使用方法

1
2
3
{% mermaid %}
内容
{% endmermaid %}
  • 例如：
1
2
3
4
5
6
7
8
{% mermaid %}
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
{% endmermaid %}

预加载

可根据需求打开或者关闭

1
2
3
4
5
# https://instant.page/
# prefetch (预加载)
instantpage:
  enable: true
  script: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js

侧边栏全局音乐播放器

  • 在主题配置文件打开（默认关闭）
1
2
audio:
  enable: false  (false 改 true)
  • 在source\_data目录下创建audio.yml
  • 在 这个网站找到你喜欢的音乐的链接,图片,其他信息
  • 按这个格式写入audio.yml
1
2
3
4
- title: '歌名'
  artist: '歌手'
  mp3: '歌的链接'
  cover: '歌曲图片'
  • 示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
- title: 'Old Chinese song'
  artist: 'Kitti Kuremanee'
  mp3: 'https://music.163.com/song/media/outer/url?id=1625433.mp3'
  cover: 'https://p3.music.126.net/UWSKMO96-nqAn-l1BGX9SQ==/893902953435039.jpg'

- title: '所念皆星河'
  artist: 'CMJ'
  mp3: 'https://music.163.com/song/media/outer/url?id=1384026889.mp3'
  cover: 'https://p4.music.126.net/M34HFzLO2xhDLuX_zEALKA==/109951164291347934.jpg'

- title: '圆'
  artist: 'AGA'
  mp3: 'https://music.163.com/song/media/outer/url?id=406475388.mp3'
  cover: 'https://p2.music.126.net/UIE3T_txKzd6e8PORxmpCQ==/109951163412959613.jpg'

- title: '高山低谷'
  artist: '林奕匡'
  mp3: 'https://music.163.com/song/media/outer/url?id=28457932.mp3'
  cover: 'https://p1.music.126.net/-Ghh732Mw5P7SroEr954qA==/6011030069358994.jpg'

- title: '高山低谷'
  artist: '林奕匡'
  mp3: 'https://music.163.com/song/media/outer/url?id=36569474.mp3'
  cover: 'https://p1.music.126.net/-Ghh732Mw5P7SroEr954qA==/6011030069358994.jpg'

- title: '一双手'
  artist: '林奕匡'
  mp3: 'https://music.163.com/song/media/outer/url?id=28457932.mp3'
  cover: 'https://p1.music.126.net/npCOwk1Gcc6N8UwxctfXSA==/18345351509637971.jpg'

- title: '云烟成雨'
  artist: '房东的猫'
  mp3: 'https://music.163.com/song/media/outer/url?id=513360721.mp3'
  cover: 'https://p1.music.126.net/DSTg1dR7yKsyGq4IK3NL8A==/109951163046050093.jpg'
作者: DmxZ
链接: https://dmx.pub/posts/73f92298.html
声明: 本博客所有文章除特别声明外，均采用许可协议 CC-BY-NC-4.0 转载请注明出处！
hexo theme blank
hexo-theme-blank 文档-标签插件
hexo-theme-blank 文档-主题安装
© 2020 DmxZ
Powered by hexo | Theme is blank
萌ICP备 20206688号