博客園簡約主題simple-color

寫在前面

本款主題是基於@esofar的silence主題，稍加更改完成。喜歡主題的極簡風，同時也適配了許多個性化的東西，所以，主題總體基本沒有任何的優化，代碼凌亂，本不想放出，畢竟代碼混亂，毫無邏輯可言，近期有許多小伙伴想要這一套主題，特此放出。不當之處定會有許多，請多擔待。同時也部分參考了GShang學長的博客，特表感謝。

功能簡介

• 移動端適配
• 極簡白，夜間黑，清新透明，玻璃磨砂 四種主題模式自動切換
• 音樂播放器
• 圖片燈箱
• 文章自動目錄生成

主題預覽

動態預覽

會思考的魚兒
兮雨祈蘇
東北小蟹蟹
還在美化博客嗎？試試一鍵更換博客主題吧！
蘿卜小兔子頭

極簡白

個人比較喜歡的一個樣式，極簡風。

夜間黑

不能算是博客的一種主題，你可以理解為夜間模式。

清新透明

喜歡極致色彩的朋友。

玻璃磨砂

毛玻璃磨砂質感。

主題部署

一鍵部署

如果你想快速搭建出和本博客一樣的主題樣式，請查看下面這句說明。當然，前提是你得有 js權限
如果想部署和當前博客一樣的樣式。直接下載整個主題，下載地址 見文章末尾。把頁腳，頁首，側邊欄的代碼粘貼到你的博客后台，然后** 更改一下其中的文件鏈接地址 **即可。

重要：源代碼中的文件地址均是舉例使用，並非文件真實地址，比如這個地址：https://example.com/simple-color.js 這個地址只是為了舉例用法，這樣並未真正的將simple-color.js 引入博客。若想真正引入，需要先把simple-color.js 在博客后台上傳，然后右鍵復制文件的真實地址才行，比如：https://files.cnblogs.com/files/yjlaugus/simple-color.js 。其余的css 文件也是同樣的用法，這里不再舉例。因為看到很多人部署的博客這個地址是都有更換的，所以特此說明。所有的css,js文件都已經上傳，地址在文章末尾。

下面的部署文檔只為了個性化定制而寫，如果你想個性化的定制博客主題，請接着往下看，

基本部署

• 前提：已經開通js權限，沒開通的可以向博客園官方申請開通。

• 引入文件

可以放在頁腳。

  <script src="https://example.com/simple-color.js"></script>

• 引入樣式

  把simple-color.css中的代碼粘貼在自定義css樣式中。

• 選擇模板

  具體的設置如下圖。

• 頭部菜單設置

把下面鏈接中的地址換成你自己的文章或者隨筆的地址就好。下面函數在simple-color.js文件中。

  function() {
                  var e = this,
                  t = p(this.cnblogs.blogTitle).find("h1 a").html(),
                  a = p(this.cnblogs.publicProfile).find("a:eq(0)").html(),
                  o = p("head").find("title");
                  //o.html(o.html().replace(a + " - 博客園", "" + t));
                  var n = p(this.cnblogs.navList);
  				n.find("li").eq(1).after('<li><a id="blog_nav_tags" class="menu" href="https://www.cnblogs.com/' + currentBlogApp + '/tag">標簽</a></li>'),
  				n.find("li").eq(2).after('<li><a id="blog_nav_tags" class="menu" href="https://www.cnblogs.com/yjlaugus/p/7705340.html ">關於</a></li>'),
  				n.find("li").eq(3).after('<li><a id="blog_nav_tags" class="menu" href="https://www.cnblogs.com/yjlaugus/articles/weibo.html">微語</a></li>'),
  				n.find("li").eq(4).after('<li><a id="blog_nav_tags" class="menu" href="https://www.cnblogs.com/yjlaugus/p/7857317.html ">投喂</a></li>'),
  				n.find("li").eq(5).after('<li><a id="blog_nav_tags" class="menu" href="https://www.cnblogs.com/yjlaugus/p/8724650.html">友鏈</a></li>'),
                  p.each(n.find("li"),
                  function(e, t) {
                      p(t).append("<i></i>")
                  }),
                  p("body").prepend('<div class="esa-mobile-menu"></div>'),
                  p(".esa-mobile-menu").on("click",
                  function() {
                      p(e.cnblogs.navigator).fadeToggle(200)
                  })
              }

這樣一個主題基本完成，如果想加其余的功能，接着往下看。

• 腳本設置

  為了提高園友的閱讀體驗，主題在博客園原有功能基礎上追加了一些輔助閱讀、以及人性化的功能模塊。其中部分模塊做了參數配置，用戶可根據自己意願選擇是否啟用。若啟用，再根據自己的信息或寫作習慣設置相關參數。進入『設置』界面，將如下腳本代碼引用 追加 到「博客側邊欄公告」文本域中，其中配置參數根據下表自行修改。這個配置是來自silence部署文檔。

  <!-- 放在側邊欄-->
  <script type="text/javascript">
      $.silence({
          profile: {
              enable: true,
              avatar: '',
              favicon: 'https://files-cdn.cnblogs.com/files/yjlaugus/favicon.ico',
          },
          catalog: {
              enable: true,
              move: true,
              index: true,
              level1: 'h2',
              level2: 'h3',
              level3: 'h4',
          },
          signature: {
              enable: true,
              home: 'https://yjlaugus.cnblogs.com/',
              license: 'CC BY 4.0',
              link: 'https://creativecommons.org/licenses/by/4.0'
          },
         reward: {
              enable: true,
              title: '『一鍵投喂 軟糖/蛋糕/布丁/牛奶/冰闊樂！』',
              wechat: 'https://www.cnblogs.com/images/cnblogs_com/yjlblog/1280680/o_wx_zfx.png',
              alipay: 'https://www.cnblogs.com/images/cnblogs_com/yjlblog/1280680/o_zfb_zfx.png',
          },     
          github: {
              enable: false,
              color: '#fff',
              fill: null,
              link: 'https://github.com/YJLAugus/'
          }
      });
  </script>
  
  

  <!--隨筆發布信息 放在側邊欄-->
  <script>
  if ($("#topics")!=null){
  $("#cnblogs_post_body").before("<p class='publishinfo'><img src='https://img.shields.io/badge/Post-"+$("#post-date").text().replace(/\-/g,"--").replace(/\ /g,"%20").replace(/\:/g,"%3A")+"-blue'/>"+
  
  "<img src='https://img.shields.io/badge/Read-" + $("#post_view_count").text() + "-red'/>" +
  
  "<img src='https://img.shields.io/badge/Comment-" + $("#post_comment_count").text() + "-green'/><br/>" +
   $("#BlogPostCategory").html() + $("#EntryTag").html() +"</p>")
  }
  </script>
  
  <!--首頁排版調整 放在側邊欄-->
  <script>
  for(i=0;i<=$(".desc_img").length;i++){
  $(".desc_img").eq(i).insertBefore($(".postTitle").eq(i));
  $(".postDesc").eq(i).insertAfter($(".day .postTitle").eq(i));
  }
  for(i=0;i<=$(".entrylistPostSummary").length;i++){
  $(".desc_img").eq(i).insertBefore($(".entrylistPosttitle").eq(i));
  $(".entrylistItemPostDesc").eq(i).insertAfter($(".entrylistPosttitle").eq(i));
  }
  </script>

配置參數說明表：

模塊	屬性	說明	類型	默認值
base（基礎信息）	avatar	博主頭像	String	null
favicon	網頁標題圖標	String	null
catalog（博文目錄）	enable	是否啟用	Boolean	false
move	是否允許拖拽	Boolean	true
index	是否顯示索引	Boolean	true
level1	一級標題	String	h2
level2	二級標題	String	h3
level3	三級標題	String	h4
signature（博文簽名）	enable	是否啟用	Boolean	false
auther	作者名字	String	[Blog Nickname]
home	作者主頁	String	https://www.cnblogs.com
license	許可證名稱	String	CC BY 4.0
link	許可證鏈接	String	https://creativecommons.org/licenses/by/4.0
sponsor（博文贊賞）	enable	是否啟用	Boolean	false
text	標題	String	Sponsor
paypal	PayPal 收款地址	String	null
alipay	支付寶收款二維碼	String	null
wechat	微信收款二維碼	String	null
github（GitHub Corners）	enable	是否啟用	Boolean	false
fill	背景填充色	String	[Silence Theme Color]
color	章魚貓顏色	String	#fff
link	Github 鏈接	String	null

配置完成后，記得點擊「保存」按鈕，保存上述操作。

• 補充說明

  進入『設置』界面，在「標題」文本框中設置博客標題，注意不支持顯示「子標題」；在「博客皮膚」處選擇博客園官方標准模板 Custom；把「禁用模板默認CSS」復選框取消勾選。最后，點擊「保存」按鈕保存上述 3 步操作。

  進入『選項』界面，在「控件顯示設置」中需要勾選的博客園官方功能模塊如下幾個：

  • 必須要勾選：公告、我的標簽、隨筆分類、閱讀排行榜、推薦排行榜
  • 自定義勾選：博客園鏈接、首頁鏈接、RSS訂閱、聯系

  其他模塊取消勾選(可選操作)。最后，點擊「SAVE」按鈕保存操作。

個性定制

博客自動更換主題

實現四種主題樣式自定義切換。點擊博客左上角的 試試看！當然，如果你還不滿足於現在的主題樣式，可以自己定制自己的主題樣式，詳細請轉看文章還在美化博客嗎？試試一鍵更換博客主題吧！

<!--主題切換 放在側邊欄-->
<script>
	$('.fa.fa-cog.fa-spin.fa-lg').click(function () {
	    $(this).closest('.float-btn-group').toggleClass('open');
	});
</script>

<!--主題切換放在側邊欄-->
<script>

function switchNightMode(){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(night == '0'){
        document.body.classList.add('night');
        document.cookie = "night=1;path=/"
        console.log('夜間模式開啟');
    }else{
        document.body.classList.remove('night');
        document.cookie = "night=0;path=/"
        console.log('夜間模式關閉');
    }
}

(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 22 || new Date().getHours() < 6){
            document.body.classList.add('night');
            document.cookie = "night=1;path=/";
            console.log('夜間模式開啟');
        }else{
            document.body.classList.remove('night');
            document.cookie = "night=0;path=/";
            console.log('夜間模式關閉');
        }
    }else{
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(night == '0'){
            document.body.classList.remove('night');
        }else if(night == '1'){
            document.body.classList.add('night');
        }
    }
})();

</script>

<script>

function switchModelMode(){
    var model = document.cookie.replace(/(?:(?:^|.*;\s*)model\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(model == '0'){
        document.body.classList.add('model');
        document.cookie = "model=1;path=/"
        console.log('皮膚模式開啟');
    }else{
        document.body.classList.remove('model');
        document.cookie = "model=0;path=/"
        console.log('皮膚模式關閉');
    }
}


function switchModelErcyMode(){
    var modelercy = document.cookie.replace(/(?:(?:^|.*;\s*)modelercy\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(modelercy == '0'){
        document.body.classList.add('modelercy');
        document.cookie = "modelercy=1;path=/"
        console.log('皮膚模式開啟');
    }else{
        document.body.classList.remove('modelercy');
        document.cookie = "modelercy=0;path=/"
        console.log('皮膚模式關閉');
    }
}

(function(){
    
        var modelercy = document.cookie.replace(/(?:(?:^|.*;\s*)modelercy\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(modelercy == '0'){
            document.body.classList.remove('modelercy');
        }else if(modelercy == '1'){
            document.body.classList.add('modelercy');
        }
    
})();

(function(){
    var model = document.cookie.replace(/(?:(?:^|.*;\s*)model\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(model == '0'){
            document.body.classList.remove('model');
        }else if(model == '1'){
            document.body.classList.add('model');
        }
  
})();
</script>

<!--主題切換放在頁腳-->
<section class="model-3"> 		  
<div class="float-btn-group"> 		     
	<i class="fa fa-cog fa-spin fa-lg "></i> 				
	<div class="btn-list"> 	
		<a href="javascript:void(0);" onclick="switchNightMode()" class="btn-float yellow"><i class="fa fa-moon-o"></i></a> 
		<a href="javascript:void(0);" onclick="switchModelMode()" class="btn-float blue"><i class="fa fa-heart-o"> </i></a>
		<a href="javascript:void(0);" onclick="switchModelErcyMode()"class="btn-float green"><i class="fa fa-heart"></i></a>
		<a href="https://i.cnblogs.com/" class="btn-float pink"><i class="fa fa-user"></i></a>
	</div>
</div>
</section >

<!-- 主題切換按鈕樣式 放在頁首 -->
<link rel="stylesheet" type="text/css" href="https://example.com/themebtn.css">
<!-- 主題切換按鈕樣式 -->

底部加載音樂播放器

<!-- 音樂播放器  放在頁首-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<link rel="stylesheet" href="https://example.com/DPlayer.min.css">
<div id="aplayer" class="aplayer"  data-id="865331941" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#2D8CF0"></div>
<!-- 音樂播放器end -->

<!-- 音樂播放器  放在頁尾-->
<script src="https://example.com/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>

圖片燈箱

• 部署

<!-- 圖片燈箱 放在頁首 -->
<link rel="stylesheet" href="https://example.com/zoom.css">
<!-- 圖片燈箱 -->

<!-- 圖片燈箱 放在頁腳-->
<script src="https://example.com/zoom.js"></script>

• 使用

只需要在img標簽中 寫入 data-action="zoom"屬性即可。

  <img src="https:example.png" data-action="zoom">

加載鼠標動態粒子

<!-- 鼠標點擊特效 -->
<script src="https://example.com/cursor-effects.js"></script>
<!-- 鼠標點擊特效end -->

主題文章預覽圖設置

需要把文章的預覽圖寫在這里。

下載地址

• cnblogs-theme-simple-color

• 求個小星星!

寫在最后

如有什么問題可評論在下方，及時更正，再次感謝。