Hexo博客搭建02-AnZhiYu主题配置

一、安装主题anzhiyu

按下面步骤安装好后,执行hexo cl; hexo s命令,看到最后一行输出为 running at http://localhost:4000 即可在浏览器打开链接,效果如下:
anzhiyu主题首页效果

1
2
3
4
5
6
7
8
9
# 安装主题
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

# 安装 pug 和 stylus 渲染插件
npm install hexo-renderer-pug hexo-renderer-stylus --save

# 应用主题
cp ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml
# 在_config.yml文件里修改 "theme: anzhiyu"

二、首页配置

2.1 分类页/标签页/隧道页

  1. 修改_config.anzhiyu.yml配置文件:将 文章/隧道/分类/标签 取消注释。这会在网站上方生成文章导航按钮(但此时点进去找不到页面) 文章/隧道/分类/标签页
  2. 生成分类页
    1
    2
    3
    4
    5
    6
    7
    ---
    title: 标签
    date: 2024-08-05 20:31:05
    type: "tags"
    comments: false
    top_img: false
    ---
    1. 在 Hexo 博客根目录下打开终端,输入hexo new page tags
    2. 你会找到 source/tags/index.md 这个文件。修改这个文件: 记得添加 type: “tags”
    3. 访问链接 /tags即可查看
  3. 生成标签页
    1
    2
    3
    4
    5
    6
    7
    ---
    title: 分类
    date: 2024-08-05 20:33:42
    type: "categories"
    aside: false
    top_img: false
    ---
    1. 在 Hexo 博客根目录下打开终端,输入hexo new page categories
    2. 你会找到 source/categories/index.md 这个文件。修改这个文件: 记得添加 type: “categories”
    3. 访问链接 /categories即可查看

2.2 顶部左侧导航栏

_config.anzhiyu.yml文件中修改 顶部左侧导航栏效果图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
nav:
enable: true
travelling: false
clock: false
menu:
- title: 网页
item:
- name: 博客
link: https://blog.dreamyai.fun/
icon: /img/favicon.ico
- title: 项目
item:
- name: 临时图床
link: https://images.zzftt.cloudns.biz/
icon: https://images.zzftt.cloudns.biz/favicon.ico
- name: 临时互联
link: https://daili.zzftt.cloudns.biz/
icon: https://daili.zzftt.cloudns.biz/favicon.ico

2.3 点亮首页技能点

  1. 在文件中,关闭默认的peoplecanvas:peoplecanvas -> enable: false
  2. 创建source/_data/creativity.yml,输入以下内容
  3. 文字部分在主题配置文件中home_top配置项修改
    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
    - class_name: 开启创造力
    creativity_list:
    - name: Python
    color: "#fff"
    icon: https://bu.dusays.com/2023/04/09/643293b1230f7.png
    - name: Tensorflow
    color: "#fff"
    icon: https://ts2.cn.mm.bing.net/th?id=OSAAS.5626C07A9FB89E37617BD7C8C7363F07&w=256&h=256
    - name: PyTorch
    color: "#fff"
    icon: https://pytorch.org/assets/images/logo-dark.svg
    - name: Spark
    color: "#fff"
    icon: https://spark.apache.org/images/spark-logo.png
    - name: Docker
    color: "#57b6e6"
    icon: https://bu.dusays.com/2023/04/09/643293b0f0abe.png
    - name: Git
    color: "#df5b40"
    icon: https://bu.dusays.com/2023/04/09/643293b10ccdd.webp
    - name: CSS3
    color: "#2c51db"
    icon: https://bu.dusays.com/2022/12/15/639aa3a5c251e.png
    - name: JS
    color: "#f7cb4f"
    icon: https://bu.dusays.com/2023/04/09/643293b121f02.png
    - name: HTML
    color: "#e9572b"
    icon: https://bu.dusays.com/2022/12/15/639aa3a5c241c.png

2.4 自定义首页顶部category

首页顶部category效果图

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
# 首页顶部相关配置
home_top:
enable: true # 开关
timemode: date #date/updated
title: 生活明朗
subTitle: 万物可爱。
siteText: blog.dreamyai.fun
category:
- name: 技术
path: /categories/技术/
shadow: var(--anzhiyu-shadow-blue)
class: blue
icon: anzhiyu-icon-dove
- name: 投资
path: /categories/投资/
shadow: var(--anzhiyu-shadow-red)
class: red
icon: anzhiyu-icon-fire
- name: 生活
path: /categories/生活日常/
shadow: var(--anzhiyu-shadow-green)
class: green
icon: anzhiyu-icon-book
default_descr: 再怎么看我也不知道怎么描述它的啦!
swiper:
enable: false
swiper_css: https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.css #swiper css依赖
swiper_js: https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.js #swiper js依赖
banner:
tips: 新品主题
title: Theme-AnZhiYu
image: https://bu.dusays.com/2023/05/13/645fa3cf90d70.webp
link: https://docs.anheyu.com/

2.5 右侧栏作者卡片

  1. _config.anzhiyu.yml文件中,开启author_status -> enable: true
  2. 修改 author_status -> statusImg的表情成自定义喜欢的表情或图片
  3. author_status -> skills后面的注释全部开启
  4. 取消注释并自定义修改描述 card_author -> description

2.6 关闭公众号卡片

  1. _config.anzhiyu.yml文件中,关闭card_weixin -> enable: false

2.7 开启搜索功能

  1. 安装插件:在博客根目录下执行下列命令
    1
    npm install hexo-generator-search --save
  2. 修改_config.anzhiyu.yml配置文件:修改local_search的enable为true
    1
    2
    3
    4
    5
    # Local search
    local_search:
    enable: true
    preload: true
    CDN:

2.9 其他

  1. 点击烟火特效
    1. (主题配置文件)fireworks -> enable: true
  2. 修改文章链接,方便推广
    1. (全局配置文件)permalink: p/:alias/
    2. 所有文章都补上alias字段
  3. 修改文章地理位置
    1. (主题配置文件)post_copyright -> 广州

三、功能配置

3.1 字数统计

  1. 安装插件 npm install hexo-wordcount --save
  2. 修改 主题配置文件。(文章页标题下方和首页底部右侧都有字数统计)
    字数统计效果图
    1
    2
    3
    4
    5
    wordcount:
    enable: true
    post_wordcount: true
    min2read: true
    total_wordcount: true

3.2 访问人数

修改_config.anzhiyu.yml文件

1
2
3
4
5
6
# busuanzi count for PV / UV in site
# 访问人数
busuanzi:
site_uv: true
site_pv: true
page_pv: true

3.3 音乐馆

  1. 执行hexo new page music,生成并手动修改source/music/index.md
    1
    2
    3
    4
    5
    6
    7
    8
    9
    ---
    title: 音乐馆
    date: 2024-08-06 08:41:30
    type: music
    aplayer: true
    top_img: false
    comments: false
    aside: false
    ---
  2. 新建source/json/music.json,此 json 为切换歌单按钮的歌单数据(自定义歌单)
    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
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    [
    {
    "name": "青花瓷",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.4/青花瓷/青花瓷.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000002eFUFm2XYZ7z_2.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.4/青花瓷/青花瓷.lrc"
    },
    {
    "name": "稻香",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.1/周杰伦/稻香/稻香.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.1/周杰伦/稻香/稻香.lrc"
    },
    {
    "name": "晴天",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.2/晴天/晴天.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000000MkMni19ClKG_3.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.2/晴天/晴天.lrc"
    },
    {
    "name": "七里香",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.2/七里香/七里香.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000003DFRzD192KKD_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.2/七里香/七里香.lrc"
    },
    {
    "name": "花海",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/花海/花海.flac",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/花海/花海.lrc"
    },
    {
    "name": "反方向的钟",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/反方向的钟/反方向的钟.flac",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000000f01724fd7TH_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/反方向的钟/反方向的钟.lrc"
    },
    {
    "name": "兰亭序",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.1/周杰伦/兰亭序/兰亭序.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.1/周杰伦/兰亭序/兰亭序.lrc"
    },
    {
    "name": "说好的辛福呢",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.2/说好的辛福呢/说好的辛福呢.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.2/说好的辛福呢/说好的幸福呢.lrc"
    },
    {
    "name": "等你下课 (with 杨瑞代)",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.1/周杰伦/等你下课/等你下课.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000003bSL0v4bpKAx_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.1/周杰伦/等你下课/等你下课.lrc"
    },
    {
    "name": "我落泪情绪零碎",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.2/我落泪情绪零碎/我落泪情绪零碎.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000000bviBl4FjTpO_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.2/我落泪情绪零碎/我落泪情绪零碎.lrc"
    },
    {
    "name": "听妈妈的话",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.2/听妈妈的话/听妈妈的话.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000002jLGWe16Tf1H_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.2/听妈妈的话/听妈妈的话.lrc"
    },
    {
    "name": "明明就",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/明明就/明明就.flac",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000003Ow85E3pnoqi_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/明明就/明明就.lrc"
    },
    {
    "name": "我是如此相信",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/我是如此相信/我是如此相信.flac",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000001hGx1Z0so1YX_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music-jay@1.0.1/我是如此相信/我是如此相信.lrc"
    },
    {
    "name": "发如雪",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.3/发如雪/发如雪.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M0000024bjiL2aocxT_3.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.3/发如雪/发如雪.lrc"
    },
    {
    "name": "以父之名",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.3/以父之名/以父之名.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000000MkMni19ClKG_3.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.3/以父之名/以父之名.lrc"
    },
    {
    "name": "园游会",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.3/园游会/园游会.flac",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000003DFRzD192KKD_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.3/园游会/园游会.lrc"
    },
    {
    "name": "本草纲目",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.4/本草纲目/本草纲目.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000002jLGWe16Tf1H_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.4/本草纲目/本草纲目.lrc"
    },
    {
    "name": "龙卷风",
    "artist": "周杰伦",
    "url": "https://npm.elemecdn.com/anzhiyu-music@1.0.4/龙卷风/龙卷风.mp3",
    "cover": "https://y.qq.com/music/photo_new/T002R300x300M000000f01724fd7TH_1.jpg?max_age=2592000",
    "lrc": "https://npm.elemecdn.com/anzhiyu-music@1.0.4/龙卷风/龙卷风.lrc"
    }
    ]
  3. hexo 配置文件_config.yml中添加以下配置,注意不是主题配置文件
    1
    2
    3
    4
    5
    # APlayer
    # https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
    aplayer:
    meting: true
    asset_inject: false
  4. 主题配置文件中开启menu中我的和音乐馆的注释,注意缩进!!!
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    menu:
    文章:
    隧道: /archives/ || icon-box-archive
    分类: /categories/ || icon-shapes
    标签: /tags/ || icon-tags

    我的:
    音乐馆: /music/ || icon-music
    # 追番页: /bangumis/ || icon-bilibili1
    # 相册集: /album/ || icon-images
    # 小空调: /air-conditioner/ || icon-fan
  5. 修改默认歌单:将menu中音乐馆的路径修改为以下格式即可/music/?id=55519285&server=netease,支持id和server参数。id 与 server 的填写请参考 MetingJS

参考资料