博客主题美化

博客主题美化

一月 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