#|博客园next主题皮肤（cnblogs-theme-next-pro）
文章目录
- cnblogs-theme-next-pro
-
- 案例
- 优化
- 源码
-
- custom.css
- footer.html
- head.html
cnblogs-theme-next-pro 博客园next主题皮肤
源码地址： https://github.com/hiszm/cnblogs-theme-next-pro
主题在 cnblogs-theme-next 的基础上进行了修改案例 https://hiszm.cnblogs.com/
优化
- 增加后台 管理
文章图片
- 首页归档 布局
文章图片
- 分类布局
文章图片
- 博客版权签名
文章图片
作者：hiszm
版权：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，万分感谢。
留言：同时 , 如果文中有什么错误，欢迎指出。以免更多的人被误导。
文章图片
- 注意后台设置。开多了会扰乱布局
文章图片
源码 custom.css
/**
* @author:me@makergyt.com
* @version:2020-07-01
* @------------------------------------------------------------------
* @update 2021-5-6 https://github.com/hiszm/cnblogs-theme-next-pro
*/
:root {--primary-color:#0566d1;
/* 全局主色*/
--body-bg-color: #f5f7f9;
/*页面背景色*/
--content-bg-color: #fff;
/*页面内容背景色*/
--heading-color: rgba(0, 0, 0, 0.85);
/* 标题色 */
--text-color: #353535;
/*主文本色*/
--text-color-secondary:rgba(0, 0, 0, 0.45);
/*次文本色*/
--text-color-grey:rgba(0, 0, 0, 0.25);
/*失效色，无需关注色*/
--link-color: #555;
/*链接色*/
--code-bg-color:#f0f0f0;
/*代码块背景色*/
}
.header {
margin:0 auto;
position:relative;
width:calc(100% - 20px);
} body {
margin:0;
background:var(--body-bg-color);
color:var(--text-color);
line-height:2;
} a {
color:var(--link-color);
text-decoration:none;
} #main {
align-items:flex-start;
display:flex;
justify-content:space-between;
flex-direction:row-reverse;
margin:0 auto;
width:calc(100% - 20px);
} #page_begin_html {
margin:0 auto;
position:relative;
} .header-inner {
background:#fff;
border-radius:initial;
box-shadow:initial;
overflow:hidden;
padding:0;
position:absolute;
top:0;
width:240px;
margin:0 auto;
} .site-brand-container {
background:var(--primary-color);
display:flex;
flex-shrink:0;
padding:0 10px;
} .site-meta {
padding:20px 0;
flex-grow:1;
text-align:center;
} .brand {
color:#fff;
display:inline-block;
padding:0 40px;
position:relative;
} .site-title {
font-family:'Times New Roman',sans-serif;
font-size:1.375em;
font-weight:400;
margin:0;
line-height:1.5;
} .menu {
margin-top:20px;
padding-left:0;
} .menu .menu-item {
display:block;
margin:0;
list-style:none;
} .search-wrap {
display:inline-block;
background-color:var(--code-bg-color);
border-radius:20px;
padding:0 10px;
} .input_my_zzk {
width:140px;
vertical-align:middle;
background-color:var(--code-bg-color);
height:30px;
border:none;
outline:none } .site-nav-right,.site-nav-toggle {
display:none;
} .site-nav-right .toggle,.site-nav-toggle .toggle {
padding:10px;
width:22px;
color:#fff;
} .site-nav-right .toggle a .fa {
color:#fff;
} .toggle {
line-height:0;
} .site-nav-right .toggle .toggle-line,.site-nav-toggle .toggle .toggle-line {
background:#fff;
border-radius:1px;
} .toggle.toggle-close .toggle-line-first {
transform:rotate(-45deg);
top:5px;
} .toggle.toggle-close .toggle-line-middle {
opacity:0;
} .toggle.toggle-close .toggle-line-last {
transform:rotate(45deg);
top:-5px;
} .toggle .toggle-line {
display:inline-block;
height:2px;
left:0;
position:relative;
top:0;
transition:all .4s;
vertical-align:top;
width:100%;
} .toggle .toggle-line:not(:first-child) {
margin-top:3px;
} .site-nav.site-nav-on {
display:block;
} .site-nav .menu-item-active {
border-right:3px solid var(--primary-color);
background:var(--body-bg-color);
} .site-nav .menu-item .menu-item-inner {
color:#555;
font-size:16px;
padding:5px 20px;
position:relative;
text-align:left;
display:block;
line-height:2;
} .site-nav .menu-item .menu-item-inner .fa {
color:#69c0ff;
margin-right:8px;
} #sideBar {
margin-top:300px;
position:static;
width:240px;
background:#fff;
margin-right:12px;
/*?*/ } .affix {
position:fixed;
top:0;
} #post-toc-wrap {
background:var(--content-bg-color);
width:240px;
} #post-toc-wrap ol {
font-size:14px;
line-height:1.8;
list-style:none;
padding:0 2px 5px 10px;
} .back-to-top {
background: var(--body-bg-color);
margin: 0 auto;
cursor: pointer;
text-align: center;
font-size: 12px;
color: var(--text-color);
} #author_profile_detail {
margin-left:10px;
font-size:14px;
} #author_profile_detail a {
color:var(--text-color-secondary);
} .author_avatar,.site-author-image {
border-radius:50%;
} .site-author-image {
border:1px solid #eee;
display:block;
margin:20px auto 0;
max-width:80px;
padding:2px;
} .site-author-name {
color:var(--text-color);
font-weight:600;
margin:10px 0 0;
text-align:center;
} .site-state {
margin:10px auto;
text-align:center;
color:var(--text-color);
} .links-of-author {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
justify-content: center;
} .links-of-author-item {
margin: 5px 0 0;
} .links-of-author a{
font-size: 16px;
padding: 0 5px;
} .links-of-author a .fa-envelope {
color: #e4b56b;
} .links-of-author a .fa-rss {
color: #fa541c;
} #mainContent {
background:var(--content-bg-color);
box-sizing:border-box;
padding:40px;
width:calc(100% - 252px);
} .forFlow {
padding-top:20px;
} .day {
margin-bottom:60px;
} .dayTitle {
display:none;
} .postTitle {
font-size:27px;
font-weight:400;
line-height:1.5;
text-align:center;
word-wrap:break-word;
color:var(--link-color);
} .postCon {
font-family:'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif;
word-wrap:break-word;
margin:.5em 0;
} .c_b_p_desc_readmore {
color:var(--primary-color);
} .c_b_p_desc {
line-height:2;
} .postDesc {
text-align:right;
font-style:italic;
font-size:14px;
color:var(--text-color-grey);
} .postDesc a {
color:var(--text-color-grey);
} #cnblogs_post_description {
font-family:'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif;
color:var(--text-color);
} #post-description-meta {
line-height:4;
text-align:center;
font-size:18.667px;
font-weight:500;
color:var(--heading-color);
font-family:SimHei,'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif;
} #post-keyword {
color:var(--text-color);
font-family:'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif;
} #post-keyword a {
font-family:'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif;
} #cnblogs_post_body p {
font-family:'Noto Serif SC','Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif;
} #cnblogs_post_body h3 {
padding-top:10px;
font-size:18.667px;
font-weight:500;
color:var(--heading-color);
font-family:SimHei,'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif;
} #cnblogs_post_body h4,#cnblogs_post_body h5,#cnblogs_post_body h6 {
padding-top:10px;
font-size:16px;
font-weight:500;
color:var(--heading-color);
font-family:SimHei,'Times New Roman',"PingFang SC","Microsoft YaHei",sans-serif;
} #cnblogs_post_body h2 {
padding-top:10px;
text-align:center;
font-size:21.333px;
margin:1em auto;
font-weight:500;
line-height:2em;
color:var(--heading-color);
} .postBody blockquote {
border:none;
border-left:4px solid #ddd;
color:var(--text-color-secondary);
margin:0;
padding:0 15px;
} .postBody p > a {
text-decoration:underline;
} #cnblogs_post_body table {
border-collapse:collapse;
border-spacing:0;
font-size:.875em;
margin:0 auto;
max-width:100%;
width:auto;
border:none;
border-top:2px solid #222;
border-bottom:2px solid #222;
} #cnblogs_post_body table thead {
border-bottom:1px solid #999;
} #cnblogs_post_body table tr {
overflow-x: scroll;
overflow-y:hidden;
text-align:justify;
word-break:keep-all;
} #cnblogs_post_body table td,#cnblogs_post_body table th {
padding:4px 8px;
width:150px;
border:none;
} .cnblogs-markdown code {
background-color:var(--code-bg-color) !important;
border:none !important;
font-weight: 300;
} .cnblogs-markdown .hljs {
font-size:14px !important;
padding:10px !important;
} #cnblogs_post_body img {
display:block;
margin:0 auto;
} .footnotes-meta {
margin:2em 0 0 0;
} .github-corner svg {
border:0;
color:#fff;
fill:var(--primary-color);
position:absolute;
right:0;
top:0;
z-index:1000;
} .github-corner:hover .octo-arm {
animation:octocat-wave 560ms ease-in-out;
} @keyframes octocat-wave {
0%,100% {
transform:rotate(0);
} 20%,60% {
transform:rotate(-25deg);
} 40%,80% {
transform:rotate(10deg);
} } /*share*/ #div_digg{
filter: grayscale();
margin-right: 0;
margin-top: 0;
} #blog_post_info {
display: flex;
justify-content: space-between;
} #author_profile {
width:auto;
} #green_channel {
display: none;
} /*pre-next*/ .post_next_prev {
line-height: 1.5;
display: flex;
justify-content: space-between;
border-top: 1px solid #e8e8e8;
border-bottom: 1px solid #e8e8e8;
} .post_next_prev >div {
width: 50%;
padding: 0 12px;
} .next-block,.next a {
text-align: right;
} .pre-block a,.next-block a {
display: inline-block;
padding: 32px 0;
} .post_next_prev_label {
margin-bottom: 8px;
font-size: 14px;
color: var(--text-color-grey);
} /*comment*/ .comment_textarea {
padding:15px;
border-radius:10px;
outline:0;
resize:none;
overflow:hidden;
width:100%;
} .feedback_area_title, #commentform_title {
font-size: 14px;
line-height: 32px;
color: var(--text-color-secondary);
padding: 10px 0;
background: none;
} .feedbackItem {
position: relative;
padding: 16px 0 16px 60px;
font-size:14px;
} .feedbackAvatar {
position: absolute;
left: 1px;
} .feedbackAvatar img {
border-radius: 50%;
width:40px;
height: 40px;
} .feedbackManage {
text-align: right;
float: right;
} .feedbackManage a, .comment_vote a {
color: var(--text-color-secondary);
} .layer {
display: none;
} [id^=a_comment_author_] {
float: left;
} .louzhu {
background-color: var(--primary-color);
color: #fff;
line-height: 28px;
padding: 3px;
border-radius: 3px;
} .comment_date {
color: var(--text-color-grey);
font-size: 12px;
padding-left: 16px;
} .commentbox_tab {
margin-right: 0;
padding: 8px 16px;
font-size: 14px;
line-height: 23px;
color: var(--text-color-secondary);
border: 1px solid var();
border-bottom: 0;
} .commentbox_tab:hover, .commentbox_tab.active {
color: var(--text-color);
border-bottom: none;
} .commentbox_tab.active {
border-radius: 6px 6px 0 0;
border: 1px solid #e1e4e8;
border-bottom: none;
} div.commentform textarea, #tbCommentBodyPreview{
min-height: 250px;
padding: 8px 0;
} #commentbox_opt {
text-align: right;
} #commentbox_opt>a,#btn_comment_submit, #span_comment_canceledit{
width:auto;
height: 34px;
color: var(--text-color-secondary);
padding: 5px 16px;
font-size: 14px;
line-height: 20px;
} #btn_comment_submit {
background-color: var(--primary-color);
color: #fff;
border-radius: 6px;
border:1px solid rgba(27,31,35,.15);
} #comment_form_container p {
color: var(--text-color-secondary);
} #footer {
color:var(--text-color-grey);
font-size:.875em;
line-height:28px;
padding-left:260px;
box-sizing:border-box;
margin:0 auto;
text-align:center;
width:calc(100% - 20px);
} #header,.catListTitle,#profile_block,#under_post_news,#ad_t2,.c_ad_block,#under_post_kb,#comment_nav {
display:none;
} /*mypost*/ #myposts .PostList {
font-size: 18.667px;
color: var(--heading-color);
line-height: 2;
} #myposts .postDesc2 {
font-size: 14px;
color: var(--text-color-secondary);
text-align: right;
} /* Responsive design*/ @media (min-width:1600px) {
#main,.header {
width:73%;
} } @media (min-width:1200px) {
#main,.header {
width:1160px;
} .header-inner {
width:240px;
} } @media (max-width:991px) {
.header,.header-inner,.main-inner,#footer {
width:auto;
} .header-inner {
border-radius:initial;
position:relative;
} #sideBar,#post-toc-wrap,.github-corner {
display:none;
} #mainContent {
border-radius:initial;
padding:16px;
width:100%;
} .site-brand-container {
box-shadow:0 0 16px rgba(50,132,191,.9);
} #footer {
padding-left:0;
padding-right:0;
} } @media (max-width:991px) and (min-width:768px) {
.site-nav-right,.site-nav-toggle {
display:flex;
flex-direction:column;
justify-content:center;
} .site-nav {
display:none;
} } @media (max-width:767px) {
.site-nav {
clear:both;
display:none;
} .site-nav-right,.site-nav-toggle {
display:flex;
flex-direction:column;
justify-content:center } .feedbackAvatar img {
width:32px;
height: 32px;
} .feedbackItem {
padding-left: 40px;
} .commentform {
margin-left: 0;
} }#bannerbar{display:none;
}.entrylistPosttitle{display: block;
text-align: left;
border-bottom: 3px solid var(--primary-color);
}.entrylistItem{margin-top:20px;
}.entrylistPostSummary{margin:10px 0 10px 0;
}#sidebar_categories{border-top: 1px solid var(--primary-color);
border-bottom: 3px solid var(--primary-color);
background: #ffffff;
}PostsList1_rpPosts_TitleUrl_2#sidebar_toptags{border-right: 3px solid var(--primary-color);
background: var(--body-bg-color);
}.postTitle2{display: block;
text-align: left;
border-bottom: 3px solid var(--primary-color);
}
.vertical-middle{display: block;
text-align: left;
border-bottom: 3px solid var(--primary-color);
}.catListTag ul li{list-style:none;
}footer.html
>
/**
* @author:me@makergyt.com
* @version:2020-07-01
* @------------------------------------------------------------------
* @update 2021-5-6 https://github.com/hiszm/cnblogs-theme-next-pro
*/
window.config = {avatar: 'https://pic.cnblogs.com/avatar/1170988/20210329201859.png',
github: 'hiszm',
gallery: '1833698'
}
src="https://cdn.jsdelivr.net/gh/djyde/ToProgress/ToProgress.min.js">
type="text/javascript">
let progressBar = new ToProgress({color: getComputedStyle(document.documentElement).getPropertyValue('--primary-color')
})
progressBar.reset()
// 如未做大幅修改，请保留下方内容
$('#poweredby').append('
&
cnblogs-theme-next-pro')
// 获取默认基础信息
window.isPost = $('.forFlow').find('#post_detail').length ? true : false;
window.blogSlug = currentBlogApp;
var footerOverTestArray = $($("#footer")[0].childNodes[2]).text().trim().split(" ");
config = Object.assign({siteTitle: $('#Header1_HeaderTitle').text(),
author: footerOverTestArray[footerOverTestArray.length - 1],
avatar: $('.author_avatar').attr('src'),
github: blogSlug,
gallery: null
}, config);
var linkObject = document.createElement("link");
linkObject.rel = "shortcut icon";
linkObject.href = https://www.it610.com/article/config.avatar;
// 设置摘要
function setDesc() {$('#cnblogs_post_description').css('display', 'block')
$('#cnblogs_post_description').prepend('摘 要
')
// 由于标签是网络请求，可能在修改dom后返回，故重新请求后再修改
$.ajax({url: getAjaxBaseUrl() + "CategoriesTags.aspx",
type: "get",
contentType: "application/json;
charset=utf-8",
data: {blogId: cb_blogId,
postId: cb_entryId,
},
cache: !1,
dataType: "text",
timeout: 1e4,
success: function (n) {n && $("#cnblogs_post_description").append(n.replace('EntryTag', 'post-keyword').replace('标签', '关键词'))
$('#EntryTag').remove()
}
})
}
// 设置参考文献标题
function setFoot() {$('.footnotes').prepend('参 考 文 献')
}
// 设置左侧目录
function setContent() {if ($('#post-toc-wrap').length) return;
var toc = $('目录
')
$('#blog-news').prepend(toc)
var captions_ori = $("#cnblogs_post_body h2"),
captions_ori2 = $("#cnblogs_post_body h3"),
captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
content = $("
");
toc.append(content.append(captions));
toc.append('
0%')var index = -1, index2 = -1;
captions.replaceWith(function () {var self = this;
if (self.tagName == "H2" || self.tagName == "h2") {// 设置点击目录跳转
index += 1;
$(' + '_caption_' + index + '">').insertBefore(captions_ori[index]);
return ' + index + '">' + self.innerHTML + '
';
} else {index2 += 1;
$(' + '_caption' + index2 + '">').insertBefore(captions_ori2[index2]);
$("#" + index + "li ol").append(" + index2 + "' style='color:#5f5f5f;
'>" + self.innerHTML + " ");
return;
}
});
}
// 滚动至顶部
function toScroll(endScroll, time) {$('html,body').stop().animate({
scrollTop: endScroll }, time);
}
function onScroll() {// 上拉至指定位置贴顶
var oldScrollNum = 0;
window.onscroll = function () {var t = document.documentElement.scrollTop || document.body.scrollTop;
if (t > oldScrollNum) {if (t > 135) {$('.site-author').remove()
$('#sidebar_categories').hide()
setContent()
}
if (t > 270) {$("#post-toc-wrap").addClass("affix");
}
} else {if (t <= 135) {$('#post-toc-wrap').remove()
$('#sidebar_categories').show()
setAuthor()
}
if (t <= 270) {$("#post-toc-wrap").removeClass("affix");
}
}
oldScrollNum = t;
// 滚动条
var docHeight = $(document).height(),
windowHeight = $(window).height(),
scrollPercent = (t / (docHeight - windowHeight)) * 100;
progressBar.setProgress(scrollPercent);
$('#btc-persent').replaceWith('' + scrollPercent.toFixed() + '%')
}
}
function setAuthor() {if ($('.site-author').length) return;
var siteAuthor = $('
文章图片
' + config.author + '
');
siteAuthor.append('' + $('.blogStats').html() + '')
var links = $('')
links.append('+ config.author+'">'
+'+blogSlug+'/rss/" data-rss="https://www.cnblogs.com/'+blogSlug+'/rss/" style="display: inline !important;
">')
$('#blog-news').prepend(siteAuthor.append(links))
}
// 设置导航区
function setNav() {var url = window.location.href;
$('.brand').attr('href', '/' + blogSlug)
$('.site-title').text(config.siteTitle)
$('.menu-item-home a:first').attr('href', '/' + blogSlug)
$('.menu-item-archives a:first').attr('href', '/' + blogSlug+'/p')
if(config.gallery) {$('.menu-item-gallery a:first').attr('href', '/' + blogSlug+'/gallery/'+config.gallery+'.html')
$('.menu-item-gallery').css('display','block')if(/gallery/.test(url)){$('.menu-item-home').removeClass('menu-item-active')
$('.menu-item-gallery').addClass('menu-item-active')
}
}if(/(\/p)$/.test(url)) {$('.menu-item-home').removeClass('menu-item-active')
$('.menu-item-archives').addClass('menu-item-active')
}
}// 设置右上角github跳转链接
function setGithub() {$('.github-corner').attr('href', 'https://github.com/' + config.github)
}
// 在响应式设计中，菜单折叠打开事件
function setToggle() {document.querySelector('.site-nav-toggle .toggle').addEventListener('click', () => {event.currentTarget.classList.toggle('toggle-close');
var e = document.querySelector('.site-nav'),
t = e.classList.contains('site-nav-on') ? 'slideUp' : 'slideDown';
'function' == typeof Velocity ? Velocity(e, t, {duration: 200,
complete: function () {e.classList.toggle('site-nav-on')
}
}) : e.classList.toggle('site-nav-on')
});
}
function setCommentStyle() {let t = $(".feedbackItem");
if (t.length > 0) {$.each(t, function (t) {let e = $(this)
, n = e.find(".feedbackCon")
, o = e.find(".feedbackListSubtitle")
, i = n.length ? n.find(".blog_comment_body") : []
, s = ""
, a = i.length ? i.attr("id").split("_") : void 0;
if (a && a.length > 0) {let t = a[a.length - 1]
, n = t.toString().match(/[0-9]/g);
$.isArray(n) && (t = n.join(""));
let o = $("#comment_" + t + "_avatar")
, i = o.length > 0 ? $.trim(o.text()) : "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/default_avatar.webp"
, l = $("#a_comment_author_" + t)
, c = l.length ? l.attr("href") : "javascropt:void(0);
";
s = ' + c + '" target="_blank">
文章图片
',
e.prepend(s)
}
o.length && o.find(".louzhu").length && o.addClass("feedbackListSubtitle-louzhu")
})
}
}
function setPreNext() {var pnp = $("#post_next_prev a");
if(!pnp.length) return;
var cont = $('#post_next_prev').text();
var wrapper = $('')
$("#post_next_prev").replaceWith(wrapper)
var pre = $('+pnp[1].href+'">◄上一篇'+pnp[1].innerText+'')if(pnp.length>2){$('.pre-block').append(pre)
var next = $('+pnp[3].href+'">下一篇►'+pnp[3].innerText+'')
$('.next-block').append(next)
} else {if(/上一篇/.test(cont)) {$('.pre-block').append(pre)
} else if(/下一篇/.test(cont)) {var next = $('+pnp[1].href+'">下一篇►'+pnp[1].innerText+'')
$('.next-block').append(next)
}
}
}
setGithub();
setToggle();
setNav();
setTimeout(() => {setAuthor();
}, 500);
// 只对文章页
if (isPost) {setFoot();
// 由于加载需要时间故增加延时后操作
setTimeout(() => {setDesc();
setPreNext();
onScroll();
}, 500);
setTimeout( () => {setCommentStyle()
}, 1000)
}
head.html
width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
class="toggle-line toggle-line-first"> class="toggle-line toggle-line-middle"> class="toggle-line toggle-line-last">
推荐阅读
- 全过程工程咨询——时间管理（12）
- Python（pathlib模块）
- 2019年《家庭中的正面管教》作业七
- 参加讲师训练营逐字稿-第1天
- 贪吃让我看到内在有很深伤痛
- 财富背后的智慧
- 宜摇滚
- 觉察日记（吃撑了）
- 菠萝派~每天早餐不重样
- 分离是亲与子之间的主题曲