hexo-theme-blank 文档-进阶设置

目录

  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. fancybox
  14. 14. 代码高亮
    1. 14.1. 如果你的blank主题版本在 V1.85前,则代码高亮方法如下
    2. 14.2. highlight 用法
    3. 14.3. 如果你的blank主题版本在 V1.85后,则代码高亮方法如下
  15. 15. MathJax支持
  16. 16. mermaid流程图
    1. 16.1. 使用方法
  17. 17. 预加载
  18. 18. 侧边栏全局音乐播放器

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.ymltitle: 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 同时显示 subtitlesocial
  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-matterdescription

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

全局字体设置

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

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'
hexo theme blank
hexo-theme-blank 文档-标签插件
hexo-theme-blank 文档-主题安装
© 2020 DmxZ
Powered by hexo | Theme is blank