Blog theme skin beautification --Silence

Introduction

A theme park dedicated blog to read, mainly for the regular removed from the blog garden friends. Its pursuit of the ultimate truth Road to SR, the interface is simple pursuit, the pursuit of operational efficiency, the pursuit of simple deployment.

Feature

Simple and elegant, exquisite and beautiful UI design
Theme offers a variety of styles to suit all types of user preferences
Responsive design, compatible mobile terminal browser
Provide all manner of deployment documentation
Structure is clear and complete source code comments for easy expansion

Develop

Please make sure you are using the machine has been installed Node.js and Git client.

 git clone https://github.com/esofar/cnblogs-theme-silence.git   # 克隆源码
 cd cnblogs-theme-silence                                        # 进入项目
 npm install                                                     # 安装依赖
 npm run build

If you do not install the node. js or children's shoes can not be used in my GitHub, blog skin is the source address.

deploy

Use cutorm skin blog Park before focus on the deployment, the deployment of the specific details, please see 'how to deploy, use skin', if they do not, then you can take a look at my configuration as a reference (reference only, do not cry brought back to the nose)
CSS

<!-- 溢出隐藏设置（放置在管理--> 设置--> css模块中） -->
#topics, #mainContent {
    overflow: visible;
}
.cnblogs-markdown .hljs{
    display:block;
    color:#333;
    overflow-x:auto;
    background:#F2F4F5!important;
    border:none!important;
    font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important;
    padding:1em!important;
    font-size:14px!important
    }

Sidebar announcement

<!-- 在管理--> 设置-> 侧边栏公告(支持js代码、支持html代码) -->
<script src="https://blog-static.cnblogs.com/files/glassysky/silence.min.js"></script>
<script type="text/javascript">
    $.silence({
        profile: {
            enable: true,
            avatar: 'https://gitee.com/glassyskyforgame/glassysky/blob/master/4c67d1a20cf431ade2873e284836acaf2fdd989e.jpg',
            favicon: 'https://gitee.com/glassyskyforgame/glassysky/raw/master/4c67d1a20cf431ade2873e284836acaf2fdd989e.jpg',
        },
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            home: 'https://www.cnblogs.com/glassysky/',
            license: '署名 4.0 国际',
            link: 'https://creativecommons.org/licenses/by/4.0'
        },
        reward: {
            enable: true,
            title: '感谢小可爱投食',
            wechat: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_wechat.png',
            alipay: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_alipay.png'
        },
        github: {
            enable: true,
            color: '#fff',
            fill: null,
            link: 'https://github.com/glassy-sky-lisong'
        }
    });
</script>
<!--外置主题css补丁-->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/glassysky/sli.css"/>

It will be moving title

<!-- 动态titlejs -->
<script> var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if                 
(document.hidden) { document.title = '╭(°A°`)╮ 页面崩溃啦 ~'; clearTimeout(titleTime); } else { document.title = '(ฅ>ω<*ฅ) 噫又    
好了~' + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); } }); </script>

Picture zoom function

<!--图片放大的zoomcss和js-->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/glassysky/zoom.css"/>
<script src="https://blog-static.cnblogs.com/files/glassysky/zoom.js"></script>
<!-- Bootstrap 的 transition.js cdn（过渡动画插件）-->
<script type="text/javascript">$('#cnblogs_post_body img').attr('data-action', 'zoom');</script>

Blog skin style

Simple · Blue
Dark-green
Goddess Pastel