博客园自定义主题
博客皮肤
将博客园主题切换为：Custom
完整代码Gitee
博客侧边栏公告
<div id="root" class="ganto">
<i class="time">{{ date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate() + " " + "周" + week[date.getDay()]}}</i>
<div class="links">
<div class="link" v-for="(link, index) in links" :key="index+link">
<span>{{ link.icon }}:</span>
<span>{{ link.link }}</span>
</div>
</div>
</div>
<!-- Vue Start -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script setup>
const { createApp } = Vue
createApp({
data() {
return {
date: new Date(),
week: ["日", "一", "二", "三", "四", "五", "六"],
links: [
{
icon: "GitHub",
link: "https://github.com/gantoho"
},
{
icon: "博客园",
link: "https://www.cnblogs.com/ganto"
}
]
}
},
methods: {
}
}).mount('#root')
</script>
<!-- Vue End -->
页面定制css代码
先将禁用模版默认CSS勾选上
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: MiSans;
}
body {
background-color: #111412;
color: #eeeeee;
width: 100%;
min-width: 320px;
background-image: url(https://www.ganto.cn/static/media/header_bg_img_005.103c0e94a4747f527844.jpg);
background-attachment: fixed;
}
p {
a {
color: #008cff;
&:hover {
color: #ff8c00;
}
}
}
#top_nav {
display: none;
}
#home {
background-color: #00000099;
// backdrop-filter: saturate(1.2) blur(15px);
// -webkit-backdrop-filter: saturate(1.2) blur(15px);
#header {
display: flex;
flex-direction: column;
align-items: center;
// background-image: url(https://www.ganto.cn/static/media/header_bg_img_001.fb46030fcfa5b3593590.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px 10px;
#blogTitle {
text-align: center;
#lnkBlogLogo {
#blogLogo {
width: 100%;
max-width: 140px;
}
}
h1 {
a {
color: #1e90ff;
font-size: 30px;
font-weight: 450;
text-decoration: none;
}
}
h2 {
font-size: 14px;
font-weight: 600;
color: #1e90ff;
}
}
#navigator {
#navList {
list-style: none;
display: flex;
backdrop-filter: saturate(180%) blur(5px);
-webkit-backdrop-filter: saturate(180%) blur(5px);
background: rgba(0, 0, 0, .3);
border-radius: 10px;
font-size: 18px;
font-weight: 400;
margin: 5px 0 10px;
padding: 7.4px 16px;
li {
margin-right: 10px;
position: relative;
white-space: nowrap;
a {
color: #ffa502;
text-decoration: none;
}
}
li:hover {
a {
color: #51ffa4;
}
}
}
.blogStats {
text-align: center;
span {
color: #eeeeee;
font-size: 12px;
}
}
}
}
#main {
#mainContent {
padding: 24px 20px;
.forFlow {
position: relative;
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
.day {
background: #212121;
border-radius: 10px;
margin-bottom: 24px;
overflow: hidden;
padding-bottom: 16px;
.dayTitle {
padding: 10px 16px;
background-color: #7d3030;
a {
color: #ff6b81;
font-size: 20px;
font-weight: 900;
text-decoration: none;
}
}
>div:not([class="postTitle"]):not([class="dayTitle"]) {
padding-left: 16px;
padding-right: 16px;
}
.postTitle {
padding: 8px 16px;
a {
color: #00d2d3;
font-size: 18px;
font-weight: 900;
text-decoration: none;
&:hover {
color: #0069d3;
}
}
}
.postCon {
display: none;
}
.postDesc {
display: none;
span {
display: none;
}
a[rel=nofollow] {
display: none;
}
}
}
.topicListFooter {
margin: 0;
a {
background-color: #212121;
border-radius: 10px;
padding: 5px 10px;
text-decoration: none;
}
}
#post_detail {
#topics {
.post {
.postTitle {
a#cb_post_title_url {
text-decoration: none;
color: springgreen;
span {
&::after {
content: "文章标题";
position: relative;
}
}
}
}
}
}
}
}
}
#sideBar {
#sideBarMain {
>div:not([id="sidebar_news"]) {
display: none;
}
#sidebar_news {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #eeeeee77;
color: #000000;
border-radius: 10px;
padding: 16px;
}
}
}
.extend {
position: sticky;
bottom: 20px;
display: flex;
flex-direction: column;
align-items: flex-end;
row-gap: 12px;
span {
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
background-color: #212121;
font-size: 24px;
cursor: pointer;
box-shadow: 0 0 10px #ffffff20;
}
}
}
#footer {
padding: 0 16px 20px;
text-align: center;
}
}
table {
thead {
color: #332211;
}
}
#cnblogs_post_body th,
.blogpost-body th {
background-color: #00aa8888;
}
.cnblogs-markdown :not(pre, div, td)>code,
.blogpost-body :not(pre, div, td)>code {
vertical-align: bottom !important;
line-height: unset !important;
font-size: 14px !important;
font-weight: 900 !important;
font-family: MiSans !important;
}
pre {
border-radius: 10px;
}
#cnblogs_post_body table,
.blogpost-body table {
background-color: #00aa8840;
}
@media (max-width: 1300px) {
#sideBar {
display: none;
}
}
@media (max-width: 767px) {
#home #header #navigator #navList li:has(#blog_nav_newpost),
#home #header #navigator #navList li:has(#blog_nav_rss) {
display: none !important;
}
#cnblogs_post_body table {
display: table !important;
}
}
@font-face {
font-family: MiSans;
font-weight: 200;
font-display: swap;
src: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-font-service/misans/200/cs.b3288911bd74d032.0.woff2") format("woff2"), url("https://cdn.cnbj1.fds.api.mi-img.com/mi-font-service/misans/200/cs.b3288911bd74d032.0.woff") format("woff"), url("https://cdn.cnbj1.fds.api.mi-img.com/mi-font-service/misans/200/cs.b3288911bd74d032.0.ttf") format("truetype"), url("https://cdn.cnbj1.fds.api.mi-img.com/mi-font-service/misans/200/cs.b3288911bd74d032.0.eot") format("embedded-opentype");
unicode-range: U+20, U+2013-2014, U+2018-2019, U+201c-201d, U+2026, U+3001-3002, U+3008-3011, U+3014-3015, U+4e00, U+4e09-4e0b, U+4e0d-4e0e, U+4e1a, U+4e24, U+4e2a, U+4e2d, U+4e3a-4e3b, U+4e48, U+4e4b, U+4e5f, U+4e86, U+4e8b-4e8c, U+4e8e, U+4e9b, U+4ea7, U+4eba, U+4ec0, U+4ece, U+4ed6, U+4ee5, U+4eec, U+4f1a, U+4f46, U+4f53, U+4f5c, U+4f60, U+4f7f, U+5168, U+516c, U+5173, U+5176, U+519b, U+51fa, U+5206, U+5229, U+5230, U+5236, U+524d, U+529b, U+52a0, U+52a8, U+5341, U+53bb, U+53c8, U+53d1, U+53ea, U+53ef, U+5408, U+540c, U+540e, U+5411, U+548c, U+56e0, U+56fd, U+5728, U+5730, U+5916, U+591a, U+5927, U+5929, U+5934, U+5979, U+597d, U+5982, U+5b50, U+5b66, U+5b83, U+5b9a, U+5b9e, U+5bb6, U+5bf9, U+5c06, U+5c0f, U+5c31, U+5de5, U+5df1-5df2, U+5e74, U+5e76, U+5e94, U+5f00, U+5f53, U+5f88, U+5f97, U+5fc3, U+6027, U+60c5, U+60f3, U+610f, U+6210-6211, U+6216, U+6218, U+6240, U+624b, U+628a, U+653f, U+6587, U+65af-65b0, U+65b9, U+65e0, U+65e5, U+65f6, U+660e, U+662f, U+6700, U+6708-6709, U+672c, U+673a, U+6765, U+679c, U+6837, U+6b63-6b64, U+6c11, U+6ca1, U+6cd5, U+70b9, U+7136, U+7269, U+73b0, U+7406, U+751f, U+7528, U+7531, U+7684, U+76f8, U+770b, U+7740, U+77e5, U+79cd, U+7b2c, U+7b49, U+7ecf, U+7f8e, U+8005, U+800c, U+80fd, U+81ea, U+884c, U+88ab, U+897f, U+8981, U+89c1, U+8bdd, U+8bf4, U+8d77, U+8eab, U+8fc7, U+8fd8-8fd9, U+8fdb, U+9053, U+90a3, U+90e8, U+90fd, U+91cc-91cd, U+957f, U+95ee, U+95f4, U+9762, U+9ad8, U+ff01, U+ff08-ff09, U+ff0c, U+ff0e, U+ff1a-ff1b;
}
以上代码为scss代码，请编译为css代码，再拷贝到 页面定制css代码 中
编译scss文件，可以利用vscode插件 Live Sass Compiler 进行编译
首先安装 Live Sass Compiler，你应该知道怎么安装
安装好后，在vscode最底部（最新版是在最底部）有一个 Watch Sass 选项，点击即可编译sass。
页脚HTML代码
页脚主要是生成，返回顶部和返回底部功能的，可以根据需求选择是否添加。
以下代码使用到了jquery。
<script>
$(function() {
$("#main #mainContent").append(`
<div class="extend">
<span class="top">⬆️</span>
<span class="bottom">⬇️</span>
</div>
`)
$("#main #mainContent .top").click(function() {
document.querySelector("#header").scrollIntoView({behavior: 'smooth', block: 'start', inline: 'start'})
})
$("#main #mainContent .bottom").click(function() {
document.querySelector("#footer").scrollIntoView({behavior: 'smooth', block: 'start', inline: 'start'})
})
$("#home #header #blogTitle #lnkBlogLogo #blogLogo").attr("src", "https://www.ganto.cn/static/media/golang.8755d9b1962aca5b5b48.png")
})
</script>
浙公网安备 33010602011771号