站点基础配置(三) | 安知鱼主题指南

警告

本教程更新于 2023 年 7 月 5 日，教程的内容针对最新的 anzhiyu 主题(如果你是旧版本，教程会有出入，请留意) 🐟 安知鱼已经更新到 1.4.0open in new window

ai 摘要

需主题版本大于 1.1.6 版本

修改主题配置文件，其中key和Referer 为 tianli gpt 的key和Referer，可在爱发电open in new window 购买 key，购买完成后请立即在前端面板open in new window绑定key，以防止被盗用。

适用于AnZhiYu主题项目的Key，前端管理面板 https://summary.tianli0.top/

每个key限制请求字数50000字，如果是已经请求过的内容不会再次消耗key

使用时需要绑定key。虚拟物品一经发出不支持退款。

关于续费：

续费和绑定流程相同，绑定成功后会自动充值到原有的key上，也就是说无需更改网页中的key参数，直接绑定即可。格式发送，返回的 token 即你的剩余字数

# 文章顶部ai摘要
post_head_ai_description:
  enable: true
  gptName: AnZhiYu
  mode: local # 默认模式 可选值: tianli/local
  switchBtn: false # 可以配置是否显示切换按钮 以切换tianli/local
  btnLink: https://afdian.net/item/886a79d4db6711eda42a52540025c377
  randomNum: 3 # 按钮最大的随机次数，也就是一篇文章最大随机出来几种
  basicWordCount: 1000 # 最低获取字符数, 最小1000, 最大1999
  key: xxxx
  Referer: https://xx.xx/

配置完成以后在文章的Front-matter配置ai: true, 使用 tianli gpt 需将 mode 改为tianli 然后在需要 ai 摘要的文章的Front-matter配置ai: true

如果使用local,需要按照以下方式配置

---
title: AnZhiYu主题快速开始
ai:
  - 本教程介绍了如何在博客中安装基于Hexo主题的安知鱼主题，并提供了安装、应用主题、修改配置文件、本地启动等详细步骤及技术支持方式。教程的内容针对最新的主题版本进行更新，如果你是旧版本教程会有出入。
  - 本文真不错
---

mode	对比
tianli	具有完备的训练后端功能，可优秀的完成文章的摘要
local	本地，需自行在文章顶部添加 ai 摘要，内容自行决定，书写较为麻烦。

控制台信息

关于控制台信息，主题不提供修改配置，但是可以在主题配置文件中进行关闭。

# 控制台打印信息
console:
  enable: true

控制台打印相关信息可以配置页脚内容来修改。

footer:
  owner:
    enable: true
    since: 2020
  custom_text:
  copyright: false # Copyright of theme and framework
  runtime:
    enable: true
    launch_time: 04/01/2021 00:00:00 # 网站上线时间
    work_img: https://npm.elemecdn.com/anzhiyu-blog@2.0.4/img/badge/安知鱼-上班摸鱼中.svg
    work_description: 距离月入25k也就还差一个大佬带我~
    offduty_img: https://npm.elemecdn.com/anzhiyu-blog@2.0.4/img/badge/安知鱼-下班啦.svg
    offduty_description: 下班了就该开开心心的玩耍，嘿嘿~

如果实在有强迫症也可以自行修改内容themes/anzhiyu/layout/includes/anzhiyu/log-js.pug。

如何配置首页顶部右侧不使用轮播图

将主题配置文件中home_top.swiper.enable 修改为 false 即可.

设置标签卖萌

主题配置文件中

# 标签卖萌
diytitle:
  enable: true
  leaveTitle: w(ﾟДﾟ)w 不要走！再看看嘛！
  backTitle: ♪(^∇^*)欢迎肥来！

如何配置页脚

在主题配置文件中footer配置，其中runtime可以配置网站运行时间，工作时间上午 9 点到下午 6 点到图片，描述，下班时间的图片，描述。

配置关于页与文章页底部打赏二维码

在主题配置文件中

# Sponsor/reward
reward:
  enable: true
  coinAudio: https://npm.elemecdn.com/akilar-candyassets@1.0.36/audio/aowu.m4a
  QR_code:
    - img: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/qrcode-weichat.png
      link:
      text: wechat
    - img: https://npm.elemecdn.com/anzhiyu-blog@1.1.6/img/post/common/qrcode-alipay.png
      link:
      text: alipay

主题如何获取文章主色调

两种方法，因为我觉得 js 获取到的图片主色调不准确且消耗资源，所以可以使用以下两种方式。

使用腾讯云的数据万象能力，前提是图片存储在腾讯云的 cos 上。
使用多吉云的云存储+免费 cdn，云存储必须是付费版本的，1000 张图片 1G 以内大概在 1 块钱 1 年。cdn 免费每月 20G

如果你的图片能够像

https://img02.anheyu.com/adminuploads/1/2023/02/16/63ee48ddd4d13.png!cover?imageAve在图片后面加上?imageAve即可获得RGB主色调，那就证明成功了，然后在文章中cover使用https://img02.anheyu.com/adminuploads/1/2023/02/16/63ee48ddd4d13.png!cover即可，不需要加上?imageAve因为主题会自行请求获取主色调来渲染。

配置文件中有两个字段控制主色调

参数	解释
theme_color.cover_change	用于控制整篇文章跟随主色调变化
post_meta.post.mainTone	控制文章顶部info跟随主色调变化

双栏

如果你需要像我一样首页双栏，修改主题配置文件_config.anzhiyu.yml（主题版本需要 1.1.1 以及以上）

# 双栏文章
article_double_row: true

首页顶部 3 大分类配置

首页技能点轮播下的分类，可通过配置主题配置文件home_top.category

home_top:
  enable: true # 开关
  timemode: date #date/updated
  title: 生活明朗
  subTitle: 万物可爱。
  siteText: ANHEYU.COM
  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

首先你需要有categories，需配置过分类页面，具体可参考分类页创建open in new window

hexo new page categories

当前分类下有文章，此处以前端开发分类为例子

---
title: Hello World
categories: 前端开发
---

当这个分类下存在文章了以后，这个分类就会产生对应的路径，比如此处产生的是https://你的域名/categories/前端开发/，所以配置中应该是/categories/前端开发/。

只需要在创建分类以后在对应的文章中添加上对应的分类，配置 path 即可，注意一定要对应。

参数	解释
name	用于显示的分类名称
path	跳转的路径
shadow	阴影的颜色
class	类名
icon	图标名，默认使用内置阿里图标参考: 图标配置open in new window

左下角歌单

歌单配置很简单，只需要修改主题配置文件中nav_music即可.

# 左下角音乐配置项
nav_music:
  enable: false
  id: 8152976493
  server: netease

首页技能点配置

[blog]代表你的博客根目录。示例数据中的图片链接为本人图床，请自行上传至您自己的图床，（不保证永久可用性）。

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

- 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

此时可以看到首页顶部已经有技能点的轮播了。

文字部分在主题配置文件中home_top配置项修改

配置 nav 顶栏左侧应用列表

# nav左侧菜单
nav:
  enable: true
  menu:
    - title: 网页
      item:
        - name: 个人主页
          link: https://index.anheyu.com/
          icon: https://index.anheyu.com/assets/home.svg
        - name: 博客
          link: https://blog.anheyu.com/
          icon: https://img02.anheyu.com/adminuploads/1/2022/09/05/6315ec9737ac4.png
        - name: 安知鱼图床
          link: https://image.anheyu.com/
          icon: https://image.anheyu.com/favicon.ico
    - title: 项目
      item:
        - name: 安知鱼图床
          link: https://image.anheyu.com/
          icon: https://image.anheyu.com/favicon.ico

字数统计

要为 AnZhiYu 配上字数统计特性, 你需要如下几个步骤:

打开 hexo 工作目录

npm install hexo-wordcount --save or yarn add hexo-wordcount

修改主题配置文件:

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

网站验证

如果需要搜索引擎收录网站，可能需要登录对应搜索引擎的管理平台进行提交。各自的验证码可从各自管理平台拿到

修改 主题配置文件

site_verification:
  # - name: google_site_verification
  #   content: xxxxxx
  # - name: baidu_site_verification
  #   content: xxxxxxx

# ai 摘要

# 控制台信息

# 如何配置首页顶部右侧不使用轮播图

# 设置 标签卖萌

# 如何配置页脚

# 配置关于页与文章页底部打赏二维码

# 主题如何获取文章主色调

# 双栏

# 首页顶部 3 大分类配置

# 左下角歌单

# 首页技能点配置

# 配置 nav 顶栏左侧应用列表

# 字数统计

# 网站验证