简单修改博客园的页面样式
1. 在博客后台选择皮肤主题、申请js权限等
我选的主题是SimpleMemory
2. 在博客设置页添加页面css代码如下
body {
background-image: url(https://images.cnblogs.com/cnblogs_com/blogs/786357/galleries/2285082/o_230309173325_bg_image.jpg);
background-repeat: no-repeat;
background-size: 100% 100vh;
background-attachment: fixed;
}
#home {
background-color: rgba(255, 255, 255, 0.3);
margin: 0 auto;
width: 90%;
min-width: 950px;
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100,100,100,.3);
}
.navbar {
box-shadow: 0 2px 6px rgb(100 100 100 / 15%);
}
.navbar {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
padding-left: 40px;
padding-right: 40px;
padding-top: 5px;
padding-bottom: 5px;
background-color: rgba(255, 255, 255, 0.7);
}
.navbar>nav {
font-size: 15px;
display: flex;
color: rgb(58, 58, 58);
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
width: 100%;
}
.navbar>nav a:hover {
color: rgb(0, 145, 189);
}
#home a {
text-decoration: none;
}
#header a {
text-decoration: none;
color: #000;
}
#header a:hover {
color: #666;
}
#header>#blogTitle {
font-family: "华文彩云";
font-size: 20px;
line-height: 22px;
}
#navigator {
display: flex;
flex-direction: row;
}
#navigator>#navList {
display: flex;
flex-direction: row;
list-style-type: none;
font-family: "华文隶书";
margin-right: 100px;
}
#navigator>#navList a {
display: inline-block;
margin-right: 20px;
font-size: 22px;
}
#navigator>.blogStats {
padding-top: 15px;
font-size: 18px;
font-family: "华文新魏";
}
#main {
width: 100%;
text-align: left;
margin-top: 30px;
display: flex;
flex-direction: row;
}
#mainContent {
flex: 1;
min-height: 200px;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
margin: 0 5px;
background-color: rgba(255, 255, 255, 0.4);
}
#mainContent .forFlow {
float: none;
width: auto;
padding: 15px;
}
#mainContent .forFlow .dayTitle {
display: none;
}
#topics .postTitle {
border: 0;
font-weight: bold;
line-height: 1.5;
width: 100%;
padding-left: 5px;
text-decoration: none;
}
.postTitle a {
font-size: 35px;
color: rgb(0, 0, 186);
font-family: "华文行楷";
}
.postTitle a:hover {
color: #519bf0;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
transition: all .4s linear 0s;
}
#sideBar {
width: 260px;
min-height: 200px;
padding: 0 0 0 5px;
float: right;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
font-size: 12px;
margin: -15px 5px 0 5px;
}
#blog-calendar {
width: 228px;
padding-bottom: 5px;
margin-bottom: 40px;
margin-top: 40px;
box-shadow: 0 1px 3px #ccc;
border: 1px solid #ededed;
background: rgba(247, 247, 247, 0.6);
}
#blog-calendar th {
font-size: 12px;
}
#blogCalendar {
border-collapse: collapse;
border-spacing: 0;
border: none;
color: #666;
}
#blogCalendar td {
padding-top: 4px;
padding-bottom: 4px;
}
#blogCalendar tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
.CalTitle {
width: 100%;
text-align: center;
font-size: 14px;
font-weight: bold;
padding: 5px 0;
}
.CalTitle td {
background: rgba(247, 247, 247, 0.7); !important;
border: 0 !important;
color: #5e5f63;
font-family: "Comic Sans MS";
}
.CalNextPrev {
color: #000;
}
.CalDayHeader {
background: rgba(247, 247, 247, 0.7);
font-weight: bold;
color: #5e5f63;
}
.CalOtherMonthDay {
color: #bbb;
}
.CalTodayDay {
background: #3671a5 !important;
color: #fff;
font-weight: bold;
}
.sidebar-block a,
.sidebar-block span,
.sidebar-block p {
color: #333;
font-family: "华文中宋";
font-size: 15px;
}
.sidebar-block a:hover {
color: #0169e1;
}
.sidebar-block ul {
list-style-type: none;
}
#sideBar .catListTitle {
font-family: "华文隶书";
font-size: 20px;
font-weight: 200;
}
.div_my_zzk {
width: 175px;
position: relative;
margin-top: 10px;
}
.input_my_zzk {
border: 1px solid #ccc;
height: 25px;
padding-right: 30px;
padding-left: 5px;
width: 100%;
outline: 0;
vertical-align: middle;
background-color: rgba(248, 248, 248, 0.6);
}
.btn_my_zzk {
font-size: 12px;
width: 25px;
height: 25px;
color: transparent;
border: 0;
border-style: none;
cursor: pointer;
top: 1px;
position: absolute;
right: -35px;
}
#btnZzk {
background: url(https://www.cnblogs.com/skins/simplememory/images/blog_search.png) no-repeat 5px 5px;
}
#widget_my_google input[type=button] {
background: url(https://www.cnblogs.com/skins/simplememory/images/google_search.png) no-repeat 5px 5px;
}
#profile_block,
#profile_block a {
font-family: "华文中宋";
font-size: 15px;
color: #333;
}
#profile_block a:hover {
color: #0169e1;
}
.RecentCommentBlock p {
font-size: 12px;
padding-left: 20px;
}
.recent_comment_title p {
padding-left: 0;
}
#cnblogs_post_body {
padding-bottom: 20px;
border-bottom: #5F5A4B 4px solid;
}
#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4 {
background: #037cdf;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-weight: bold;
text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h1 {
font-size: 23px;
}
#cnblogs_post_body h2 {
font-size: 20px;
}
#cnblogs_post_body h3 {
font-size: 18px;
}
#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3 {
height: 25px;
line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 5px 5px;
}
#cnblogs_post_body h4 {
font-size: 16px;
height: 24px;
line-height: 23px;
margin: 12px 0 !important;
padding: 5px 0 5px 10px;
}
#cnblogs_post_body h3 {
background: #399ab2;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 18px;
font-weight: bold;
margin: 18px 0 !important;
padding: 8px 0 5px 5px;
text-shadow: 2px 2px 3px #222222;
}
#blog_post_info_block {
}
#green_channel {
width: 100%;
}
#green_channel a {
font-size: 25px;
}
#author_profile a {
display: inline-block;
color: #000;
font-size: 17px;
margin: 5px;
float: left;
}
#div_digg {
}
.c_b_p_desc {
font-size: 15px;
color: #333;
font-family: "华文中宋";
}
.c_b_p_desc a {
color: rgb(0, 0, 186);
float: right;
text-decoration: underline !important;
font-family: "华文楷体";
}
.c_b_p_desc a:hover {
color: #0169e1;
}
.postDesc {
margin-bottom: 30px;
}
.postDesc,
.postDesc a,
.postDesc span {
font-family: "微软雅黑";
text-decoration: none;
color: #777777;
}
.feedback_area_title {
font-size: 25px;
}
.feedbackItem {
position: relative;
padding: 15px 0 15px 60px;
margin: 0;
font-size: 13px
}
.feedbackItem:before {
position: absolute;
top: 0;
bottom: 0;
left: 90px;
display: block;
z-index: 0;
width: 2px;
content: "";
background-color: #e1e4e8
}
.feedbackAvatar {
position: absolute;
left: 1px
}
.feedbackAvatar img {
width: 40px;
height: 40px;
border: 1px solid #d1d5da;
padding: 2px;
border-radius: 3px
}
.feedbackListSubtitle {
clear: both;
align-items: center;
color: #586069;
flex-direction: row-reverse;
background-color: #f6f8fa;
border: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 10px 20px;
position: relative;
white-space: nowrap;
text-overflow: ellipsis
}
.feedbackListSubtitle a:active,
.feedbackListSubtitle a:link,
.feedbackListSubtitle a:visited {
color: #777;
font-weight: 700
}
.feedbackListSubtitle a:hover {
color: #5c8ec6;
text-decoration: underline
}
.feedbackListSubtitle b {
color: #5c8ec6
}
.feedbackListSubtitle:before {
position: absolute;
top: 11px;
right: 100%;
left: -16px;
display: block;
width: 0;
height: 0;
pointer-events: none;
content: " ";
border-color: transparent;
border-style: solid solid outset;
border-width: 8px;
border-right-color: #d1d5da
}
.feedbackListSubtitle:after,
.feedbackListSubtitle-louzhu:after {
position: absolute;
top: 11px;
right: 100%;
left: -16px;
display: block;
width: 0;
height: 0;
pointer-events: none;
content: " ";
border-color: transparent;
border-style: solid solid outset;
margin-top: 1px;
margin-left: 2px;
border-width: 7px
}
.feedbackListSubtitle:after {
border-right-color: #f6f8fa
}
.feedbackListSubtitle-louzhu:after {
border-right-color: #f1f8ff !important
}
.feedbackManage {
width: 200px;
text-align: right;
float: right
}
.feedbackCon {
padding: 10px 20px;
min-height: 35px;
line-height: 1.5;
border: 1px solid #e9e9e9;
border-top: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: #fff;
position: relative
}
.feedbackListSubtitle-louzhu {
background-color: #f1f8ff !important;
border-bottom-color: #c0d3eb !important
}
.comment_vote a {
color: #333;
}
.comment_vote a:hover {
color: #056add;
}
#comment_form {
}
#comment_nav {
margin-bottom: 30px;
border-bottom: 2px dashed #037cdf;
}
#comment_nav a:hover {
color: #056add;
}
.commentbox_main {
width: 100%;
}
#comment_form_container p {
color: #777;
}
#commentbox_opt a,
#btn_comment_submit {
display: inline-block;
background: #0367da;
text-decoration: none;
color: #fff;
margin: 10px 20px 10px 0px;
padding: 0 10px;
width: auto;
height: auto;
border: none;
line-height: 28px;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
text-transform: uppercase;
transition: all .4s;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
position: relative;
cursor: pointer;
}
#commentbox_opt a:hover,
#btn_comment_submit:hover {
background: #519bf0;
}
#cnblogs_ch,
#opt_under_post,
#cnblogs_c1,
.under-post-card {
display: none !important;
}
#footer {
margin-top: 50px;
text-align: center;
color: #666;
}
样式修改主要就是用浏览器不断审查页面元素,找到元素对应的id或者class进行修改样式。
#cnblogs_ch, #opt_under_post, #cnblogs_c1, .under-post-card
是博客园页面最底部的广告和推荐,顺手设成display: none
给他隐藏了。
3. 侧边栏
我在改样式的时候一直想给侧边栏加一个文章的目录,但也懒得自己遍历全文去找各种标签,然后就用了SimpleMemory主题自带的目录窗口。
SimpleMemory自带的目录是先通过点击标题旁边的图标按钮显示出来,然后点击固定之后就会脱离文本流。
我采用的方法比较笨,用js模拟鼠标去点击上述两个按钮,然后把弹出的窗口设成fixed定位(其实已经是fixed了),然后隐藏这个窗口自带的关闭按钮,并自己做个用于显示/隐藏这个窗口的按钮。
最后再用svg加了个返回顶部的按钮。
代码如下:
<script type="text/javascript">
window.cnblogsConfig = {
GhVersions: 'v1.3.2', // 版本
blogUser: "longxiaoming", // 用户名
blogAvatar: "https://images.cnblogs.com/cnblogs_com/blogs/786357/galleries/2285082/o_230310051136_image.png", // 用户头像
blogStartDate: "2023-03-09", // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
}
</script>
<script type="text/javascript">
let titleButton = document.querySelector(".postTitle .cnblogs-toc-button")
if (titleButton) {
// 有标题,说明是文章页
// 点击相关按钮显示目录导航(先点击标题按钮, 弹出临时弹窗,再点击弹窗中的固定按钮,并隐藏临时弹窗)
titleButton.click()
document.querySelector(".postTitle .cnblogs-toc-pinned-button").click()
let winbox = document.getElementById("winbox-1")
winbox.className = winbox.className.replace(/\bwinbox\b/, '')
winbox.style.top = "150px"
winbox.style.right = "60px"
// 隐藏临时弹窗
document.getElementById("tippy-1").style.display = "none"
// 添加一个圆形的fixed按钮,点击显示/隐藏目录导航
let button = document.createElement("button")
button.className = "cnblogs-toc-button my-toc-button"
button.title = "显示目录导航"
button.setAttribute("aria-expanded", "true")
document.body.appendChild(button)
// 将按钮移动到winbox的右边
let moveButton = () => {
let winboxRect = winbox.getBoundingClientRect()
let right = window.innerWidth - winboxRect.right
if (right - 60 > 0) {
button.style.right = right - 60 + "px"
button.style.top = winboxRect.top + 20 + "px"
} else {
button.style.right = "10px"
button.style.top = winboxRect.top - 50 + "px"
}
}
moveButton()
// 绑定事件,当winbox被移动时,也移动按钮
let observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
if (mutation.attributeName === "style") {
if (winbox.style.display !== "none") {
moveButton()
}
}
})
})
observer.observe(winbox, {
attributes: true
})
// 绑定按钮点击事件
button.onclick = function () {
if (button.getAttribute("aria-expanded") === "false") {
button.setAttribute("aria-expanded", "true")
button.title = "隐藏目录导航"
winbox.style.display = "block"
} else {
button.setAttribute("aria-expanded", "false")
button.title = "显示目录导航"
winbox.style.display = "none"
}
}
// 隐藏默认的关闭按钮
document.querySelector("#winbox-1 .wb-close").style.display = "none"
}
// 回到顶部按钮
let backToTopButton = document.createElement("button")
backToTopButton.className = "my-toc-button"
backToTopButton.title = "回到顶部"
backToTopButton.style.right = "15px"
backToTopButton.style.bottom = "15px"
backToTopButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12,3L2,12H7V20H17V12H22L12,3Z"></path></svg>'
document.body.appendChild(backToTopButton)
backToTopButton.onclick = function () {
window.scrollTo({
top: 0,
behavior: "smooth"
})
}
</script>
<style>
.my-toc-button {
z-index: 999;
position: fixed;
width: 40px;
height: 40px;
background-color: #fff;
border: none;
outline: none;
cursor: pointer;
opacity: 0.7;
border-radius: 50%;
}
.my-toc-button:hover {
opacity: 1;
}
#winbox-1 {
left: auto;
position: fixed;
box-shadow: 0 14px 28px rgb(0 0 0 / 25%), 0 10px 10px rgb(0 0 0 / 22%);
transition: width .3s, height .3s, transform .3s, opacity .3s;
transition-timing-function: cubic-bezier(.3, 1, .3, 1);
will-change: transform, width, height, opacity;
contain: layout size;
text-align: left;
touch-action: none;
min-height: 35px;
}
</style>
<script type="text/javascript">
(function (window, document, undefined) {
var hearts = [];
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000 / 60);
}
})();
init();
function init() {
css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop() {
for (var i = 0; i < hearts.length; i++) {
if (hearts[i].alpha <= 0) {
document.body.removeChild(hearts[i].el);
hearts.splice(i, 1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
}
requestAnimationFrame(gameloop);
}
function attachEvent() {
var old = typeof window.onclick === "function" && window.onclick;
window.onclick = function (event) {
old && old();
createHeart(event);
}
}
function createHeart(event) {
var d = document.createElement("div");
d.className = "heart";
hearts.push({
el: d,
x: event.clientX - 5,
y: event.clientY - 5,
scale: 1,
alpha: 1,
color: randomColor()
});
document.body.appendChild(d);
}
function css(css) {
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
} catch (ex) {
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
}
})(window, document);
</script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?