博客园自定义页面样式
Above all
花了两天,重写了博客的页面样式。整体风格是按照_darkgreentrip_的风格去改的,使之更接近苯人的风格。
最后在结尾放了一些格子可以用来导航,有好用的网站大概会放在这里。
自己其实有做过导航站,但是由于挂在GitHub上,网速比较慢,现在扔在下面平时也稍微能用用()
下面贴上源码,想用的可以参考下。
(bug可能很多,欢迎下方留言 //感谢感谢//)
源码
CSS样式,记得禁用默认样式
点击查看代码
* { margin: 0; padding: 0; box-sizing: border-box; color: #eee; } @media( max-width: 760px ){ .blogStats, #sideBar { display: none; } #mainContent { width: 100% !important; } #post_next_prev>a{ margin-left: 3% !important; } .cardbox { width: 100% !important; flex-direction: column !important; margin-bottom: 10px !important; } .cards{ width: 100% !important; margin-bottom: 10px !important; } .column_middle{ width: 100% !important; } .card { width: 100% !important; margin-bottom: 10px !important; } } ul { list-style: none; } a { text-decoration: none; opacity: 1.0; transition: all .5s; } a:hover { opacity: .6; } #cnblogs_post_body a{ text-decoration: underline; padding: 0 3px; } code, img { border-radius: 5px; } body { background-color: #111; background-image: url(https://images.cnblogs.com/cnblogs_com/blogs/831784/galleries/2434226/o_241201150120_01.jpg); background-repeat: no-repeat; /* background-position: center; */ background-attachment: fixed; background-size: cover; height: 100%; width: 100%; -webkit-transform-style: preserve-3d; /* Safari */ transform-style: preserve-3d; } /* code .code-fullscreen-overlay{ display: fixed; top: 0 !important; margin: 0 !important; } */ #top_nav, #cnblogs_ch, #opt_under_post, #under_post_card1, #under_post_card2, #HistoryToday, #vip_tip, #commentform_title, #tip_comment, #tip_comment2, #tip_comment2+p, #lnkBlogLogo, #sidebar_search, .clear, #comment_pager_top+br, #green_channel, #footer, .diggword { display: none; } #home { display: flex; flex-direction: column; justify-content: flex-start; background-color: rgba(17, 17, 17, 0.67); } #header { display: flex; flex-direction: column-reverse; justify-content: flex-start; user-select: none; } #blogTitle { margin-bottom: 40px; display: flex; justify-content: flex-start; align-items: center; height: 80px; background-color: rgba(17, 17, 17, 0.4); box-shadow: 0 0 8px rgba(17, 17, 17, 0.67); } #blogTitle h1, #blogTitle h2 { margin-left: 30px; } #navigator { display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 50px; background-color: rgba(17, 17, 17, 0.87); backdrop-filter: blur(5px); position: sticky; top: 0; } #navList { min-width: 300px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } #navList li { flex-grow: 0; padding-left: 20px; font-size: 18px; font-weight: lighter; } .blogStats { margin-right: 20px; font-weight: lighter; } #main { display: flex; flex-direction: row-reverse; justify-content: center; align-items: flex-start; } #mainContent { width: 60%; display: flex; justify-content: flex-start; align-items: flex-start; } #sideBar { width: 20%; margin-top: 40px; position: sticky; top: 0; z-index: 0; } .newsItem, .sidebar-block { margin: 20px; padding: 15px; color: #333; /* 明确色彩,增加可读性 */ overflow: hidden; word-break: break-word; background: rgba(238, 238, 238, 0.18); border-radius: 15px; box-shadow: 2px 2px 8px rgba(17, 17, 17, 0.4); transition: all .5s; } .newsItem:hover, .sidebar-block:hover{ background-color: rgba(238, 238, 238, 0.22); } #profile_block, .newsItem ul, .sidebar-block ul { margin-top: 10px; margin-left: 5px; line-height: 1.8; text-align: left; } #myposts { margin-left: 0; } .forFlow { width: 100%; } .day, #myposts .PostList, .entrylistItem { margin: 20px; padding: 15px; overflow: hidden; word-break: break-word; background: rgba(51, 51, 51, 0.8); border-radius: 15px; box-shadow: 2px 2px 8px rgba(17, 17, 17, 0.4); transition: all .5s; } .day:hover, #myposts .PostList:hover, .entrylistItem:hover{ background-color: rgba(238, 238, 238, 0.22); } .dayTitle { margin-bottom: 5px; font-size: 22px; font-weight: bold; line-height: 1.8; text-decoration: underline; } .entrylistItemTitle, .postTitl2, .postTitle { margin-bottom: 5px; font-size: 20px; font-weight: bold; line-height: 1.8; } .feedback_area_title { font-weight: bold; font-size: 18px; } .post .postTitle { display: block; margin: 0; font-size: 32px; font-weight: bold; line-height: 1.6; } .entrylistPostSummary { display: flex; justify-content: space-between; align-items: center; } .c_b_p_desc, .postCon { margin-top: 5px; margin-left: 5px; font-size: 16px; font-weight: normal; line-height: 1.6; } .c_b_p_desc a { padding-left: 20px; } .entrylistItemPostDesc, .postDesc, .postDesc2 { font-size: 12px; font-weight: lighter; margin: 20px 5px 5px; text-align: right; } .postBody { margin: 10px; padding: 20px; overflow: hidden; word-break: break-word; background: #333; border-radius: 15px; box-shadow: 2px 2px 8px rgba(17, 17, 17, 0.4); opacity: 0.8; transition: all .5s; } .postBody:hover{ opacity: 0.9; } #blog-comments-placeholder, .commentform { margin: 20px 10px; padding: 15px; overflow: hidden; word-break: break-word; background: rgba(238, 238, 238, 0.18); border-radius: 15px; box-shadow: 2px 2px 8px rgba(17, 17, 17, 0.4); transition: all .5s; } #blog-comments-placeholder:hover, .commentform:hover { background: rgba(238, 238, 238, 0.22) } #comment_sort { display: flex; align-items: center; } #cnblogs_post_body blockquote{ border-left: 2px solid #e5e5e560 !important; } blockquote p{ font-weight: lighter; font-size: small; } .feedbackItem { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin: 10px 0 0; padding: 15px; overflow: hidden; word-break: break-word; background: rgba(238, 238, 238, 0.18); border-radius: 10px; box-shadow: 1px 1px 5px rgba(17, 17, 17, 0.4); transition: all .5s; } .feedbackItem:hover { background: rgba(238, 238, 238, 0.22) } .feedbackListSubtitle { display: flex; flex-direction: row; font-size: 12px; font-weight: lighter; margin: 5px 0; text-align: left; } .layer, .feedbackManage, .comment_date, .feedbackManage span+a { margin: 0 5px; } .feedbackCon { width: 100%; padding-left: 15px; } .comment_vote { text-align: right; font-size: 12px; font-weight: lighter; margin: 5px 0; } #comment_nav { text-align: right; font-size: 12px; font-weight: lighter; margin: 5px 0 15px; } .commentbox_main.comment_textarea { width: 100%; border-radius: 10px; border: 0; box-shadow: 1px 1px 5px rgba(17, 17, 17, 0.4); background-color: rgba(238, 238, 238, 0.18); transition: all .5s; } .commentbox_main.comment_textarea:hover { background-color: rgba(238, 238, 238, 0.22); } .commentbox_title { transition: all .5s; } #tbCommentBody { min-height: 50px; color: #333; font-size: 16px; background-color: transparent; /* 明确指定透明 */ } .inline_middle { color: #333; font-size: 12px; font-weight: normal; } #commentbox_opt { display: flex; flex-direction: row-reverse; align-items: center; } #commentbox_opt input, #commentbox_opt a { margin: 0 10px; display: block; } .comment_btn { background-color: #333333; border-radius: 5px; border: 0; opacity: .8; transition: all .5s; } .comment_btn:hover { opacity: .6; } .bq_post_comment { border-radius: 10px; } #blog_post_info_block{ display: flex; flex-direction: column; justify-content: center; align-items: center; } #blog_post_info{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } #BlogCollection{ width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: center; } #author_profile{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 0; } #author_profile_info{ display: flex; flex-direction: row; justify-content: center; align-items: center; } #author_profile_info img{ margin: 0; padding: 0; border-radius: 10px; } #author_profile_info a{ margin: 10px; } #div_digg{ width: 120px; height: 40px; background-color: rgba(238, 238, 238, 0.18); border-radius: 10px; display: flex; margin: 0 10px; justify-content: space-evenly; align-items: center; } .diggit, .buryit{ margin: 0; padding: 0; height: 30px; border-radius: 6px; background-image: url(#); background-color: rgba(238, 238, 238, 0.1); box-shadow: 1px 1px 5px rgba(17, 17, 17, 0.4); display: flex; justify-content: center; align-items: center; transition: all .5s; } .diggit:hover, .buryit:hover{ background-color: rgba(238, 238, 238, 0.22); } .buryit{ width: 50px; } .buryit:hover span::after{ content: " Dns"; } .diggit{ width: 50px; } .diggit:hover span::after{ content: " Ups"; } .diggnum, .burynum{ color: #eee; font-size: 14px; font-weight: normal; } #post_next_prev{ margin-top: 20px; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: center; border: solid thin rgba(238, 238, 238, 0.22); background-color: rgba(238, 238, 238, 0.22); box-shadow: rgba(17, 17, 17, 0.4); border-radius: 10px; } #post_next_prev>a{ margin-left: 8%; } .cnblogs-toc-content, .cnblogs-toc-item, .cnblogs-toc-title>div{ color: #333; } /*此后为页尾css*/ .testplace { /* padding: 20px; */ display: flex; justify-content: center; align-items: center; } #body { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: start; background-color: rgba(17, 17, 17, 0.67); } .row { width: 100%; display: flex; flex-flow: row nowrap; justify-content: center; } .column_middle { width: 90%; height: auto; padding: 30px 4%; } .maintext { margin-bottom: 80px; } .endfoot{ width: 100%; height: 350px; padding: 40px 10%; margin-top: 50px; display: flex; align-items: start; justify-content: space-evenly; } .frilinks { padding-left: 15px; margin-right: 10px; display: flex; flex-direction: column; align-items: start; width: 200px; height: auto; } .contactus { padding-left: 15px; margin-right: 10px; display: flex; flex-direction: column; align-items: start; width: 200px; height: auto; } .footertext { padding-left: 15px; display: flex; flex-direction: column; align-items: start; width: 400px; height: auto; } .endfoot h4 { color: #e5e5e560; font-weight: 500; } .endfoot p, .endfoot a { display: flex; flex-direction: row; justify-content: start; font-family: Helvetica, sans-serif; font-size: 14px; line-height: 20px; text-indent: 0px; color: #ffffff1f; font-weight: 300; margin: 10px 0 0 5px; text-decoration: none; transition: all .5s; } .endfoot a:hover { color: #FFFFFF6F; } .pager { display: flex; justify-content: end; align-items: center; text-decoration: none; border: none; color: #eee; font-size: 12px; font-weight: lighter; } .pager a { text-decoration: none; border: none; color: #eee; font-size: 14px; font-weight: normal; }
除了card的末尾HTML,放在页尾代码里,要自己改信息
点击查看代码
<div class="testplace"> <div id="body"> <div class="endfoot"> <div class="frilinks"> <h4>友链</h4> <a href="#" target="_blank">欢迎联系1</a> <a href="#" target="_blank">欢迎联系2</a> <a href="#" target="_blank">欢迎联系3</a> <a href="#" target="_blank">欢迎联系4</a> </div> <div class="contactus"> <h4>联系</h4> <a href="#" target="_blank">链接</a> <p>非链接</p> </div> <div class="footertext"> <h4>© 2021-2024 YourName</h4> <p>Copyright © 2024 #</p> <p>Powered by .NET 8.0 on Kubernetes</p> </div> </div> </div> </div>
已知BUG
- 无法正常放大查看代码
- 评论补充
更新
- 修复了 移动端不适配问题
- 基本可以查看了,但是舍弃了侧边栏,因为感觉放哪里都不合适
- 修复了 页面跳转按钮消失问题
- 下一页后可以回到上一页
- 优化了 博客正文链接不突出的问题
- 现在链接会下划线了
- 优化了 引用框左边框不协调的问题
- 颜色淡化 也变细了一个像素
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验