7/15/2024

链接优化

参考了Dejavu的教程，使用hexo-abbrlink插件实现。只修改了Hexo配置文件中的 permalink 字段：

1 2	+permalink: :year/:month/:day/:title/ -permalink: posts/:abbrlink/

音乐页

参考安知鱼的音乐页配置教程，下面是大概步骤，细节详见教程：

修改主题配置文件 _config.butterfly.yml 最下面的 CDN.option.meting_js
创建页面, 新建 source/music/index.md 文件
创建页面，新建themes/butterfly/layout/includes/page/music.pug
此处可以自行修改server和歌单 id，我修改成我自己的网易云歌单了。
修改themes/butterfly/layout/page.pug
修改themes/butterfly/layout/includes/layout.pug
引入js和css
css还是在head.pug里引入，js是在_config.butterfly.yml里inject。

在部署的时候出现了一些问题：

开始一直不能正常显示播放器部分，经过了超级长时间的排查之后通过更新aplayer的指令解决了问题：
1
npm install hexo-tag-aplayer@latest

因为我的主题不是安知鱼主题，所以歌词行间距、导航栏字体颜色、播放器高度等都有一点问题，通过修改music.css代码解决：

+/*修改页面标题颜色*/
+.page:has(#anMusic-page) #page-header.not-top-img #page-+site-info #site-title,
+.page:has(#anMusic-page) .page-title {
+  color: #fff !important;
+}

+/*修改导航栏颜色*/
+.page:has(#anMusic-page) #nav a,
+.page:has(#anMusic-page) #nav .site-page,
+.page:has(#anMusic-page) #page-header #nav .back-home-button +{
+  color: #fff !important;
+}

+/*导航栏子类保持默认颜色*/
+.page:has(#anMusic-page) #nav .menus_item_child a {
+  color: var(--font-color) !important; /* 恢复默认字体颜色*/
+}

+/* 高优先级规则来设置站点名称颜色 */
+/* 如果上面的规则仍然不够，可以尝试这个更激进的方法 */
+.page:has(#anMusic-page) #nav *[id*="site-name"],
+.page:has(#anMusic-page) #nav *[class*="site-name"] {
+  color: #fff !important;
+}


/*修改了歌曲列表的颜色*/
#anMusic-page .aplayer-list {
  width: 60%;
  max-height: none !important;
  height: 100%;
+  color: #fff; /*我加的*/
}
/*和不知道是什么的颜色*/
#anMusic-page ol > li {
  border-top: 1px solid transparent;
  font-size: 14px;
+  color: #fff; /*我加的*/
}
/*好吧这个才是歌曲列表颜色，那上面的是啥？*/
#anMusic-page ol > li span {
+  color: #fff; /*修改歌曲列表文字颜色*/
}
#anMusic-page ol > li span.aplayer-list-author {
+  opacity: 0.8;  /*歌曲列表后方作者字体的透明度，从0.6调成0.8*/
}

/*修改了歌曲列表、歌词列表的高度*/
#anMusic-page .aplayer-body {
  width: 40%;
+  height: 70vh;  /*高度为视口高度的...，从75改成70*/
}
#anMusic-page ol {
+  max-height: 70vh !important;  /*定制播放列表的高度，也从75改成了70*/
  padding-right: 25px;
}

/*修改了歌词的行间距*/
#anMusic-page .aplayer-info .aplayer-lrc p {
  font-size: 14px;
  color: #fff;
+  line-height: 16px !important;  /*照着安知鱼的页面改的，他是20我是16*/
+  height: 16px !important;  /*照着安知鱼的页面改的*/
+  margin: 16px 0 !important;  /*照着安知鱼的页面改的*/
}

1/23/2025

引用框优化

优化效果如下：
修改前：

修改后：

实现过程如下：
修改了 \themes\butterfly\source\css_global\index.styl 中的配置。
颜色也可以在这里修改，也可以在前面路径中的 var.styl 中修改

-blockquote
-  margin: 0 0 20px
-  padding: 12px 15px
-  border-left: 3px solid $blockquote-padding-color
-  background-color: var(--blockquote-bg)
-  color: var(--blockquote-color)


+blockquote
+  margin: 0 0 20px
+  padding: 12px 15px
+  border-left: 5px solid $blockquote-padding-color
+  background-color: var(--blockquote-bg)
+  color: var(--blockquote-color)
+  border-top-left-radius: 4px // 左上角圆角
+  border-bottom-left-radius: 4px // 左下角圆角
+  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1) // 添加浅色阴影