我其实来博客园的时间不是很久，看了一下后台也就2022-07-12，之前也是用node.js搭建hexo博客部署在github.io上，只不过github在国内的访问速度比较慢，后面又用了简书，简书是直接可以使用markdown写作，可以直接兼容之前写的博客，不过简书后面广告泛滥，后来用了知乎，现在我主要在博客园上创作，更多的样式支持，可以有更多的创造空间，比如我经常要写一些交换机路由器等网络设备的命令，这些是语法高亮所不具备，需要人为的润色。可以自定义主题的博客，也就博客园比较出名了。
更换主题
目前一直使用博客园模板中东东制作的 elf作为博客园的主题。这种圆角矩形的质感是深得我心啊。
图.elf原版在PC上（这里选择了在主页上访问量最高 秋华大佬的博客展示）
在此elf主题的基础上进行了一些小修小改：自定义了css样式，比如：尽可能的让布局圆角、主体透明度、调整内外边距、隐藏一些不必要的内容等等。
图.二次修改css的效果
不过在手机上还是有一点小问题：貌似自定义的css在手机微信上是不生效的，其他浏览器是正常的，还有就是当时因为在电脑的基础上调整的太多样式用的电脑，感觉不是很美观。
图.手机上的css样式不生效
奈何本人前端也是半桶水的功夫，所以我现在申请了JavaScript的权限，打算直接用大佬的作为主题样式吧。随便分享一下之前的css也作为备份之用。
页面定制CSS
#home {
/* opacity: 1.0; */
margin: 0 auto;
/* width: 70%; */
/* min-width: 70%; */
/* background-color: #fff; */
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
/* box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); */
}
/* #Header1_HeaderTitle{
margin-left: 30px;
}
#mainContent {
width: 80% !important;
padding: 0px;
margin: 0px;
}
#sideBar {
width: 25% !important;
}
#header {
width: 80% !important;
} */
#comment_form {
padding: 30px;
opacity:0.9;
/* display: none !important; */
}
#topics {
/* 文本区 */
padding: 20px;
opacity:0.9;
}
#sidebar_news {
/* 新消息 */
padding: 15px;
opacity:0.9;
}
#header {
border-radius: 7px 7px 7px 7px;
opacity:0.9;
/* opacity:0.8; */
/* background: #2EB1F2; */
margin: 0 auto;
width: 70%;
}
.forFlow,.gallery {
padding: 15px;
opacity:0.9;
}
#sideBar {
opacity:0.9;
}
.table-wrapper{
text-align:center;
}
.dayTitle {
text-align:center;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
}
#navigator {
width: auto !important;
}
body {
/* 背景图 */
background: rgb(6 51 4 / 28%) url(
'https://images.cnblogs.com/cnblogs_com/blogs/764974/galleries/2225003/o_221002085029_1b73351dde193a3445a82b6e387910f0.jpg'
) fixed no-repeat;
background-position: 50% 5%;
background-size: cover;
}
#blog-comments-placeholder {
background: #fff;
padding: 20px;
border-radius: 7px 7px 7px 7px;
margin-bottom: 20px;
opacity:0.9;
}
.burynum {
color:grey
}
.diggnum {
font-size:18px;
color:#2175bc;
font-weight:bold;
}
.blogStats {margin-right: 20px !important;}
#navList {margin-left:10px !important;}
/* 隐藏广告、上边栏等一些不必要的样式 */
#blog_nav_sitehome,#blog_nav_admin,#under_post_card1,#under_post_card2,#cnblogs_ch,#stats-comment_count,#sidebar_recentcomments {
display: none !important;
}
其他的地方也没有啥啦。
不知道各位大佬在用怎么样的主题呢？
更新日志
2022年10月27日 10:25
- 完成初稿
2022年10月28日13:38:52
- 修复了@0611163反馈的手机端排版过小的问题
Original: https://www.cnblogs.com/alittlemc/p/16831048.html
Author: alittlemc
Title: 备份一下自己的博客主题
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/643967/
转载文章受原作者版权保护。转载请注明原作者出处！