建站记录（三）：代码阅读和部分功能实现

前言

对项目架构有了大致了解之后就可以根据自己想要修改的部分去有目的性地寻找文件了。在建站记录（一）中遗留了一些未实现功能，大多需要对项目源码进行更改，因此以实现这些功能为导向进行代码阅读和修改就是近期的目标。

代码泛读

点击展开

全局样式 index.styl

项目根目录/themes/butterfly/source/css/_global/index.styl

• 页面基础样式

body 元素设置了页面的基本样式，包括背景色、字体颜色、字体大小等。
定义了滚动条在不同浏览器中的样式，确保用户体验一致。

• 元素样式定义

h1 到 h6 标题的样式定义了字体重量、颜色和上下间距。
表格和表头样式的定义，包括边框、内边距和背景色。
选中文本时的样式定义，如背景色和文字颜色。

• 链接和按钮样式

链接和按钮样式的定义，包括颜色、悬停效果和过渡动画，确保用户可以清晰地识别链接和按钮。

• 引用块样式

引用块的样式定义了边框、背景色、文本颜色和尾注样式，使引用内容在页面中突出显示。

其他功能

• 全局样式变量定义

使用 :root 定义了一系列全局变量，如颜色、背景色、按钮样式、字体等，这些变量可以在整个样式表> > 中重复使用，方便维护和修改。

• 图片和懒加载效果

对图片的处理，包括未加载时的透明度处理，以及懒加载效果的模糊和明亮度调整。

侧边栏 aside.styl

项目根目录/themes/butterfly/source/css/_layout/aside.styl

• 个人信息卡片

作者信息：包括作者名称、描述的字体样式和边距设置。
社交图标：定义了社交图标的样式和悬停效果。
按钮：包含一个按钮，定义了背景颜色、文字颜色、对齐方式、行高及悬停效果。

• 标签云和列表

标签云：定义了标签的内边距和悬停时的颜色变化。
侧边栏列表：包括最近文章、最新评论、分类、标签、文档、网站信息等列表，定义了各个列表项的布局、内外边距及悬停效果。

• TOC 组件

固定位置：在大屏幕和小屏幕上的不同位置和样式。
内容滚动：目录内容支持滚动，并根据屏幕宽度调整最大高度。
展开和折叠：目录项可以展开和折叠，悬停时会改变颜色。

• 头像样式

圆形头像：定义了头像的圆形样式和悬停时的旋转效果。

• 网站信息

表格布局：网站信息部分使用表格布局，定义了文字颜色和悬停时的颜色变化。

其他功能

• 侧边栏布局

默认宽度：26%
屏幕宽度变化：根据屏幕宽度调整侧边栏宽度和内边距：
大于900px时，侧边栏宽度保持26%，根据配置调整内边距。
小于等于900px时，侧边栏宽度为100%。

• 卡片组件

通用样式：卡片组件有统一的样式，包括相对定位、隐藏溢出内容、内外边距等。
移动设备：在配置中禁止显示的卡片组件会在屏幕宽度小于768px时隐藏。
特定样式：第一个卡片组件在不同屏幕宽度下有不同的上边距。

• 动画效果

按钮移动动画：为按钮设置了一个左右移动的动画效果。
目录展开和关闭动画：目录展开和关闭时有缩放动画效果。

• 响应式布局

隐藏侧边栏：在大屏幕上如果配置隐藏侧边栏，调整主内容的布局。
页内组件排序：根据配置文件中的排序顺序，调整各个卡片组件在侧边栏内的显示顺序。

右侧按钮 rightside.styl

项目根目录/themes/butterfly/source/css/_layout/rightside.styl

• 按钮样式

按钮样式包括背景、颜色、悬停效果等定义。

其他功能

• 位置和动画

侧边栏初始位置在视口右侧外部，通过过渡动画展示。
通过类 .rightside-show 控制显示时的透明度和位移动画。

• 配置面板

#rightside-config-hide 是配置面板，初始隐藏在侧边栏外部，展开时通过动画显示。

• 响应式设计

#mobile-toc-button 和 #hide-aside-btn 根据屏幕宽度响应显示或隐藏。

• 滚动百分比显示

#go-up 元素和 .scroll-percent 类用于显示页面滚动百分比，通过动画效果控制显示状态。

文章 post.styl

项目根目录/themes/butterfly/source/css/_layout/post.styl

• 链接样式

设置链接颜色和鼠标悬停下划线效果。

其他功能

• 标题样式

设置了过渡效果和鼠标悬停时的动画变化。
每个标题前面加上了图标，并在悬停时改变图标颜色。

• 文本内容

文本段落有一定的边距和行距。
列表项的标记符号和悬停效果。
图像和嵌入框架在加载和悬停时有过渡效果。

• 代码

定义了键盘输入的样式，包括边框、背景和字体样式。

• 其他样式

根据配置选项对页面元素进行美化，例如文本对齐、锚点点击滚动效果等。
特定类别的文章内容有额外的样式定义，如标签、分享、版权声明和过期通知等。

分页控件 pagination.styl

项目根目录/themes/butterfly/source/css/_layout/pagination.styl

• 分页控件样式

设置分页控件的顶部边距和居中对齐。
定义当前活动页码的背景色和文字颜色。
将分页信息绝对定位在页面顶部中间，并设置宽度和垂直居中效果。
样式化前后文章信息和文章分页链接，包括在小屏幕下的响应式布局。

• 布局样式

定义了最近文章部分和其他 div 元素中的分页样式。
设置了每个页码元素的显示方式和悬停效果，确保用户体验一致性和视觉吸引力。

评论 comment.styl

项目根目录/themes/butterfly/source/css/_layout/comment.styl

• 评论头部样式

设置评论头部的底部边距和清除浮动。
定义评论标题的显示方式和样式。
控制评论切换按钮的布局和样式，根据配置条件显示不同的样式效果。

• 评论内容容器样式

使用动画效果控制评论内容切换时的过渡效果。
根据类名 .move 控制评论切换按钮和评论内容的状态变化，实现视觉上的切换效果。

页脚 footer.styl

项目根目录/themes/butterfly/source/css/_layout/footer.styl

• 网页底部

相对定位，背景色为 $light-blue。
可能会添加一个全屏遮罩效果的伪元素。

• 包裹容器

相对定位，设置了内边距。
文本颜色为灰色，居中显示。
链接颜色和悬停样式的定义。
特定的类 .footer-separator 用于调整链接之间的间隔。
.icp-icon 类用于调整图标的样式，使其垂直对齐至文本底部。

头部 head.styl

项目根目录/themes/butterfly/source/css/_layout/footer.styl

• 页面头部

设置页面头部背景、高度、文本样式和滚动动画效果。
根据配置项添加背景遮罩效果。

• 页面导航

设置页面导航栏样式，包括背景、高度、字体样式和交互效果。
包含菜单项的样式和下拉菜单的动画效果。

• 页面主体和文章

定义了页面和文章内容的布局样式。
包括标题、元数据（如日期、作者等）、文字样式、响应式调整等设置。

结束

到这里开始我对代码有了基本的熟悉，不再需要为读而读了，可以尝试定位自己实现功能需要读的代码在哪里，然后精读相关代码。

功能实现

这两天有点昏头转向了，感觉脑子不够用。睡了一觉醒来甚至连自己的CSS在哪引入都忘了，找了好几分钟才找到，干。

清单页面

参考JayHrn，实现了清单界面，包括影视、番剧、书籍。游戏和音乐界面我打算单独做一些独特的设计，会在后面单独罗列。以创建影视清单页面为例，

• 在themes/butterfly/layout/includes/page/目录下新建movies.pug文件。
• 在themes/butterfly/layout/page.pug文件中引入创建的页面。
• 在博客根目录新建source/_data/movies.yml文件，并手动添加内容。
• 新建source/css/movies_page.css文件，通过css注入给页面添加样式。

由于主题全局样式有区别，我基于JayHrn佬的源码进行了微调，把作品卡片布局从三列调整成了两列，并调整字号、行高、间距、卡片内容布局、卡片颜色和阴影到我满意的效果。修改主要集中在 movies_page.css 和 movies.pug 这两个文件中。由于这个改动不是基于butterfly主题自带的文件，而是基于按JayHrn的教程新建的文件，所以就不贴在这里了，可以直接去看文件，我在每一处修改的地方都加上了注释。

在这个过程中我逐渐熟悉了css文件和pug文件的代码结构，熟悉了浏览器开发者工具的用法，也完成了又一个第一次：第一次不是 c + v 别人的源码，而是一个字母一个字母敲出来一个容器，塞进网页，实现功能。虽然微不足道，但是也确确实实有一种丰收的喜悦，不亚于第一次看到终端输出 “Hello world” 的那一瞬间。

归档页美化

项目根目录\themes\butterfly\source\css_page\archives.styl

我想要去除的文章列表前方的丑丑的圆形装饰和条纹都在这个文件中被定义，原代码如下：

.article-sort
  &-title
    &:before   // 标题前置伪元素样式
      ···
    &:after    // 标题后置伪元素样式
      ···
  &-item
    &:before   // 条目前置伪元素样式
      ···
    &.year   // 年份条目样式
      &:before
        ···

我没有直接修改原代码，而是通过注入 before_hide.css 来把它们都隐藏。其他美化以后再说。

标签页美化

我目前看到的与标签功能相关的文件总共有五个：

项目根目录\themes\butterfly\source\css_page\tags.styl
项目根目录\themes\butterfly\layout\tag.pug
项目根目录\themes\butterfly\layout\includes\page\tags.pug
项目根目录\themes\butterfly\layout\includes\widget\card_tags.pug
项目根目录\themes\butterfly\scripts\helpers\page.js

对它们的代码进行阅读，它们的功能分别是：

• tags.styl：定义标签云页面的样式，包括标签的排列方式、悬停效果、字体大小和颜色。
• tag.pug：控制单个标签页面的布局和内容，显示包含某个标签的所有文章列表。
• tags.pug：控制标签云页面的布局和内容，生成包含所有标签的页面。
• card_tags.pug：控制侧边栏标签云小组件的布局和内容，根据配置决定是否显示标签云。
• page.js：定义生成标签云的 cloudTags 函数，设置标签的字号、颜色等样式。

我想要实现的功能为

1. 把标签的字号修改为1.2em（参考Tzy的标签页），字体颜色修改为黑色，并在标签后面显示符号“#”加上该标签下文章数量。这里只需要修改 page.js 文件。
2. 调整标签云页面的样式，包括调整内外边距、添加边框、边框圆角和阴影、行高（同样参考Tzy的标签样式）。这里只需要修改 tags.styl 文件

page.js 文件代码修改如下：

（通过diff格式代码块体现修改内容）

hexo.extend.helper.register('cloudTags', function (options = {}) {
-    // 构建样式字符串，设置字体大小和随机生成的颜色
-    let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
-    // 随机生成颜色，保证颜色值在 rgb(0, 0, 0) 到 rgb(200, 200, 200) 范围内
-    const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')'
-    style += ` color: ${color}`
-    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`

+    let style = `font-size: 1.2em;`   //字体大小修改为1.2em
+    style += ` color: black;`   //字体颜色修改为黑色
+    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name} #  ${tag.length}</a>`   //标签后显示文章数量
  })
  return result
})

tags.styl 文件修改如下：

.tag-cloud
  &-list
    a
      display: inline-block;  // 设置为内联块级元素，使得链接可以并排显示
-      padding: 0 8px;         // 左右内边距为8像素，上下内边距为0
+      padding: 3.36px 10px  // 调整内边距
+      margin: 8.4px 8.4px  // 调整外边距
+      border: 1px solid #ccc  // 添加边框
+      border-radius: 12px  // 圆角边框
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  // 添加阴影
+      line-height: 33.6px;  // 调整行高
      transition: all .3s;    // 添加所有属性的过渡效果，时长为0.3秒

如果要完全复刻Tzy或者JayHrn的效果，应该还需要给文章数量（tag.length）设置一个容器，并设置相应样式，以及修改 hover 效果。这些东西暂时不想整，目前为止的效果我就可以接受了。

值得一提的是，单个标签页好像是沿用的归档页的布局，所以在上一步隐藏掉归档页的装饰性圆形和条形之后在单个标签页也没有了。

分类页美化

同样的，先找到和分类页相关的文件，如下所示

项目根目录\themes\butterfly\source\css_page\categories.styl
项目根目录\themes\butterfly\layout\includes\page\categories.pug
项目根目录\themes\butterfly\layout\category.pug

功能分别为：

• categories.styl: 这是一个样式文件，用于定义分类页面的样式。它主要控制以下元素的外观：分类标题的字体大小、分类列表的样式、分类名称的颜色及悬停效果、分类文章计数的样式、分类列表的缩进和布局
• categories.pug: 这是一个非常简单的模板文件，它只包含一行代码，用于渲染分类列表。list_categories()是一个 Hexo 的辅助函数，用于生成所有分类的列表。
• category.pug:
  这是分类页面的主要模板文件。它定义了两种不同的分类页面布局：如果 theme.category_ui 设置为 ‘index’，它会使用类似于首页的文章列表布局。否则，它会使用一个排序的文章列表布局，显示特定分类的文章。

我希望分类页样式能和标签页保持一致，修改如下：

修改 categories.pug：

-.category-lists!= list_categories()
+.category-cloud-list.is-center
+  !=cloudCategories({source: site.categories, orderby: page.orderby || 'random', order: page.order || 1, minfontsize: 1.2, maxfontsize: 2.1, limit: 0, unit: 'em'})

在 page.js 中添加 cloudCategories 函数：

在 page.js 文件的末尾添加以下代码：

+hexo.extend.helper.register('cloudCategories', function (options = {}) {
+  const env = this
+  let { source, minfontsize, maxfontsize, limit, unit, orderby, order } = options
+  unit = unit || 'em'
+  let result = ''
+  if (limit > 0) {
+    source = source.limit(limit)
+  }
+  source.sort(orderby, order).forEach(category => {
+    let style = `font-size: 1.2em; color: black;`
+    result += `<a href="${env.url_for(category.path)}" style="${style}">${category.name} #${category.length}</a>`
+  })
+  return result
+})

修改 categories.styl：

将原文件完全替换

-.category-lists
-  .category-title
-    font-size: 2.57em
-    +maxWidth768()
-      font-size: 2em
-  .category-list
-    margin-bottom: 0
-    a
-      color: var(--font-color)
-      &:hover
-        color: $text-hover	
-    .category-list-count
-      margin-left: 8px
-      color: $theme-meta-color
-      &:before
-        content: '('
-      &:after
-        content: ')'
-  ul
-    padding: 0 0 0 20px
-    @extend .list-beauty
-    ul
-      padding-left: 4px
-    li
-      position: relative
-      margin: 1px 0/
-      padding: .12em .4em .12em 1.4em

+.category-cloud-list
+  a
+    display: inline-block
+    padding: 3.36px 10px
+    margin: 8.4px 8.4px
+    border: 1px solid #ccc
+    border-radius: 12px
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)
+    transition: all .3s
+    line-height: 33.6px
+    &:hover
+      color: $text-hover !important
+      transform: scale(1.1)
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)
+    +maxWidth768()
+      zoom: .85

+.category-title
+  font-size: 2.57em
+  +maxWidth768()
+    font-size: 2em

+h1.page-title
+  & + .category-cloud-list
+    text-align: left

顶部导航栏字体

项目根目录\themes\butterfly\source\css_layout\head.styl

一直觉得导航栏部分的字体有一点小，想改的稍微大一点。顶部导航栏相关的内容都在 head.styl 里，改动如下：

  .site-page
    position: relative
    padding-bottom: 6px
    text-shadow: 1px 1px 2px rgba($dark-black, .3)
-    font-size: .78em
+    font-size: 15px
    cursor: pointer

之前曾经想把左边的logo和站名左移一些，把右边的搜索icon右移一些，后来觉得还是维持原样好看，就没动位置。

分页按钮颜色

项目根目录\themes\butterfly\source\css\var.styl

+$theme-paginator-color = #4a587f

-$theme-paginator-color = $themeColorEnable && hexo-config('theme_color.paginator') ? convert(hexo-config('theme_color.paginator')) : $strong-cyan
+$theme-paginator-color = $themeColorEnable && hexo-config('theme_color.paginator') ? convert(hexo-config('theme_color.paginator')) : $theme-paginator-color

右下角按钮颜色

项目根目录\themes\butterfly\source\css\var.styl

-$btn-color = #fff
+$btn-color = #4a587f

主题颜色

项目根目录\themes\butterfly\source\css\var.styl

// color
+$j1nz-theme-color = #9297a7

-$theme-color = $themeColorEnable && hexo-config('theme_color.main') ? convert(hexo-config('theme_color.main')) : $bright-blue
+$theme-color = $themeColorEnable && hexo-config('theme_color.main') ? convert(hexo-config('theme_color.main')) : $j1nz-theme-color

被选字体颜色

项目根目录\themes\butterfly\source\css\var.styl

+$j1nz-text-sel-color = #ff7c7c

-$theme-text-selection-color = $themeColorEnable && hexo-config('theme_color.text_selection') ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
+-$theme-text-selection-color = $themeColorEnable && hexo-config('theme_color.text_selection') ? convert(hexo-config('theme_color.text_selection')) : $j1nz-text-sel-color

侧栏目录颜色

项目根目录\themes\butterfly\source\css\var.styl

+$j1nz-toc-color = #d7d4f0

-$theme-text-selection-color = $themeColorEnable && hexo-config('theme_color.text_selection') ? convert(hexo-config('theme_color.text_selection')) : $strong-cyan
+$theme-toc-color = $themeColorEnable && hexo-config('theme_color.toc_color') ? convert(hexo-config('theme_color.toc_color')) : $j1nz-toc-color

搜索栏左上角“搜索”的字号和颜色

项目根目录\themes\butterfly\source\css_search\index.styl

    .search-dialog-title
      margin-right: 10px
+      color: #000000
+      font-size: 22px

结语

回顾开始时提到的之前的未实现功能，有四项已经完成：

• 修改右下角图标颜色、页码按钮颜色、滚动条颜色等主题颜色。
• 调整顶部导航栏字体大小。
• 对归档、标签、分类页面进行美化。
• 完成清单页面的布置。

有五项不是很重要，暂时延后，等什么时候想做了再做：

• 部署评论功能，开通留言板。
• 制作关于页面，制作历史版本记录页面。
• 优化博客链接。
• 修改网站加载动画。
• 设置个性化页脚和徽标。

有两项现在觉得不需要做了：
- 调整主页正文卡片宽度，调整顶部导航栏使其与正文左右侧对齐。
- 主页顶部轮播卡片。

第一阶段的目标已经完成啦，网站基本算是搭起来了，接下来就要注重于个人提升和博客内容了。或者说这一直以来都是我的目标，网站本身反而是最不重要的。我只是把这里当作放我的杂谈、随笔、感悟的地方，记录美化的过程也只是方便以后再改的时候回来查阅。

希望我可以顺顺利利把毕业论文写出来~