博客主题美化

博客主题美化

一月 01, 2022
该文章更新于 2022.01.01

一、总体美化教程

这次的美化主要分为四个部分：

  1. 文章内显示封面
  2. 给文章添加更新时间
  3. 修改代码块样式以及添加复制功能（这个功能有点问题，具体解决办法看文章末尾）
  4. 给网站添加点击效果（这个功能我没有加，感觉太花哨了）

参考文章：Diaspora 主题美化日记 - 棕果核 (mrzgh.top)

二、代码块以及复制按钮的样式问题

因为原文作者写文章使用的编辑器不是Typora，所以他的代码块美化这一点和我们有所区别

先贴图:image-20220101232815547

  • 问题一：代码块内容超出长度后会显示滚动条，有点丑，干掉
  • 问题二：复制按钮会随着滚动条滚动而位移，不能忍，干掉

这里引用上文链接作者的一段话：

1
因每个人的目录都不同，设定博客根目录为 Blogroot，主题根目录为 Themeroot

解决办法就是在 Themeroot\source\css\diaspora.css中添加如下样式代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 设置代码块隐藏滚动条 */
pre::-webkit-scrollbar{
  display: none !important;/* Chrome Safari */
}
pre{
  scrollbar-width: none !important; /* firefox */
  -ms-overflow-style: none !important; /* IE 10+ */
  overflow-x: auto !important; /*确保内容可以滚动*/
}
/* 设置代码块显示宽度，给复制按钮留出空间 */
figure table{
  width: 95% !important;
}

image-20220101232239088

一定要注意路径问题，因为Blogroot下面也有一个同名的样式文件，不要修改错了

修改完成后重新运行hexo，就可以看到样式正常了，滚动也能正常使用：

1
2
3
hexo clean #清除缓存 网页正常情况下可以忽略此条命令,我是在css未生效之后才重新运行了这个命令
hexo g
hexo d

image-20220101233827612