博客园简约主题simple-color

约定不等于承诺〃 2023-08-17 16:02 63阅读 0赞

## 写在前面 ##

> 本款主题是基于 [@esofar][esofar]大佬的`silence`主题，稍加更改完成。喜欢主题的极简风，同时也适配了许多个性化的东西，所以，主题总体基本没有任何的优化，代码凌乱，本不想放出，毕竟代码混乱，毫无逻辑可言，近期有许多小伙伴想要这一套主题，特此放出。不当之处定会有许多，请多担待。同时也部分参考了[GShang][]学长的博客，特表感谢。

### 功能简介 ###

*  移动端适配
 *  极简白，夜间黑，清新透明，玻璃磨砂 四种主题模式自动切换
 *  音乐播放器
 *  图片灯箱
 *  文章自动目录生成

## 主题预览 ##

夜间黑主题：。超级美丽漂亮可爱的小姐姐主题：。阔耐的动漫主题：，或者点击博客左上角进行预览。

### 极简白 ###

个人比较喜欢的一个样式，极简风。

![cf60caef8fc2573c.png][]

### 夜间黑 ###

不能算是博客的一种主题，你可以理解为`夜间模式`。

![3ee172534d347e92.png][]

### 清新透明 ###

喜欢极致色彩的朋友。

![ab69b496fc02f38c.png][]

### 玻璃磨砂 ###

毛玻璃磨砂质感。

![201e4aa12cf5556e.png][]

## 主题部署 ##

### 一键部署 ###

如果你想快速搭建出和本博客一样的主题样式，请查看下面这句说明。当然，前提是你得有js权限。

如果想部署和当前博客一样的样式。直接下载整个主题，下载地址 见文章末尾。把**页脚**，**页首**，**侧边栏**的代码粘贴到你的博客后台，然后**更改一下其中的文件链接地址**即可。下面的部署文档只为了个性化定制而写，如果你想个性化的定制博客主题，请接着往下看，

### 基本部署 ###

*  前提：已经开通`js`权限，没开通的可以向博客园官方申请开通。
 *  引入文件
    
    可以放在`页脚`。
    
        <script src="https://example.com/simple-color.js"></script>
 *  引入样式
    
    把**simple-color.css**中的代码粘贴在`自定义css样式中`。
 *  选择模板
    
    具体的设置如下图。

![Snipaste\_2019-09-16\_16-29-00.png][Snipaste_2019-09-16_16-29-00.png]

*  头部菜单设置
    
    把下面链接中的地址换成你自己的`文章`或者`随笔`的地址就好。下面函数在`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) }) }

这样一个主题基本完成，如果想加其余的功能，接着往下看。

*  脚本设置
    
    为了提高园友的阅读体验，主题在博客园原有功能基础上追加了一些辅助阅读、以及人性化的功能模块。其中部分模块做了参数配置，用户可根据自己意愿选择是否启用。若启用，再根据自己的信息或写作习惯设置相关参数。
    
    进入『[设置][Link 1]』界面，将如下脚本代码引用 **追加** 到`「博客侧边栏公告」`文本域中，其中配置参数根据下表自行修改。这个配置是来自[silence部署文档][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>
    
    配置参数说明表：
    
    <table> 
     <thead> 
      <tr> 
       <th>模块</th> 
       <th>属性</th> 
       <th>说明</th> 
       <th>类型</th> 
       <th>默认值</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>base（基础信息）</td> 
       <td>avatar</td> 
       <td>博主头像</td> 
       <td>String</td> 
       <td>null</td> 
      </tr> 
      <tr> 
       <td>favicon</td> 
       <td>网页标题图标</td> 
       <td>String</td> 
       <td>null</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>catalog（博文目录）</td> 
       <td>enable</td> 
       <td>是否启用</td> 
       <td>Boolean</td> 
       <td>false</td> 
      </tr> 
      <tr> 
       <td>move</td> 
       <td>是否允许拖拽</td> 
       <td>Boolean</td> 
       <td>true</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>index</td> 
       <td>是否显示索引</td> 
       <td>Boolean</td> 
       <td>true</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>level1</td> 
       <td>一级标题</td> 
       <td>String</td> 
       <td>h2</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>level2</td> 
       <td>二级标题</td> 
       <td>String</td> 
       <td>h3</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>level3</td> 
       <td>三级标题</td> 
       <td>String</td> 
       <td>h4</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>signature（博文签名）</td> 
       <td>enable</td> 
       <td>是否启用</td> 
       <td>Boolean</td> 
       <td>false</td> 
      </tr> 
      <tr> 
       <td>auther</td> 
       <td>作者名字</td> 
       <td>String</td> 
       <td>[Blog Nickname]</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>home</td> 
       <td>作者主页</td> 
       <td>String</td> 
       <td><a href="https://www.cnblogs.com/" rel="nofollow">https://www.cnblogs.com</a></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>license</td> 
       <td>许可证名称</td> 
       <td>String</td> 
       <td>CC BY 4.0</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>link</td> 
       <td>许可证链接</td> 
       <td>String</td> 
       <td>https://creativecommons.org/licenses/by/4.0</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>sponsor（博文赞赏）</td> 
       <td>enable</td> 
       <td>是否启用</td> 
       <td>Boolean</td> 
       <td>false</td> 
      </tr> 
      <tr> 
       <td>text</td> 
       <td>标题</td> 
       <td>String</td> 
       <td>Sponsor</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>paypal</td> 
       <td>PayPal 收款地址</td> 
       <td>String</td> 
       <td>null</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>alipay</td> 
       <td>支付宝收款二维码</td> 
       <td>String</td> 
       <td>null</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>wechat</td> 
       <td>微信收款二维码</td> 
       <td>String</td> 
       <td>null</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>github（GitHub Corners）</td> 
       <td>enable</td> 
       <td>是否启用</td> 
       <td>Boolean</td> 
       <td>false</td> 
      </tr> 
      <tr> 
       <td>fill</td> 
       <td>背景填充色</td> 
       <td>String</td> 
       <td>[Silence Theme Color]</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>color</td> 
       <td>章鱼猫颜色</td> 
       <td>String</td> 
       <td>#fff</td> 
       <td></td> 
      </tr> 
      <tr> 
       <td>link</td> 
       <td>Github 链接</td> 
       <td>String</td> 
       <td>null</td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table>
    
    配置完成后，记得点击「保存」按钮，保存上述操作。
 *  补充说明
    
    进入『[设置][Link 1]』界面，在「标题」文本框中设置博客标题，注意不支持显示「子标题」；在「博客皮肤」处选择博客园官方标准模板 **Custom**；把「禁用模板默认CSS」复选框取消勾选。最后，点击「保存」按钮保存上述 3 步操作。
    
    进入『[选项][Link 2]』界面，在「控件显示设置」中需要勾选的博客园官方功能模块如下几个：
    
     *  必须要勾选：公告、我的标签、随笔分类、阅读排行榜、推荐排行榜
     *  自定义勾选：博客园链接、首页链接、RSS订阅、联系
    
    其他模块取消勾选(可选操作)。最后，点击「SAVE」按钮保存操作。

### 个性定制 ###

#### 博客自动更换主题 ####

实现四种主题样式自定义切换。点击博客左上角的 试试看！当然，如果你还不满足于现在的主题样式，可以自己定制自己的主题样式，详细请转看文章[还在美化博客吗？试试一键更换博客主题吧！][Link 3]

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

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

#### 主题文章预览图设置 ####

需要把文章的预览图写在这里。

![Snipaste\_2019-09-16\_17-18-01.png][Snipaste_2019-09-16_17-18-01.png]

## 下载地址 ##

*  [cnblogs-theme-simple-color][]
 *  求个小星星!

## 写在最后 ##

如有什么问题可评论在下方，及时更正，再次感谢。

转载于:https://www.cnblogs.com/yjlaugus/p/11529055.html

[esofar]: https://www.cnblogs.com/esofar/
[GShang]: https://www.cnblogs.com/gshang
[cf60caef8fc2573c.png]: https://img.imjad.cn/images/2019/09/16/cf60caef8fc2573c.png
[3ee172534d347e92.png]: https://img.imjad.cn/images/2019/09/16/3ee172534d347e92.png
[ab69b496fc02f38c.png]: https://img.imjad.cn/images/2019/09/16/ab69b496fc02f38c.png
[201e4aa12cf5556e.png]: https://img.imjad.cn/images/2019/09/16/201e4aa12cf5556e.png
[Snipaste_2019-09-16_16-29-00.png]: https://img.imjad.cn/images/2019/09/16/Snipaste_2019-09-16_16-29-00.png
[Link 1]: https://i.cnblogs.com/Configure.aspx
[silence]: https://github.com/esofar/cnblogs-theme-silence/blob/master/docs/deploy.mdr
[Link 2]: https://i.cnblogs.com/Preferences.aspx
[Link 3]: https://www.cnblogs.com/yjlaugus/p/11223861.html
[Snipaste_2019-09-16_17-18-01.png]: https://img.imjad.cn/images/2019/09/16/Snipaste_2019-09-16_17-18-01.png
[cnblogs-theme-simple-color]: https://github.com/YJLAugus/cnblogs-theme-simple-color