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

一、安装主题anzhiyu

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

# 安装主题
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. 生成分类页

   ---
   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. 生成标签页

   ---
   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文件中修改

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配置项修改

   - 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

# 首页顶部相关配置
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. 安装插件：在博客根目录下执行下列命令

   npm install hexo-generator-search --save

2. 修改_config.anzhiyu.yml配置文件：修改local_search的enable为true

   # 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. 修改 主题配置文件。（文章页标题下方和首页底部右侧都有字数统计）
   

   wordcount:
     enable: true
     post_wordcount: true
     min2read: true
     total_wordcount: true

3.2 访问人数

修改_config.anzhiyu.yml文件

# 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

   ---
   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 为切换歌单按钮的歌单数据（自定义歌单）

   [
     {
       "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中添加以下配置，注意不是主题配置文件

   # APlayer
   # https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
   aplayer:
     meting: true
     asset_inject: false

4. 主题配置文件中开启menu中我的和音乐馆的注释，注意缩进！！！

   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

参考资料

• 安装主题 | 安知鱼主题
• 标签页配置 | 安知鱼主题
• 分类页配置 | 安知鱼主题
• 音乐馆页配置 | 安知鱼主题
• 首页技能点 | 全局配置
• 字数统计 | 全局配置
• 【Hexo博客系列】No.2 美化Hexo博客，教你如何安装和美化Hexo博客 - 使用安知鱼主题进行个性化配置，涵盖安装、设置、标签页生成及本地搜索
• 【Hexo博客系列】No.2 美化Hexo博客，详细教程，教你如何安装和美化Hexo博客 - 使用安知鱼主题进行个性化配置，涵盖安装、设置、标签页生成及本地搜索等内容