博客自定义css和js
2022/7/30 23:24:18
本文主要是介绍博客自定义css和js，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
页面css
html {
--body-bg: #fff;
--font-color: #454d64;
--border-color: #d8dee4;
--a-color: #4569d4;
--theme: #4569d4;
font-size: 14px;
--max-width: 1320px;
--input-bg: #eaecefbf;
--table-bg: #f9fafb;
--table-border-color: #ebedf1;
--box-shadow: 0 0 12px rgb(0 0 0 / 20%);
}
.html-night {
--body-bg: #242525;
--font-color: #b3ab9e;
--border-color: #3f4141;
--a-color: #6190c6;
--theme: #32498e;
--input-bg: #373737;
--table-bg: #272827;
--table-border-color: #ebedf1;
--box-shadow: 0 0 12px rgb(0 0 0 / 88%);
}
body {
margin: 0;
padding: 0;
background-color: var(--body-bg);
color: var(--font-color);
line-height: 1.6;
font-size: 1rem;
font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue,
PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
input {
outline: 0;
background-color: var(--input-bg);
border: 0;
color: inherit;
}
#home {
padding-top: 56px;
}
#top_nav,
#blogTitle,
.blogStats,
#header {
display: none;
}
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
background: #141414;
color: #9d9d9d;
line-height: 56px;
height: 56px;
}
header > div {
margin: 0 auto;
max-width: var(--max-width);
}
header > div > #blog-nav {
padding: 0 32px;
display: flex;
}
#blog-nav a {
margin-right: 20px;
}
header a:hover {
color: #fff;
}
#main {
box-sizing: border-box;
margin: 0 auto;
max-width: var(--max-width);
display: flex;
align-items: flex-start;
}
#mainContent {
flex: 1;
overflow: hidden;
padding: 1px 32px;
}
#mainContent > .forFlow > div,
#myposts {
padding: 0;
margin: 0;
}
#mainContent > .forFlow > .PostListTitle,
#mainContent .category-block-title,
#mainContent .entrylistTitle {
font-size: 18px;
line-height: 42px;
margin: 0;
padding: 0;
font-style: italic;
text-align: center;
border-bottom: 1px solid var(--border-color);
}
#myposts > .PostList {
margin: 0;
}
#myPosts > div {
margin: 0;
font-size: inherit;
}
#mainContent .dayTitle a {
display: none;
}
.postTitl2 a,
.postTitle2,
.entrylistPosttitle {
display: block;
font-size: 16px;
font-weight: 600;
padding: 16px 0;
}
.c_b_p_desc {
color: #7d7d7d;
}
.day .postDesc,
#myposts .postDesc2,
.entrylistItemPostDesc {
color: #7d7d7d;
padding: 20px 0 14px 0;
border-bottom: 1px solid var(--border-color);
font-size: 1rem;
}
#topics > .post > .postTitle {
margin: 0;
padding: 0;
}
#cb_post_title_url {
font-size: 24px;
font-weight: 500;
padding: 10px 0 !important;
}
#cnblogs_post_body {
border-top: 1px solid var(--border-color);
}
.cnblogs-markdown {
padding-top: 16px;
letter-spacing: 1px;
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
}
.cnblogs-markdown a {
color: var(--a-color);
}
.cnblogs-markdown a:hover {
text-decoration: underline;
}
.cnblogs-markdown p,
.cnblogs-markdown blockquote,
.cnblogs-markdown ul,
.cnblogs-markdown ol,
.cnblogs-markdown dl,
.cnblogs-markdown table,
.cnblogs-markdown pre,
.cnblogs-markdown details {
margin-top: 0 !important;
margin-bottom: 16px !important;
}
.cnblogs-markdown hr {
height: 0.25em;
padding: 0;
margin: 24px 0 !important;
background-color: var(--color-border-default);
border: 0 !important;
}
.cnblogs-markdown blockquote {
padding: 0 1em !important;
border-left: 0.25em solid var(--border-color);
color: inherit;
}
.cnblogs-markdown blockquote > :first-child {
margin-top: 0;
}
.cnblogs-markdown blockquote > :last-child {
margin-bottom: 0;
}
.cnblogs-markdown h1,
.cnblogs-markdown h2,
.cnblogs-markdown h3,
.cnblogs-markdown h4,
.cnblogs-markdown h5,
.cnblogs-markdown h6 {
margin-top: 24px !important;
margin-bottom: 16px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
}
.cnblogs-markdown h1 tt,
.cnblogs-markdown h1 code,
.cnblogs-markdown h2 tt,
.cnblogs-markdown h2 code,
.cnblogs-markdown h3 tt,
.cnblogs-markdown h3 code,
.cnblogs-markdown h4 tt,
.cnblogs-markdown h4 code,
.cnblogs-markdown h5 tt,
.cnblogs-markdown h5 code,
.cnblogs-markdown h6 tt,
.cnblogs-markdown h6 code {
padding: 0 0.2em;
font-size: inherit;
}
.cnblogs-markdown h1 {
padding-bottom: 0.3em;
font-size: 2em;
border-bottom: 1px solid var(--border-color);
}
.cnblogs-markdown h2 {
padding-bottom: 0.3em;
font-size: 1.5em !important;
border-bottom: 1px solid var(--border-color);
}
.cnblogs-markdown h3 {
font-size: 1.25em;
}
.cnblogs-markdown h4 {
font-size: 1em;
}
.cnblogs-markdown h5 {
font-size: 0.875em;
}
.cnblogs-markdown h6 {
font-size: 0.85em;
}
.cnblogs-markdown .hs-item a {
display: none;
}
.cnblogs-markdown .hs-item:hover a {
display: initial;
color: var(--a-color);
text-decoration: none;
}
.cnblogs-markdown .hs-item button {
display: none;
}
.cnblogs-markdown summary h1,
.cnblogs-markdown summary h2,
.cnblogs-markdown summary h3,
.cnblogs-markdown summary h4,
.cnblogs-markdown summary h5,
.cnblogs-markdown summary h6 {
display: inline-block;
}
.cnblogs-markdown summary h1 .anchor,
.cnblogs-markdown summary h2 .anchor,
.cnblogs-markdown summary h3 .anchor,
.cnblogs-markdown summary h4 .anchor,
.cnblogs-markdown summary h5 .anchor,
.cnblogs-markdown summary h6 .anchor {
margin-left: -40px;
}
.cnblogs-markdown summary h1,
.cnblogs-markdown summary h2 {
padding-bottom: 0;
border-bottom: 0;
}
.cnblogs-markdown ul,
.cnblogs-markdown ol {
padding-left: 2em;
}
.cnblogs-markdown ul.no-list,
.cnblogs-markdown ol.no-list {
padding: 0;
list-style-type: none;
}
.cnblogs-markdown ol[type="1"] {
list-style-type: decimal;
}
.cnblogs-markdown ol[type="a"] {
list-style-type: lower-alpha;
}
.cnblogs-markdown ol[type="i"] {
list-style-type: lower-roman;
}
.cnblogs-markdown div > ol:not([type]) {
list-style-type: decimal;
}
.cnblogs-markdown ul ul,
.cnblogs-markdown ul ol,
.cnblogs-markdown ol ol,
.cnblogs-markdown ol ul {
margin-top: 0;
margin-bottom: 0;
}
.cnblogs-markdown li > p {
margin-top: 16px;
}
.cnblogs-markdown li + li {
margin-top: 0.25em;
}
.cnblogs-markdown dl {
padding: 0;
}
.cnblogs-markdown dl dt {
padding: 0;
margin-top: 16px;
font-size: 1em;
font-style: italic;
font-weight: 600;
}
.cnblogs-markdown dl dd {
padding: 0 16px;
margin-bottom: 16px;
}
.cnblogs-markdown table {
display: block;
width: 100%;
width: max-content;
max-width: 100%;
overflow: auto;
border-color: var(--border-color) !important;
}
.cnblogs-markdown table th {
font-weight: 600;
background: var(--input-bg) !important;
}
.cnblogs-markdown th,
.cnblogs-markdown td {
border-color: var(--border-color) !important;
}
.cnblogs-markdown table img {
background-color: transparent;
}
.cnblogs-markdown img {
max-width: 100%;
box-sizing: content-box;
}
.cnblogs-markdown .emoji {
max-width: none;
vertical-align: text-top;
background-color: transparent;
}
.cnblogs-markdown :not(pre, div, td) > code,
.blogpost-body :not(pre, div, td) > code {
background: 0;
font-family: inherit;
font-size: 1em;
padding: 0;
}
.cnblogs-markdown code br,
.cnblogs-markdown tt br {
display: none;
}
.cnblogs-markdown del code {
text-decoration: inherit;
}
.cnblogs-markdown samp {
font-size: 85%;
}
.cnblogs-markdown pre {
position: relative;
padding: 25px 0 !important;
word-wrap: normal;
border-radius: 4px;
}
.cnblogs-markdown pre > .btns-pre {
position: absolute;
right: 2px;
top: 2px;
z-index: 999;
}
.cnblogs-markdown pre > .btns-pre button {
font-size: 12px;
color: #333;
}
.cnblogs-markdown pre > code {
font-size: 14px;
padding: 0 25px !important;
max-height: 700px;
overflow: auto;
white-space: pre-wrap !important;
}
#blog-comments-placeholder > .feedback_area_title {
border-bottom: 1px solid var(--border-color);
padding: 20px 0 6px;
font-size: 18px;
font-weight: 600;
font-style: italic;
}
#blog-comments-placeholder > .feedbackItem {
border-bottom: 1px solid var(--border-color);
padding: 12px 0 8px;
}
.feedbackItem > .feedbackListSubtitle > .feedbackManage {
float: right;
}
.feedbackManage a {
display: inline-block;
color: var(--font-color);
margin-left: 14px;
border-bottom: 1px solid var(--theme);
padding: 0 !important;
line-height: 20px;
}
.feedbackListSubtitle > a {
color: var(--a-color);
}
.feedbackListSubtitle > .layer {
background: var(--theme);
color: #fff;
border-radius: 2px;
padding: 2px 6px;
font-size: 12px;
}
.feedbackListSubtitle > .comment_date {
margin: 0 14px;
font-size: 85%;
}
.feedbackListSubtitle > .feedbackCon {
padding: 16px 0 0;
}
#sideBar {
width: 296px;
overflow-x: hidden;
}
#sideBarMain {
position: fixed;
max-width: 268px;
top: 70px;
z-index: 800;
bottom: 4px;
overflow-y: auto;
}
#sideBar a {
color: inherit;
}
#sideBar a:hover {
color: var(--a-color);
}
#sideBarMain.affix {
top: 70px;
}
#sideBarMain > div {
border-left: 1px solid var(--border-color);
padding-left: 28px;
padding-right: 28px;
}
#profile_block {
margin: 0;
padding: 0;
}
#sideBarMain .catListTitle {
font-size: 14px;
margin: 0;
font-weight: 600;
line-height: 32px;
}
#sideBarMain .catListTitle + * {
margin: 0 0 6px;
}
#sideBarMain .div_my_zzk {
display: flex;
}
#sideBarMain .input_my_zzk {
flex: 1;
min-width: 118px;
width: auto;
}
#sidebar_toptags ul {
display: flex;
flex-wrap: wrap;
}
#sidebar_toptags li {
margin: 0 8px 10px 0;
}
#sidebar_toptags li a {
white-space: nowrap;
display: block;
font-size: 12px;
background-color: var(--input-bg);
padding: 2px 8px;
border-radius: 4px;
}
#sidebar_toptags li a:hover {
color: #fff;
background-color: var(--theme);
}
#toc-container {
margin: 10px 0;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
#toc-container > .toc-top {
padding: 2px 0;
display: flex;
justify-content: space-between;
}
#toc ul {
padding-left: 16px;
}
#toc li {
line-height: 1.8;
}
#toc a {
margin: 2px 0;
}
#toc .active > a {
color: var(--a-color);
border-bottom: 1px solid var(--a-color);
}
#toc .active-last > a {
color: var(--a-color);
border-bottom: 1px solid var(--a-color);
}
#footer {
text-align: center;
padding: 24px;
}
#page_end_html {
max-width: var(--max-width);
margin: 0 auto;
}
#blog-btns {
position: fixed;
z-index: 999;
bottom: 60px;
right: 56px;
bottom: 70px;
}
#blog-btns span {
display: block;
margin-bottom: 10px;
border-radius: 50%;
font-weight: bold;
background: var(--body-bg);
box-shadow: var(--box-shadow);
font-size: 18px;
width: 36px;
height: 36px;
text-align: center;
line-height: 36px;
cursor: pointer;
}
#blog-btns .icon-arrow-up {
display: none;
}
#blog-btns.affix .icon-arrow-up {
display: block;
}
#blog-btns span:hover {
color: #fff;
background: var(--theme);
transition: all 0.2s;
}
#blog-btns > .rotated {
transform: rotate(90deg);
}
页首HTML
<link
rel="stylesheet"
href="https://at.alicdn.com/t/font_2872767_90rgncq7s0u.css"
/>
<header>
<div>
<div id="blog-nav">
<a href="https://www.cnblogs.com/" target="_blank">博客园</a>
<a href="https://www.cnblogs.com/actudou/">首页</a>
<a
id="blog_nav_rss"
class="menu"
href="javascript:void(0)"
data-rss="https://www.cnblogs.com/ctudou/rss/"
>订阅</a
>
<a href="https://msg.cnblogs.com/send/user_2008" target="_blank">联系</a>
<a href="https://i.cnblogs.com/EditPosts.aspx?opt=1" target="_blank"
>新随笔</a
>
<a href="https://i.cnblogs.com/" target="_blank">管理</a>
</div>
</div>
</header>
页脚HTML
<div id="blog-btns" data-spy="affix" data-offset-top="80">
<div>
<span class="iconfont icon-arrow-up"></span>
<span class="iconfont icon-shouqi btn-sidebar"></span>
<span class="iconfont icon-day btn-theme"></span>
</div>
<span class="btn-control rotated iconfont icon-ellipsis"></span>
</div>
<script src="https://files.cnblogs.com/files/blogs/372275/affix-scrollspy.min.js?t=1658853262"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<!-- <script src="https://blog-static.cnblogs.com/files/blogs/372275/affix.min.js?t=1658852259"></script> -->
<!-- <script src="https://blog-static.cnblogs.com/files/blogs/712181/scrollspy.js"></script> -->
<script>
$(document).ready(function () {
$("#blog-btns .icon-arrow-up").on("click", function () {
$("html,body").animate({ scrollTop: 0 });
});
var theme = localStorage.getItem("theme") || "day";
var showSide = true;
if (theme != "day") {
$("html").addClass("html-night");
$("#blog-btns .btn-theme").addClass("icon-night");
}
$("#blog-btns .btn-theme").on("click", function () {
$(this).toggleClass("icon-night");
theme = theme == "day" ? "night" : "day";
$("html").toggleClass("html-night");
localStorage.setItem("theme", theme);
});
$("#blog-btns>.btn-control").on("click", function () {
$(this).toggleClass("rotated").siblings().slideToggle("fast");
});
$("#blog-btns .btn-sidebar").on("click", function () {
$(this).toggleClass("icon-zhankai");
$("#sideBarMain").css({ "max-width": showSide ? "0" : "276px" });
$("#sideBar").animate({ width: showSide ? "0" : "296px", speed: "fast" });
showSide = !showSide;
});
function createLi(el, index) {
return $("<li></li>").html(
$("<a></a>")
.attr("href", "#" + el.textContent)
.text(el.textContent)
);
}
function createToc(selector) {
var hs = $(selector);
if (hs.length === 0) {
return false;
}
var min = {
value: hs[0].tagName[1],
index: 0,
};
hs.each(function (index, el) {
if (el.tagName[1] - min.value < 0) {
min = {
index: index,
value: el.tagName[1],
};
}
});
var arr = [];
var toc = $("<ul></ul>");
var preLevel = ""; //父级序号
var parentLi = ""; //父级li
hs.each(function (index, el) {
var li = createLi(el);
var t = el.tagName[1];
$(el).addClass("hs-item");
if (
t === min.value ||
index === 0 ||
(index < min.index && t === hs[0].tagName[1])
) {
toc.append(li);
arr = [];
preLevel = "";
parentLi = li;
} else {
var r = t - hs[index - 1].tagName[1];
preLevel = arr[0].li.data("level");
if (r === 0) {
arr[0].li.after(li);
preLevel = preLevel.slice(0, preLevel.lastIndexOf("."));
} else if (r > 0) {
arr[0].li.append($("<ul></ul>").append(li));
parentLi = arr[0].li;
} else {
var item = arr.find(function (value) {
return t > value.el.tagName[1];
});
item.li.children("ul").append(li);
preLevel = item.li.data("level");
parentLi = item.li;
}
preLevel += ".";
}
var span = $('<span class="li-level"></span>');
li.data({
level: preLevel + "" + (li.index() + 1),
})
.children("a")
.prepend(span.text(li.data("level") + ". "));
$(el)
.attr("id", el.textContent)
.prepend(span.clone())
.append(
$("<a>#</a>").attr({
href: "#" + el.id,
})
);
// if (parentLi.children("li").length >= 2) {
// var toggle = $('<button class="li-toggle">-</button>');
// parentLi.prepend(toggle);
// toggle.on("click", function () {
// if (toggle.text() == "-") {
// toggle.text("+").siblings("ul").slideUp("fast");
// } else {
// toggle.text("-").siblings("ul").slideDown("fast");
// }
// });
// }
arr.unshift({
el: el,
li: li,
});
// $(el).text(li.data('level')+hs[index].text())
});
return toc;
}
function addPreBtn() {
var pres = $("#cnblogs_post_body pre");
if (pres.length == 0) {
return;
}
pres.each(function (index, el) {
var foldBtn = $(
'<button class="iconfont icon-arrow-down icon-arrow-right cnb-code-toolbar-item">折叠</button>'
);
var code = $(this).children("code");
var copyBtn = $('<button class="btn-copy">复制</button>').attr(
"data-clipboard-text",
code.text()
);
$(el).prepend(
$('<div class="btns-pre"></div>').append(foldBtn).append(copyBtn)
);
foldBtn.on("click", function () {
$(this).toggleClass("icon-arrow-down");
code.slideToggle("fast");
});
var c = new ClipboardJS(copyBtn[0]);
c.on("success", function () {
// copyBtn.removeClass("icon-copy").addClass("icon-check");
copyBtn.text("已复制");
});
c.on("error", function () {
copyBtn.text("复制失败");
});
$(this).mouseleave(function () {
// copyBtn.text("").removeClass("icon-check").addClass("icon-copy");
if (copyBtn.text() == "已复制") {
copyBtn.text("复制");
}
});
});
}
var postId = window.location.pathname.match(/\/p\/(\d+)\./) || null;
if (postId !== null) {
addPreBtn();
var toc = createToc(
"#cnblogs_post_body h2,#cnblogs_post_body h3,#cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6"
);
if (toc !== false) {
toc.addClass("nav").attr("id", "toc");
var container = $(
'<div id="toc-container"><div class="catListTitle toc-top"><div>目录</div><span class="iconfont icon-arrow-down icon-arrow-right"></span></div></div>'
).append(toc);
$("#leftcontentcontainer").prepend(container);
$("body").scrollspy({
target: "#leftcontentcontainer",
offset: 70,
});
var activeLast = $("<div></div>");
// var hideActiveLast = $("<div></div>");
$("#leftcontentcontainer").on("activate.bs.scrollspy", function () {
// activeLast.removeClass("active-last");
// hideActiveLast.removeClass("active-last");
// activeLast = $("#leftcontentcontainer>#toc .active")
// .slice(-1)
// .addClass("active-last");
// hideActiveLast = $("#leftcontentcontainer>.toc-hide .active")
// .slice(-1)
// .addClass("active-last");
});
}
$("#toc-container>.toc-top").on("click", function () {
$("#toc").slideToggle("fast");
$("#toc-container>.toc-top span").toggleClass("icon-arrow-down");
});
}
});
</script>
这篇关于博客自定义css和js的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-29如何在 Vue2 的 uni-app 项目中使用 npm ？-icode9专业技术文章分享
- 2024-12-29uni-app vue2微信小程序项目在哪里打开终端并使用npm？-icode9专业技术文章分享
- 2024-12-29怎么在 uni-app Vue2 项目中全局引入 Vant Weapp？-icode9专业技术文章分享
- 2024-12-29uni-app vue2微信小程序项目如何在main.js中全局引入vant？-icode9专业技术文章分享
- 2024-12-28Vue入门教程：从零开始搭建第一个Vue项目
- 2024-12-28Vue CLI入门指南：快速搭建Vue项目
- 2024-12-28Vue3基础知识入门教程
- 2024-12-28Vue3公共组件开发与使用入门教程
- 2024-12-28Vue CLI学习：新手入门教程
- 2024-12-28Vue CLI学习：轻松入门与实践指南
