博客美化——Silence主题皮肤

介绍

??一款专注阅读的博客园主题,主要面向于经常混迹 博客园 的朋友。其追求大道至简的终极真理,界面追求简洁、运行追求高效、部署追求简单。

特点

  • 简洁优雅、精致漂亮的 UI 设计
  • 提供多种风格主题以便适应各类用户的偏好
  • 响应式设计,兼容手机端浏览器
  • 提供事无巨细的部署文档
  • 源码结构清晰并且注释完整,方便扩展

开发

??请先确保您正在使用的机器已经安装 Node.js 和 Git 客户端。

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

??如果没有安装node。js或者不会使用的童鞋可以在我的GitHub,也就是博客皮肤源码地址中。

部署

??重点部署之前使用博客园的cutorm皮肤,具体部署细节请详见‘如何部署、使用皮肤‘,如果又不会的话可以看一看我的配置作为参考(仅作为参考,找不回来别哭鼻子)
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
    }

侧边栏公告

<!-- 在管理--> 设置-> 侧边栏公告(支持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"/>

会动的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>

图片放大功能

<!--图片放大的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>

博客的皮肤风格

  • 简约·蓝
  • 暗黑·绿
  • 女神·粉

原文地址:https://www.cnblogs.com/glassysky/p/11963494.html

时间: 2024-11-05 17:20:36

博客美化——Silence主题皮肤的相关文章

【全网最全的博客美化系列教程】文章总目录

前言 很多热心的园友叫我出一部博客美化系列的教程,都觉得我博客做的很漂亮?之前我也有写过博客美化教程,不过好像一篇文章的篇幅有点过长了,为了方便园友的查看,我决定重新出一套博客美化教程,把原有的功能进行细化,每种功能单独以一篇文章的形式发表,在保留原有功能的基础上,会持续更新探索一些好玩好看的新功能,供园友们学习.既然是园友们提出的想法,我也不能辜负你们的期望啊,喜欢的园友记得点赞收藏加关注哦~~~ 一枚即将步入大三的学生党也是时候需要考虑一下自己的未来了,毕竟学习的时间不多了.我也很久没有更新

【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

【全网最全的博客美化系列教程】07.添加一个分享的按钮吧

全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添加一只萌萌哒的小仓鼠 [全网最全的博客美化系列教程]04.访客量统计的实现 [全网最全的博客美化系列教程]05.公告栏个性时间显示的实现 [全网最全的博客美化系列教程]06.推荐和反对炫酷样式的实现 [全网最全的博客美化系列教程]07.添加一个分享的按钮吧 [全网最全的博客美化系列教程]08.自定义

【博客美化】07.添加打赏按钮

博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加GitHub链接 [博客美化]06.添加QQ交谈链接 [博客美化]07.添加打赏按钮 1.添加打赏按钮 进入自己的博客园->设置,将以下html代码添加到“页首Html代码” <!--打赏 Start--> <script> window.tctipConfig = { staticP

【博客美化】06.添加QQ联系链接

博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加GitHub链接 [博客美化]06.添加QQ交谈链接 1.添加GitHub链接 进入自己的博客园->设置,将以下html代码添加到“页首Html代码” <a href="https://github.com/Jackson0714" target="_blank"

【博客美化】06.添加QQ交谈链接

博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加GitHub链接 [博客美化]06.添加QQ交谈链接 1.添加QQ交谈链接 进入自己的博客园->设置,将以下html代码添加到“博客侧边栏公告” <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=343

【博客美化】09.评论带头像,且支持旋转

博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加GitHub链接 [博客美化]06.添加QQ交谈链接 [博客美化]07.添加打赏按钮 [博客美化]08.添加"扩大/缩小浏览区域大小" 按钮 [博客美化]09.评论带头像,且支持旋转 1.效果图 2.上传JavaScript文件 文件地址:http://files.cnblogs.com/fil

【博客美化】08.添加&quot;扩大/缩小浏览区域大小&quot; 按钮

博客园美化相关文章目录: [博客美化]01.推荐和反对炫酷样式 [博客美化]02.公告栏显示个性化时间 [博客美化]03.分享按钮 [博客美化]04.自定义地址栏logo [博客美化]05.添加GitHub链接 [博客美化]06.添加QQ交谈链接 [博客美化]07.添加打赏按钮 [博客美化]08.添加"扩大/缩小浏览区域大小" 按钮 1.页首添加HTML代码 进入自己的博客园->设置,将以下html代码添加到“页首Html代码” <div id="divExpan