博客园next主题皮肤（cnblogs-theme-next-pro）

Posted 2021-11-09 孙中明

文章目录

• 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/

优化

• 增加后台 管理

---

• 首页归档 布局
  

---

• 分类布局

• 博客版权签名

<table style="background:white; padding: 10px 10px 10px 10px; border: 1px dashed #1b95e0; font-family: 微软雅黑; font-size: 13px;"
    onmousemove="Show(this.offsetLeft,this.offsetTop);" >
    <td >
        🐳  作者：<a href="http://hiszm.cnblogs.com/" target="_blank">hiszm</a> <br />
      
        📢  版权：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，万分感谢。 <br>
       💬  留言：同时 , 如果文中有什么错误，欢迎指出。以免更多的人被误导。 <br>
    </td>
    <td align="right">
        <div id="qr_bg"><img src="https://gitee.com/hiszm/img2021/raw/master//April/wx.png" width="146" ></div>
    </td>
</table>

• 注意后台设置。开多了会扰乱布局

源码

custom.css

/**
   * @author:[e-mail]
   * @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(--t
以上是关于博客园next主题皮肤（cnblogs-theme-next-pro）的主要内容，如果未能解决你的问题，请参考以下文章
 
 自定义博客园主题和自动生成目录
 分享自用博客园主题样式
 GShang博客园主题基础版本适配教程详解
 GShang博客园主题高级版本适配教程详解
 博客园自定义主题样式
 博客主题 Lite