cards 主题魔改

废话

我在之前的一篇文章中提到，我对 butterfly 有些审美疲劳，倒腾别的主题一下午也没满意，于是在昨天我终于找到了心水的主题，然而顺着作者的主题链接找到主题开源地址，开开心心的部署之后却发现是这样子，很多细节跟作者的博客都很不一样，感觉样式差了一代，虽然配置主题的选项之后，还是挺好看的，但是曾经沧海难为水，不免总是惦记着看到作者博客时的惊喜，于是就开始魔改主题了。

魔改过程

我 fork 之后直接就硬改了，有些地方混入了个人风格（没办法，因为太菜了），开 f12 看了一会，改了几处属性，很多地方就跟作者很像了，大致包括这么几处：

/* 更改主色，灰色改纯白 */
$color_background = #f4f4f4 => #fff

/* 把标题栏改成作者博客的高度 */
$header_height = 60px => 54px

/* 改返回顶部按钮的颜色，灰色改纯白 */
--bg-menu #eceef2 => #fff

/* 更改 cover 的 margin，这里我按照我的喜好改的比作者更窄了 */
.cover
    margin 3rem auto => 0 auto

然后删掉了所有 :hover 的动画，具体的信息请看这个 commit

爆改过程

上面的更改比起这部分只能说是非常优雅了，这部分的更改就更暴力了，因为不熟悉 ejs，怕写错语法无法编译，因此破坏了作者代码的良好复用性，索性新开了一个 branch 保存更改，大致做了这几件事，由于太暴力所以就不贴代码了

1. 修改 .cover 的 margin，让各个尺寸的设备的 margin 上下一致且恒定
2. 改了首页布局，把标签和分类放在文章卡片的一行里，手机端隐藏标签
3. 加入 Google font，包括 Titillium Web 字体用于 cover 和导航栏的标题，Noto Sans SC 用于正文字体，Fira Code 用于代码块字体
4. 给标签页、归档页、分类页加上该有的元信息
5. 调整友链页和其他页面的一致性

代码实在太草生，就不挂了，如果实在要看，这有俩 commit，#435 & #436。

How2Use

总共俩 branch，随意选择

1. master：接近作者版本的
2. dev-akrc：带我风格的版本

顺便贴一下我的部分配置：

style: 

  # 颜色配置
  color: 
    main_color: '#000000'
    main_color_dark: '#ffffff'

  # 弧度设置
  radius: 
    main_radius: 10px
    
  # 间距设置
  space: 
    main_space: 1.5rem
    sm_space: 1rem  # 当屏幕宽度小于 650px 时候启用

  # 默认代码高亮
  highlight: 

    # 默认代码高亮主题
    default: atom-one-light

    # 暗色代码高亮主题
    darkmode: atom-one-dark

结语

正如作者提到的那样，速度真的是 BLAZING FAAAAAST，肉眼可见的响应速度比之前快了几倍，这要是换上国内服务器不得跟 localhost 一样快？可惜换不得…