博客園簡約主題simple-color

寫在前面

本款主題是基于 @esofar <https://home.cnblogs.com/u/esofar>大佬的silence
主題，稍加更改完成。喜歡主題的極簡風(fēng)，同時(shí)也適配了許多個(gè)性化的東西，所以，主題總體基本沒有任何的優(yōu)化，代碼凌亂，本不想放出，畢竟代碼混亂，毫無邏輯可言，近期有許多小伙伴想要這一套主題，特此放出。不當(dāng)之處定會(huì)有許多，請(qǐng)多擔(dān)待。同時(shí)也部分參考了
GShang <https://home.cnblogs.com/u/gshang>學(xué)長的博客，特表感謝。

功能簡介

* 移動(dòng)端適配
* 極簡白，夜間黑，清新透明，玻璃磨砂 四中主題模式自動(dòng)切換
* 音樂播放器
* 圖片燈箱
* 文章自動(dòng)目錄生成
主題預(yù)覽

夜間黑主題：。超級(jí)美麗漂亮可愛的小姐姐主題：。闊耐的動(dòng)漫主題：，或者點(diǎn)擊博客左上角進(jìn)行預(yù)覽。

極簡白

個(gè)人比較喜歡的一個(gè)樣式，極簡風(fēng)。



夜間黑

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



清新透明

喜歡極致色彩的朋友。



玻璃磨砂

毛玻璃磨砂質(zhì)感。



主題部署

一鍵部署



如果你想快速搭建出和本博客一樣的主題樣式，請(qǐng)查看下面這句說明。當(dāng)然，前提是你得有js權(quán)限。



如果想部署和當(dāng)前博客一樣的樣式。直接下載整個(gè)主題，下載地址
<https://www.cnblogs.com/yjlaugus/p/11529055.html#MySignature> 見文章末尾。把頁腳，頁首，側(cè)邊欄
的代碼粘貼到你的博客后臺(tái)，然后更改一下其中的文件鏈接地址即可。下面的部署文檔只為了個(gè)性化定制而寫，如果你想個(gè)性化的定制博客主題，請(qǐng)接著往下看，

基本部署

*
前提：已經(jīng)開通js權(quán)限，沒開通的可以向博客園官方申請(qǐng)開通。

*
引入文件

可以放在頁腳。
<script src="https://example.com/simple-color.js"></script>
*
引入樣式

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

*
選擇模板

具體的設(shè)置如下圖。



*
頭部菜單設(shè)置

把下面鏈接中的地址換成你自己的文章或者隨筆的地址就好。下面函數(shù)在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">標(biāo)簽</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 ">關(guān)于</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) }) }
這樣一個(gè)主題基本完成，如果想加其余的功能，接著往下看。

*
腳本設(shè)置


為了提高園友的閱讀體驗(yàn)，主題在博客園原有功能基礎(chǔ)上追加了一些輔助閱讀、以及人性化的功能模塊。其中部分模塊做了參數(shù)配置，用戶可根據(jù)自己意愿選擇是否啟用。若啟用，再根據(jù)自己的信息或?qū)懽髁?xí)慣設(shè)置相關(guān)參數(shù)。

進(jìn)入『設(shè)置 <https://i.cnblogs.com/Configure.aspx>』界面，將如下腳本代碼引用 追加 到「博客側(cè)邊欄公告」
文本域中，其中配置參數(shù)根據(jù)下表自行修改。這個(gè)配置是來自silence部署文檔
<https://github.com/esofar/cnblogs-theme-silence/blob/master/docs/deploy.mdr>。
<!-- 放在側(cè)邊欄--> <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> <!--隨筆發(fā)布信息 放在側(cè)邊欄--> <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>
<!--首頁排版調(diào)整 放在側(cè)邊欄--> <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>
配置參數(shù)說明表：

模塊 屬性 說明 類型 默認(rèn)值
base（基礎(chǔ)信息） avatar 博主頭像 String null
favicon 網(wǎng)頁標(biāo)題圖標(biāo) String null
catalog（博文目錄） enable 是否啟用 Boolean false
move 是否允許拖拽 Boolean true
index 是否顯示索引 Boolean true
level1 一級(jí)標(biāo)題 String h2
level2 二級(jí)標(biāo)題 String h3
level3 三級(jí)標(biāo)題 String h4
signature（博文簽名） enable 是否啟用 Boolean false
auther 作者名字 String [Blog Nickname]
home 作者主頁 String https://www.cnblogs.com <https://www.cnblogs.com/>
license 許可證名稱 String CC BY 4.0
link 許可證鏈接 String https://creativecommons.org/licenses/by/4.0
sponsor（博文贊賞） enable 是否啟用 Boolean false
text 標(biāo)題 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
配置完成后，記得點(diǎn)擊「保存」按鈕，保存上述操作。

*
補(bǔ)充說明

進(jìn)入『設(shè)置 <https://i.cnblogs.com/Configure.aspx>
』界面，在「標(biāo)題」文本框中設(shè)置博客標(biāo)題，注意不支持顯示「子標(biāo)題」；在「博客皮膚」處選擇博客園官方標(biāo)準(zhǔn)模板Custom
；把「禁用模板默認(rèn)CSS」復(fù)選框取消勾選。最后，點(diǎn)擊「保存」按鈕保存上述 3 步操作。

進(jìn)入『選項(xiàng) <https://i.cnblogs.com/Preferences.aspx>』界面，在「控件顯示設(shè)置」中需要勾選的博客園官方功能模塊如下幾個(gè)：

* 必須要勾選：公告、我的標(biāo)簽、隨筆分類、閱讀排行榜、推薦排行榜
* 自定義勾選：博客園鏈接、首頁鏈接、RSS訂閱、聯(lián)系
其他模塊取消勾選(可選操作)。最后，點(diǎn)擊「SAVE」按鈕保存操作。

個(gè)性定制

博客自動(dòng)更換主題

實(shí)現(xiàn)四種主題樣式自定義切換。點(diǎn)擊博客左上角的 試試看！當(dāng)然，如果你還不滿足于現(xiàn)在的主題樣式，可以自己定制自己的主題樣式，詳細(xì)請(qǐng)轉(zhuǎn)看文章
還在美化博客嗎？試試一鍵更換博客主題吧！ <https://www.cnblogs.com/yjlaugus/p/11223861.html>
<!--主題切換 放在側(cè)邊欄--> <script> $('.fa.fa-cog.fa-spin.fa-lg').click(function () {
$(this).closest('.float-btn-group').toggleClass('open'); }); </script>
<!--主題切換放在側(cè)邊欄--> <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('夜間模式關(guān)閉'); } } (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('夜間模式關(guān)閉'); } }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('皮膚模式關(guān)閉'); } } 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('皮膚模式關(guān)閉'); } } (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/[email protected]/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/[email protected]/dist/Meting.min.js"></script>
圖片燈箱

* 部署 <!-- 圖片燈箱 放在頁首 --> <link rel="stylesheet"
href="https://example.com/zoom.css"> <!-- 圖片燈箱 --> <!-- 圖片燈箱 放在頁腳--> <script
src="https://example.com/zoom.js"></script>
*
使用

只需要在img標(biāo)簽中 寫入 data-action="zoom"屬性即可。
<img src="https:example.png" data-action="zoom">
加載鼠標(biāo)動(dòng)態(tài)粒子
<!-- 鼠標(biāo)點(diǎn)擊特效 --> <script src="https://example.com/cursor-effects.js"></script>
<!-- 鼠標(biāo)點(diǎn)擊特效end -->
主題文章預(yù)覽圖設(shè)置

需要把文章的預(yù)覽圖寫在這里。



下載地址

*
cnblogs-theme-simple-color
<https://github.com/YJLAugus/cnblogs-theme-simple-color>

*
求個(gè)小星星!

寫在最后

如有什么問題可評(píng)論在下方，及時(shí)更正，再次感謝。

• ? 上一篇：Alodi：為了保密我開發(fā)了一個(gè)系統(tǒng)
• ? 下一篇： 智庫大會(huì) | 智能科技：從萬物互聯(lián)到萬物智能