博客主题美化
博客主题美化
倾盖
发布于 2022-08-16 06:16:22
发布于 2022-08-16 06:16:22
代码可运行
运行总次数：0
代码可运行
一、总体美化教程
这次的美化主要分为四个部分：
- 文章内显示封面
- 给文章添加更新时间
- 修改代码块样式以及添加复制功能（这个功能有点问题，具体解决办法看文章末尾）
- 给网站添加点击效果（这个功能我没有加，感觉太花哨了）
参考文章：Diaspora 主题美化日记 - 棕果核 (mrzgh.top)
二、代码块以及复制按钮的样式问题
因为原文作者写文章使用的编辑器不是Typora，所以他的代码块美化这一点和我们有所区别
先贴图:
- 问题一：代码块内容超出长度后会显示滚动条，有点丑，干掉
- 问题二：复制按钮会随着滚动条滚动而位移，不能忍，干掉
这里引用上文链接作者的一段话：
因每个人的目录都不同，设定博客根目录为 Blogroot，主题根目录为 Themeroot解决办法就是在 Themeroot\source\css\diaspora.css中添加如下样式代码：
/* 设置代码块隐藏滚动条 */
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;
}
一定要注意路径问题，因为Blogroot下面也有一个同名的样式文件，不要修改错了
修改完成后重新运行hexo，就可以看到样式正常了，滚动也能正常使用：
hexo clean #清除缓存 网页正常情况下可以忽略此条命令,我是在css未生效之后才重新运行了这个命令
hexo g
hexo d
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
