部落格園簡約主題simple-color

阿新 • • 發佈：2019-09-16

寫在前面

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

功能簡介

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

主題預覽

極簡白

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

夜間黑

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

清新透明

喜歡極致色彩的朋友。

玻璃磨砂

毛玻璃磨砂質感。

主題部署

一鍵部署

下載檔案打包~一鍵部署。只需更改檔案的連結即可。下面的部署文件只為了個性化定製而寫。如果你想個性化的定製部落格主題，請接著往下看，如果想部署和當前部落格一樣的樣式。請下載後一鍵部署。下載地址見文章末尾。

基本部署

前提：已經開通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/[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標籤中寫入 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
求個小星星!

寫在最後

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

部落格園簡約主題simple-color

寫在前面

功能簡介

主題預覽

極簡白

夜間黑

清新透明

玻璃磨砂

主題部署

一鍵部署

基本部署

個性定製

部落格自動更換主題

底部載入音樂播放器

圖片燈箱

載入滑鼠動態粒子

主題文章預覽圖設定

下載地址

寫在最後

部落格園簡約主題simple-color

部落格園自用主題前端樣式：WQ

部落格園自用主題美化 - Light

一套簡約漂亮的響應式部落格園主題面板

自定義部落格園主題和自動生成目錄讓部落格園部落格自動生成章節目錄索引

部落格園二次元主題——Sakura

可愛的部落格園樣式美化、自定義部落格園主題樣式

部落格園主題——atum1.0正式釋出啦

部落格園主題——atum1.1升級釋出啦

部落格園二次元主題_進階版

部落格園某開源主題暗藏私貨？

你要的部落格園主題都有！！！

next-theme部落格園主題

零基礎自制部落格園 “賽博朋克” 主題 10分鐘詳解 - 精簡歸納

零基礎自制部落格園 ”Mac & ios 黑暗“ 主題 10分鐘詳解 - 精簡歸納

零基礎自制部落格園 “Mac & ios 黑暗” 主題 10分鐘詳解 - 精簡歸納

elelogger：一款明快的部落格園主題

部落格園主題——atum2.0升級釋出啦

Xdebug安裝對應版本與配置 - cxscode - 部落格園

phpstorm除錯環境XDebug搭建 - cxscode - 部落格園

部落格園簡約主題simple-color

寫在前面

功能簡介

主題預覽

極簡白

夜間黑

清新透明

玻璃磨砂

主題部署

一鍵部署

基本部署

個性定製

部落格自動更換主題

底部載入音樂播放器

圖片燈箱

載入滑鼠動態粒子

主題文章預覽圖設定

下載地址

寫在最後

相關推薦