安知鱼主题自定义笔记

前言

这是一个基于 安知鱼主题 1.6.14的自定义笔记或者教程，将从最基础的角度进行讲解，
这两天都在摸源码进行一些自定义修改，故心血来潮开个坑记录一下方便oo查阅。

想要了解更多本文中没有出现的自定义行为，可以在评论区留言即使现在还没完成评论区功能。

文档

安知鱼文档：无需多言，感谢安知鱼开源。
Markdown语法：刚入门，还是需要多看看写作规范。

实用方法

首先必须要先放一些帮助我们更方便进行关键字查找的方法。

命令行查询

$ Get-ChildItem -Recurse | Select-String "想要查询的关键字"

主页面

首页顶部

文件路径：

\themes\anzhiyu\source\css\_layout\home_top.styl

• background 更改背景颜色
• 若想取消鼠标移入移出时的颜色过渡，请将#random-banner下&:hover以及#random-banner下#random-hover中的transition改为

  transition: opacity 0.3s, padding-left 0.3s

  同时更改其中的background以实现想要的效果。
• 若想使鼠标移出时也有模糊过渡效果，请在#random-banner下#random-hover添加

  backdrop-filter: blur(15px)
  -webkit-backdrop-filter: blur(15px)

分类栏

文件路径：

\themes\anzhiyu\source\css\_extra\home_top\categorygroup.css

其中：

• .categoryButtonText：是文字的样式
• a.categoryButton:after：是文字下面的下划线
• a.categoryButton i：是图标的样式

  需要注意，icon存储在CDN中，通过F12可以查询到。因此图标的具体样式无法在这里更改。

若想进行暗色模式的更改，只需在前加上关键字[data-theme="dark"]，具体实现可以参考原文件上下文。

今日卡片

文件路径:

\themes\anzhiyu\source\css\_extra\home_top\top_group_banner.css

• .topGroup .todayCard::after：调整边缘阴影

作者卡片

文件路径：

\themes\anzhiyu\source\css\_layout\aside.styl

• #author-info__sayhi：最上方的打招呼
• .author-info__name：作者名
• .card-widget.card-info下&::before下background：卡片背景
• .card-info-social-icons下.social-icon下i, svg：小图标
• 若想修改Description样式，请回到主题_config.yml文件中，找到card_author中的description字段进行修改。
• 若想使Description的颜色随主题改变，请在其中加入

  style="color: var()"

  括号内为\themes\anzhiyu\source\css\_global\index.styl中的字段名，如：

  <div style="line-height:1.38;margin:0.6rem 0;text-align:justify;color: 
      var(--anzhiyu-fontcolor); opacity:0.8;">这里是我的<b style="color: var(--anzhiyu-fontcolor)">赛博日记</b>。<br>
      我将在这里更新我的<b style="color: var(--anzhiyu-fontcolor)">工作状况</b>、<b style="color: var(--anzhiyu-fontcolor)">
      日常生活</b>、和<b style="color: var(--anzhiyu-fontcolor)">乱七八糟的一些东西</b>。
  </div>

加载界面

文件路径：

\themes\anzhiyu\source\css\_global\loading.styl

所有颜色的位置

主题颜色

文件路径：

\themes\anzhiyu\_config.yml

• theme_color：主题颜色

Markdown相关

加粗（**）

文件路径：

\themes\anzhiyu\source\css\_global\index.styl

• --anzhiyu-lighttext：markdown文字高亮颜色

引用代码（`）

文件路径：

\themes\anzhiyu\source\css\_extra\code\code.css

• #article-container code：代码颜色

文件路径：

\themes\anzhiyu\source\css\_global\index.styl

• --anzhiyu-code-stress：背景颜色

功能部分

评论区

先放文档。
安知鱼文档-评论
Twikoo官方文档

别的都没什么好说的，上面的文档已经讲的很清楚了。唯一需要提的点是，MongoDB的数据库连接字符串中的<username>:<password>，是一整个<username>替换掉，是的，包括 **<>**。
无语了。

其他

about页字体缩放问题

在about页的helloAbout中，出现了页面缩放时字体大小不变/超格的问题。此时只需要在：

\themes\anzhiyu\source\css\_page\about.styl

中找到关键字.hello-about h1，将第一行的font-size改为：

font-size: clamp(24px, 10vw, 200px) !important

即可解决缩放问题。