安知鱼主题美化及实用教程库

写这篇文章的目的只是为了便于新用户快速对主题自定义修改，如果你有教程或不想你的教程出现在这里可在评论区指出或提交

警告⚠：请先完成主题基础功能配置，以免你的修改改破坏原有功能

主题默认的相关配置 安知鱼主题文档 已经十分详尽，这里只是补充以及额外的修改

美化相关的看上面一部分常见问题及美化以及其他主题修改及美化部分
一些原有功能修改以及对功能修复的教程看主题功能修改及修复部分
额外的美化实用插件请看插件相关部分

站内相关教程索引

应该用得到，放在这里 (・̀ ω・́)✧

常见问题及美化

主题基本颜色自定义

主题颜色基本位于 你博客目录/themes/anzhiyu/source/css/_global/index.styl 这个 styl 文件内

css
1
2
# 第 73 行加载进度条渐变色值
--anzhiyu-logo-color: linear-gradient(215deg, #4584ff 0%, #cf0db9 100%);

关于页作者卡片颜色位于 你博客目录/themes/anzhiyu/source/css/_page/about.styl

css
1
2
# 第 120 行关于页作者卡片渐变色值
background: linear-gradient(120deg, #5b27ff 0, #00d4ff 100%);

多层级分类跳转问题

多层级分类跳转问题

如果你的网站搭建在 example.com/xxx/ 目录或 example.com/xxx/xxx/xxx/………. 下，那么你在使用主题会遇到首页分类条和分类页跳转问题，因为这些跳转默认只支持根目录下的跳转，也就是只会跳转到根目录，如果你的网站部署于多层级目录那么自然会 404

例如：example.com/xxx/ategories/xxx 会跳转到 xample.com/ategories/xx 下

你需要修改：

categoryGroup.pug (此处为首页分类条更多跳转地址)

categoryGroup.pug

catalog_list.js (此处为首页分类条 / 分类条项目跳转地址)

catalog_list.js

category.pug (此处为分类页分类条更多跳转地址)

category.pug

tags_page_list.js 这四项 (此处为分类页项目跳转)

tags_page_list.js

移除首页头图默认阴影

移除首页头图阴影

找到 博客目录/themes/anzhiyu/source/css/_extra/home_top/top_group_banner.css
大约在第 109 行 删除 box-shadow: 0 -109px 133px -9px #000000 inset; 或修改后面的 16 位色值大概和你图片相匹配即可
css位置

恢复首页文章卡片摘要信息

恢复原 butterfly 摘要信息

示例图

如果你想恢复原 butterfly 的首页文章卡片摘要，你可以进行以下修改

找到 博客目录/themes/anzhiyu/source/css/page/homepage.styl

大约在第 319 行 修改 #content-inner #recent-posts > .recent-post-item > .recent-post-info > .content 部分的 css 样式。

为了方便，这里你可以整个复制替换

styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#content-inner #recent-posts>.recent-post-item>.recent-post-info>.content {
    transition: all 0.3s ease 0s;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.4;
    color: var(--anzhiyu-secondtext);
    margin-top: 2px;
    font-size: 14px;
    opacity: 1;
    height: 40px;
    padding: 0px 32px;
}

你可以自行修改 css

添加网站背景图

添加背景图

在你的 博客目录/source/css/custom.css 中添加以下内容，source 里没有这个 css目录 和 css文件 就自己创建一下

名称随意，只要引入对应的 css 文件就行了，如果你原本有自定义 css 的话，找个合适的位置插入即可

css
1
2
3
4
5
6
7
/* 白天网站背景 */
#web_bg {
}

/* 夜间网站背景 */
[data-theme=dark] #web_bg {
}

自行添加 css 样式

然后在安知鱼主题配置文件，找到 inject 并引入 css

yml
1
2
3
4
inject: 
  head: 
    # 自定义 css 
    - <link rel="stylesheet" href="/css/custom.css">

待更新。。。

其他主题修改及美化

为你的博客安装上便携小空调

安知鱼主题首页动态壁纸

美化你的 RSS 订阅地址

anzhiyu 主题一图流

主题魔改 - 文章容器布局

添加一个统计页面

样式预览可见本站文章统计页

主题自定义博客字体

留言板页添加全屏弹幕

修改首页加载动画

给主题侧边栏添加倒计时

为博客添加游戏收藏页

为你的博客添加待办清单页

为主页文章卡片添加擦亮动画效果

给主题侧边栏添加来访者卡片

博客添加农历年份生肖标志

给你的博客添加一个宠物挂件

给博客添加定位个性欢迎 (腾讯地图版)

本地搜索增加预览图

好看的昼夜切换按扭

主题功能修改及修复

Twikoo 评论区 QQ 昵称获取临时修复

替换原友链朋友圈为轻量友链朋友圈

首页背景图渐进式加载，解决卡顿难题

anzhiyu 博客 cdn 修改

待更新。。。

插件相关

安全跳转页面・插件版

安知文章主色调 (插件)

待更新。。。