一年前对主题的基本配置

页面对比

一年前对主题的配置做了一些基本改动，页面大概是这个样子

首页图

image-20250323032910730

首页

image-20250323033155977

默认样式

但是按照之前的教程刚刚搭建完，主题是这个样子的

image-20250323021445066

当时做的那些配置基本上都忘的差不多了，现在来对照配置文件，看看每个改动都有什么效果，一步一步复原吧。

逐项改动

个人信息
1
2
3
4
5
6
7
8
9
# Site
title: MT
subtitle: '生活明朗，万物可爱'  
description: '一个还在测试的博客'
keywords: 测试关键字
author: MT
language: zh-CN
timezone: ''
email: xxxxxxxx@qq.com

分析：title 、subtitle影响有页面标题。

image-20250323031620109

以及个人卡片的一个地方。

image-20250323035931284

keywords、email会创建一些meta标签：

1
<meta name="keywords" content="测试关键字">

用来提升网站搜索引擎优化（SEO）,但现在好像没啥用了。

author影响页面底部作者

image-20250323032058115

菜单相关
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
menu:
  文章:
    隧道: /archives/ || anzhiyu-icon-box-archive
    分类: /categories/ || anzhiyu-icon-shapes
    标签: /tags/ || anzhiyu-icon-tags

  友链:
    友人帐: /link/ || anzhiyu-icon-link
    朋友圈: /fcircle/ || anzhiyu-icon-artstation
    留言板: /comments/ || anzhiyu-icon-envelope

  我的:
    音乐馆: /music/ || anzhiyu-icon-music
    追番页: /bangumis/ || anzhiyu-icon-bilibili
    相册集: /album/ || anzhiyu-icon-images
    小空调: /air-conditioner/ || anzhiyu-icon-fan

  关于:
    关于本人: /about/ || anzhiyu-icon-paper-plane
    闲言碎语: /essay/ || anzhiyu-icon-lightbulb
    随便逛逛: javascript:toRandomPost() || anzhiyu-icon-shoe-prints1

原项目是全部注释的，取消注释开启，并且每个菜单会有子菜单

image-20250323032320471

导航相关
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# nav相关配置
nav:
  enable: true
  travelling: true
  clock: true
  menu:
    - title: 网页
      item:
        - name: 博客
          link: https://blog.anheyu.com/
          icon: /img/favicon.ico
    - title: 项目
      item:
        - name: 安知鱼图床
          link: https://image.anheyu.com/
          icon: https://image.anheyu.com/favicon.ico

分析：enable开启nav导航功能，好像也只有下面几个功能。

travelling随机前往一个项目网站，具体项目网站怎么配置暂时没去看。

image-20250323034632643

clock是什么呢

menu顶部导航栏左边的子菜单。

image-20250323034747225

社交图标设置
1
2
3
4
5
6
# social settings (社交图标设置)
# formal:
#   name: link || icon
social:
  Github: https://github.com/anzhiyu-c || anzhiyu-icon-github
  BiliBili: https://space.bilibili.com/372204786 || anzhiyu-icon-bilibili

这个位置的图标及其链接

image-20250323040029674

作者卡片 状态
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 作者卡片 状态
author_status:
  enable: false
  # 可以是任何图片，建议放表情包或者emoji图片，效果都很好，[表情包速查](https://emotion.xiaokang.me/)
  statusImg: "https://bu.dusays.com/2023/08/24/64e6ce9c507bb.png"
  skills:
    - 🤖️ 数码科技爱好者
    - 🔍 分享与热心帮助
    - 🏠 智能家居小能手
    - 🔨 设计开发一条龙
    - 🤝 专修交互与设计
    - 🏃 脚踏实地行动派
    - 🧱 团队小组发动机
    - 💢 壮汉人狠话不多

这个位置上面的一行字，通过鼠标点击切换

image-20250323035256437

本地搜索
1
2
3
4
5
6
# Local search
local_search:
  enable: true
  preload: true
  CDN:

本地文章搜索功能，需要先安装

1
npm install hexo-generator-search --save

导航栏顶部有搜索功能

image-20250323040510064

首页头图设置
1
2
# The banner image of home page
index_img: "background: url(https://mttypora.oss-cn-beijing.aliyuncs.com/云的彼方2.jpg) top / cover no-repeat" # "background: url() top / cover no-repeat"

效果就是文章开头展示的首页图，挺好看的

文章封面的设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
cover:
  # display the cover or not (是否显示文章封面)
  index_enable: true
  aside_enable: true
  archives_enable: true
  # the position of cover in home page (封面显示的位置)
  # left/right/both
  position: left
  # When cover is not set, the default cover is displayed (当没有设置cover时，默认的封面显示)
  default_cover:
    - https://mttypora.oss-cn-beijing.aliyuncs.com/6315e146a8bbd.webp
    - https://mttypora.oss-cn-beijing.aliyuncs.com/343dc6b2e52ff09ff4a245bb90e48d24a16d850b.jpg@1256w_910h_!web-article-pic.webp
    - https://mttypora.oss-cn-beijing.aliyuncs.com/微信图片_20240429200457.jpg
    - https://img02.anheyu.com/adminuploads/1/2022/09/05/6315e13381c0e.webp!page_thumbnail
    # - /img/default_cover.jpg

懒得给文章添加封面时，可以设置默认的一些封面图，保存这个设置前已经存在的文章是不会有默认封面的。但更新文章会重新随机封面。

image-20250323041929106

字数统计
1
2
3
4
5
6
7
# wordcount (字数统计)
# see https://blog.anheyu.com/posts/c27d.html#字数统计
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

需要提前安装

1
npm install hexo-wordcount --save

文章阅读页面新增字数统计，效果如下

image-20250323041845961

这里有个文章版权设置，可以设置地点，decode作用暂时未知

1
2
3
4
5
post_copyright:
  enable: true
  decode: true
  author_href:
  location: 深圳
页脚配置

页面底部的展示配置，能打开的功能我基本都开的，就不展示代码了

image-20250323043013178

作者卡片
1
2
3
card_author:
    enable: true
    description: <div style="line-height:1.38;margin:0.6rem 0;text-align:justify;color:rgba(255, 255, 255, 0.8);">这有关于<b style="color:#fff">产品、设计、开发</b>相关的问题和看法，还有<b style="color:#fff">文章翻译</b>和<b style="color:#fff">分享</b>。</div><div style="line-height:1.38;margin:0.6rem 0;text-align:justify;color:rgba(255, 255, 255, 0.8);">相信你可以在这里找到对你有用的<b style="color:#fff">知识</b>和<b style="color:#fff">教程</b>。</div> # 默认为站点描述

鼠标放上去大概是这个样子。

image-20250323043203236

访问量配置
1
2
3
4
5
6
7
8
9
10
# busuanzi count for PV / UV in site
# 访问人数
busuanzi:
  site_uv: true
  site_pv: true
  page_pv: true

runtimeshow:
  enable: true
  publish_date: 4/1/2021 00:00:00

网站的访问统计（应该是bug了），建站天数

image-20250323043510400

右键菜单
1
2
3
# 右键菜单
rightClickMenu:
  enable: true

这个样子

image-20250323044251726

首页随便逛逛
1
2
3
4
5
# 首页随便逛逛people模式 而非技能点模式，关闭后为技能点模式需要配置creativity.yml
peoplecanvas:
  enable: false
  img: https://upload-bbs.miyoushe.com/upload/2023/09/03/125766904/ee23df8517f3c3e3efc4145658269c06_5714860933110284659.png

听起来不知道是干什么的，来对比下效果

这是enable: true

image-20250323044530933

这是enable: false

image-20250323045255611

这些具体的图标是需要进行配置的，不然是一片空白。文字部分在主题配置文件中home_top配置项修改。

创建[blog]/source/_data/creativity.yml，输入以下内容

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
- class_name: 开启创造力
  creativity_list:
    - name: Java
      color: "#fff"
      icon: https://bu.dusays.com/2023/04/09/643293b1184e9.jpg
    - name: Docker
      color: "#57b6e6"
      icon: https://bu.dusays.com/2023/04/09/643293b0f0abe.png
    - name: Photoshop
      color: "#4082c3"
      icon: https://bu.dusays.com/2022/12/15/639aa3a5c240e.png
    - name: Node
      color: "#333"
      icon: https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg
    - name: Webpack
      color: "#2e3a41"
      icon: https://bu.dusays.com/2023/04/09/643293b68026c.png
    - name: Pinia
      color: "#fff"
      icon: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/pinia-logo.svg
    - name: Python
      color: "#fff"
      icon: https://bu.dusays.com/2023/04/09/643293b1230f7.png
    - name: Vite
      color: "#937df7"
      icon: https://npm.elemecdn.com/anzhiyu-blog@2.0.8/img/svg/vite-logo.svg
    - name: Flutter
      color: "#4499e4"
      icon: https://bu.dusays.com/2023/04/09/643293b1055c2.png
    - name: Vue
      color: "#b8f0ae"
      icon: https://bu.dusays.com/2023/04/09/643293b6788bd.png
    - name: React
      color: "#222"
      icon: data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K
    - 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
    - name: Git
      color: "#df5b40"
      icon: https://bu.dusays.com/2023/04/09/643293b10ccdd.webp
    - name: Apifox
      color: "#e65164"
      icon: https://bu.dusays.com/2022/11/19/6378d6458c6b6.png