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

安知鱼主题美化及使用教程库
MortalCat写这篇文章的目的只是为了便于新用户快速对主题自定义修改,如果你有教程或不想你的教程出现在这里可在评论区指出或提交
主题默认的相关配置 安知鱼主题文档 已经十分详尽,这里只是补充以及额外的修改
站内相关教程索引
应该用得到,放在这里( •̀ ω •́ )✧
常见问题及美化
多层级分类跳转问题
多层级分类跳转问题
如果你的网站搭建在 example.com/xxx/ 目录或 example.com/xxx/xxx/xxx/………. 下,那么你在使用主题会遇到首页分类条和分类页跳转问题,因为这些跳转默认只支持根目录下的跳转,也就是只会跳转到根目录,如果你的网站部署于多层级目录那么自然会 404
例如:example.com/xxx/ategories/xxx 会跳转到 xample.com/ategories/xx 下
解决方案
你需要修改:
categoryGroup.pug (此处为首页分类条更多跳转地址)
catalog_list.js (此处为首页分类条/分类条项目跳转地址)
category.pug (此处为分类页分类条更多跳转地址)
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 位色值大概和你图片相匹配即可
恢复首页文章卡片摘要信息
恢复原 butterfly 摘要信息
如果你想恢复原 butterfly 的首页文章卡片摘要,你可以进行以下修改
找到 博客目录/themes。anzhiyu\source\css\page\homepage.styl
大约在第 319 行 修改 #content-inner #recent-posts > .recent-post-item > .recent-post-info > .content
部分的css样式。
为了方便,这里你可以整个复制替换
1 | #content-inner #recent-posts > .recent-post-item > .recent-post-info > .content |
添加网站背景图
本站背景图
在你的 博客目录/source/css/custom.css
中添加以下内容,source
里没有这个 css目录
和 css文件
就自己创建一下
名称随意,只要引入对应的 css 文件就行了,如果你原本有自定义 css 的话,找个合适的位置插入即可
1 | /* 白天网站背景 */ |
css 可自行按需修改
然后在安知鱼主题配置文件,找到 inject 并引入 css
1 | inject: |
里面图片地址自行替换,前加我博客域名就是我的背景,你可以下载下来,然后同上 source
目录下再创建个 img
文件夹放进去,也可以放你图床引用
待更新。。。
主题修改及美化
添加一个统计页面
样式预览可见本站文章统计页
主题自定义博客字体
留言板页添加全屏弹幕
注意:此教程中主题配置文件中 NaoKuo 的
easy_Danmaku_js
地址失效,需替换
修改首页加载动画
给主题侧边栏添加倒计时
为博客添加游戏收藏页
为你的博客添加待办清单页
为主页文章卡片添加擦亮动画效果
给主题侧边栏添加来访者卡片
给你的博客添加一个宠物挂件
给博客添加定位个性欢迎(腾讯地图版)
本地搜索增加预览图
好看的昼夜切换按扭
主题功能修改
待更新。。。
插件相关
待更新。。。