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

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

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

站内相关教程索引

应该用得到,放在这里( •̀ ω •́ )✧

常见问题及美化

多层级分类跳转问题

多层级分类跳转问题

如果你的网站搭建在 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样式。
为了方便,这里你可以整个复制替换

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

添加网站背景图

本站背景图

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

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

1
2
3
4
5
6
7
8
9
10
11
12
/* 白天网站背景 */
#web_bg {
background-size: 20rem;
background-image: url(/img/bg.svg) !important;
background-repeat: initial
}

/* 夜间网站背景 */
[data-theme=dark] #web_bg {
background-size: 100rem;
background-image: url(/img/bg-dark.jpg) !important;
}

css 可自行按需修改

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

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

里面图片地址自行替换,前加我博客域名就是我的背景,你可以下载下来,然后同上 source 目录下再创建个 img 文件夹放进去,也可以放你图床引用

待更新。。。

主题修改及美化

添加一个统计页面

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

主题自定义博客字体

留言板页添加全屏弹幕

注意:此教程中主题配置文件中 NaoKuo 的 easy_Danmaku_js 地址失效,需替换

修改首页加载动画

给主题侧边栏添加倒计时

为博客添加游戏收藏页

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

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

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

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

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

本地搜索增加预览图

好看的昼夜切换按扭

主题功能修改

待更新。。。

插件相关

待更新。。。