Hexo-主题配置

SUZO2024-01-312024-06-06

前言

主题：AnZhiYu
简介：安知鱼主题是基于 Hexo 的一款简单、美丽的主题，由安知鱼负责开发与维护。
主题 GitHub: https://github.com/anzhiyu-c/hexo-theme-anzhiyu
预览: 👍 AnZhiYu || 🤞 AnZhiYu
文档: 📖 anzhiyu Docs

一款基于hexo-theme-butterfly修改的主題

安装后界面
Pasted image 20240131181525

右上角
Pasted image 20240131181920

主页左上角

修改前
Pasted image 20240131204717

修改后

步骤

关闭随便逛逛模式

关闭peoplecanvas.enable

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

创建creativity.yml

创建[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

控制台信息

修改控制台输出日志console.log
路径themes/anzhiyu/layout/includes/anzhiyu/log-js.pug

修改内容

    const ascll = [

      `  

         █████╗ ███╗   ██╗███████╗██╗  ██╗██╗██╗   ██╗██╗   ██╗
        ██╔══██╗████╗  ██║╚══███╔╝██║  ██║██║╚██╗ ██╔╝██║   ██║
        ███████║██╔██╗ ██║  ███╔╝ ███████║██║ ╚████╔╝ ██║   ██║
        ██╔══██║██║╚██╗██║ ███╔╝  ██╔══██║██║  ╚██╔╝  ██║   ██║
        ██║  ██║██║ ╚████║███████╗██║  ██║██║   ██║   ╚██████╔╝
        ╚═╝  ╚═╝╚═╝  ╚═══╝╚══════╝╚═╝  ╚═╝╚═╝   ╚═╝    ╚═════╝
      `,
      "已上线",
      dnum,
      "天"
    ];
  
    setTimeout(
      Log.bind(
        console,
        `\n%c${ascll[0]} %c ${ascll[1]} %c ${ascll[2]} %c${ascll[3]}W\n`,
        "color:#425AEF",
        "",
        "color:#425AEF",
        "",
      )
    );

    setTimeout(Log.bind(console, "%c ⚡ Powered by 安知鱼 %c ©#{since}", "color:white; background-color:#f0ad4e", "color:white; background-color:#4f90d9"));
    setTimeout(Log.bind(console, "%c ⚡ Powered by 安知鱼 %c 版本：V#{version}", "color:white; background-color:#f0ad4e", "color:white; background-color:#4f90d9"));
    setTimeout(Log.bind(console, "%c WELCOME %c 你好. 你正在访问 #{author} 的博客", "color:white; background-color:#4f90d9", ""));
    setTimeout(Log.bind(console, "%c W23-12 %c 你已打开控制台.", "color:white; background-color:#4f90d9", ""));
    );
  });

标签页配置

前往你的 Hexo 博客的根目录
在 Hexo 博客根目录 [blog]下打开终端，输入

1	hexo new page tags

你会找到 source/tags/index.md 这个文件
修改这个文件：记得添加 type: "tags"

---
title: 标签
date: 2021-04-06 12:01:51
type: "tags"
comments: false
top_img: false
---

参数	解释
type	【必须】页面类型，必须为 tags
comments	【可选】是否显示评论
top_img	【可选】是否显示顶部图
orderby	【可选】排序方式：random/name/length
order	【可选】排序次序： 1, asc for ascending; -1, desc for descending

分类页配置

前往你的 Hexo 博客的根目录
在 Hexo 博客根目录 [blog]下打开终端，输入

1	hexo new page categories

你会找到 source/categories/index.md 这个文件

修改这个文件：记得添加 type: "categories"

---
title: 分类
date: 2022-02-23 17:56:00
aside: false
top_img: false
type: "categories"
---

关于页面配置

前往你的 Hexo 博客的根目录
在 Hexo 博客根目录 [blog]下打开终端，输入
1
hexo new page about
你会找到 source/about/index.md 这个文件

修改这个文件：记得添加 type: "about"

---
title: 关于
date: 2021-03-30 15:57:51
aside: false
top_img: false
background: "#f8f9fe"
comments: false
type: "about"
---

相册页面配置

前往你的 Hexo 博客的根目录
在 Hexo 博客根目录 [blog]下打开终端，输入
1
hexo new page album
你会找到 source/album/index.md 这个文件

修改这个文件：记得添加 type: "album"

---
title: 相册集
date: 2022-10-23 15:57:51
aside: false
top_img: false
type: "album"
---

修改字体

步骤

创建一个 css 文件

以得意黑字体 SmileySans-Oblique.tff 为例，创建文件名为 font.css，内容如下:

@font-face {
	font-family: 'YunFont';
	font-display: swap;
	src: url('/fonts/SmileySans-Oblique.ttf')format("truetype");

/fonts/SmileySans-Oblique.ttf 为字体路径，后面的 format 是必须字段，转换字体格式，font-display: swap; 可以保证我们的字体文件在没有加载完成之前文字使用默认字体。

这里存放的本地路径为 : [blog]/source/fonts/font.css

其他格式字体的常见示例：

@font-face {
	font-family: 'webfont';
	font-display: swap;
	src: url('.eot') format('embedded-opentype'),  /* IE6-IE8 */
		 url('.woff2') format('woff2'),
		 url('.woff') format('woff'),  /*chrome、firefox */  
		 url('.ttf') format('truetype'),  /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
		 url('.svg') format('svg');

注意，font-family 字段是可以自己定义的哦

引入css文件

在 _config.[theme].yml 里修改 inject ，将刚才创建的 css 文件引入：

1	<link rel="stylesheet" href="/fonts/font.css">

然后修改 butterfly.yml 中的 font-family ：

第一个就是全局字体，第二个是代码块的字体，你可以同时在刚才的那个 css 文件里引入两个字体文件哦，然后吧 font-family 的值写在这里就好了呀。