主题魔改

  1. 双栏布局首页卡片魔改

教程地址：https://akilar.top/posts/d6b69c49/
修改的文件：

  • [Blogroot]\themes\butterfly\layout\includes\mixins\post-ui.pug
  • _index_card_style文件夹为自建，对应的multicard.styl、slidecard.styl也是自建
  • [Blogroot]\themes\butterfly\source\css_page\homepage.styl
    添加卡片预览放大效果

在custom.css添加如下代码

1
2
3
4
.recent-post-content:hover .recent-post-cover .article-cover{
  transform: scale(1.1);
  transition: all ease-in-out .5s;
}
  1. 动态背景在不同屏幕下的适配

在custom.css添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@media screen and (min-width:1069px){
  .vid_bg{
    position: relative;
    left: -30%;
    top: 0%;
    height: 100%;
    width: auto;
  }
}
@media screen and (min-width:572px) and (max-width:1068px){
  .vid_bg{
    position: relative;
    left: -80%;
    top: 0%;
    height: 100%;
    width: auto;
  }
}
@media screen and (max-width:572px){
  .vid_bg{
    position: relative;
    left: -250%;
    top: 0%;
    height: 100%;
    width: auto;
  }
}
  1. 文章页头部图透明或者黑色遮罩效果

头部透明效果
在custom.css添加以下代码

1
2
3
.post-bg{  
  background: transparent !important;  
}

头部黑色遮罩效果
在custom.css添加以下代码

1
2
3
.post-bg{    
  background: rgba(0, 0, 0, 0.2) !important;  
}
  1. 友链样式魔改

教程地址：https://akilar.top/posts/57291286/

  1. 文章顶部添加波纹效果

教程地址：https://anzhiy.cn/posts/98c4.html

  1. 页脚增加网站运行时间

教程地址：https://anzhiy.cn/posts/sdxhu.html
其中css部分的设置放在了custom.css中

  1. 删除头图默认的蓝色背景

在一图流的美化后会发现在打开页面的时候头图会有一瞬间显示蓝色背景，这是因为head.styl在custom.css之前加载，故只要删除_layout/head.styl中关于头图(#page-header)的background-color属性即可

美化过程中可能遇到的问题

  1. 在修改主题配置文件后，实际页面的显示效果异常，和预期效果不同，大多数情况是没有清理缓存导致的，命令行执行hexo clean和hexo server后再看看有没有解决问题。
    还有些情况是主题中的_config.yml和 _config.butterfly.yml里的配置不同名导致的，检查注释主题中_config.yml文件的对应设置后再查看是否显示正常。
  2. 众做周知，hexo博客的文章撰写是使用了Markdown语言，由于渲染器不同，不同主题对md文件的渲染效果也各有千秋，在vscode和博客中预览同一个md文件的结果是不同的；更重要的一点是，Markdown语言对空格的使用有很高的限制，大多看似合理的Markdown段落实际效果不尽人意往往是因为忽视了在行末尾添加空格，而有些语法，如添加代码区块的"```language"和"```"后面不能添加空格，不然编译器会识别不了。