前言
本博客的二次元风格主题，来自于すのはら荘の雪的文章 以及さくら荘の白猫写的Sakura美化方案， 时空穿梭门：すのはら荘の雪的我的博客，能够去观光一下 好啦，下面开始进入正题。javascript
功能简介
- 首页及随笔页头图随机切换
- 其余网站连接
- 音乐播放器
- 看板娘
- 图片灯箱
- 自动生成文章目录
- 导航菜单子目录
- 滚动进度条
主题预览
如下图片分别是，首页，随笔列表页，随笔页，文章页。css
主题部署
一键部署
<div class="info"><p>若是你想快速搭建出与本博客同样的样式， 请看下面这句说明，固然前提是得有<span style="color: red">js权限</span></p></div>html
若是将部署和本博客同样的主题，直接下载整个主题，下载地址在文末。把css、侧边栏、页脚，代码粘贴的你的博客后台，而后对应的改下文件连接地址 就行。下面的内容是为了个性化定制而写，若是你想个性化定制博客，请往下看。java
基本部署
-
前提：已经开通
js权限git -
引入样式 把page.css中的代码粘贴到自定义css中github
-
引入文件 放在侧边栏中npm
<script src="https://blog-static.cnblogs.com/files/zouwangblog/main.js"></script>
-
选择模板 按照图片内容设置模板
api -
顶部菜单设置ruby
将如下连接替换成本身的文章或者随笔地址，如下代码在
main.js中微信$("#navList").append('<li><a id="blog_nav_myyoulian" class="menu"href="https://www.cnblogs.com/zouwangblog/articles/11177049.html">友链</a><i></i></li><li><a id="blog_nav_myzanshang" class="menu" href="https://www.cnblogs.com/zouwangblog/articles/11340077.html">赞扬</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" href="">关于</a><i></i></li>');-
菜单icon设置 就是菜单前的小图标，感兴趣的能够去了解一下Font awesome
$('#blog_nav_myhome').prepend('<i class="fa fa-fort-awesome" aria-hidden="true"></i>'); $('#blog_nav_contact').prepend('<i class="fa fa-address-book-o" aria-hidden="true"></i>'); $('#blog_nav_rss').prepend('<i class="fa fa-rss faa-pulse" aria-hidden="true"></i>'); $('#blog_nav_admin').prepend('<i class="fa fa-list" aria-hidden="true"></i>'); $('#blog_nav_myyoulian').prepend('<i class="fa fa-link" aria-hidden="true"></i>'); $('#blog_nav_myzanshang').prepend('<i class="fa fa-heart" aria-hidden="true"></i>'); $('#blog_nav_myguanyu').prepend('<i class="fa fa-leaf" aria-hidden="true"></i>'); -
菜单子目录设置
菜单悬浮触发的菜单子目录，这里我在关于菜单下添加了子目录
let guanyu = '<ul class="sub-menu">' + '<li><a href="https://www.cnblogs.com/zouwangblog/articles/11157339.html "><i class="fa fa-meetup" aria-hidden="true"></i> 我？</a></li>' + '<li><a href="https://www.cnblogs.com/zouwangblog/articles/11346906.html "><i class="fa fa-area-chart" aria-hidden="true"></i> 统计</a></li>' + '<li><a href="https://www.cnblogs.com/zouwangblog/articles/11350777.html "><i class="fa fa-heartbeat" aria-hidden="true"></i> 监控</a></li>' + '<li><a href="https://www.cnblogs.com/zouwangblog/articles/11350787.html"><i class="iconfont icon-taohua" aria-hidden="true"></i> 主题</a></li>' + '</ul>'; $('#blog_nav_myguanyu').after(guanyu);
-
-
脚本设置
为了配置方便，我在侧边栏里设置了一些经常使用参数，可根据下表选择须要开启和配置
<script type="text/javascript"> $.silence({ profile: { enable: true, avatar: '', favicon: 'https://files-cdn.cnblogs.com/files/zouwangblog/blog_logo.gif', }, catalog: { enable: true, move: true, index: true, level1: 'h2', level2: 'h3', level3: 'h4', }, signature: { enable: true, home: 'https://www.cnblogs.com/zouwangblog/', license: 'CC BY 4.0', link: 'https://creativecommons.org/licenses/by/4.0' }, sponsor: { enable: true, paypal: null, wechat: 'https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190704175553.png', alipay: 'https://www.cnblogs.com/images/cnblogs_com/zouwangblog/1477590/t_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190704174158.png' }, github: { enable: false, color: '#fff', fill: '#FF85B8', link: 'https://github.com/Zou-Wang' }, topImg: { homeTopImg: [ "https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190828104950450-644943924.jpg", "https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190806172418911-2037584311.jpg", ], notHomeTopImg: [ "https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151151330-1121103170.png", "https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg", ] }, topInfo: { title: 'Hi,Toretto', text: 'You got to put the past behind you before you can move on.', github: "https://github.com/Zou-Wang", weibo: "https://weibo.com/5682002748/profile?topnav=1&wvr=6&is_all=1", telegram: "", music: "https://music.163.com/#/user/home?id=436757779", twitter: "", zhihu:"https://www.zhihu.com/people/zouwang/activities", mail: "http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=KlBFX11LRE0SGBlqW1sESUVH", } }); </script>参数说明表：
模块 属性 说明 类型 默认值 profile（基础信息） enable 是否启用 Boolean true avatar 做者头像 String favicon 网站标题图标 String notice 公告 String 海上月是天上月，眼前人是心上人。 catalog（博文目录） enable 是否启用 Boolean false move 是否容许拖拽 Boolean true index 是否显示索引 Boolean true level1 一级标题 String h2 level2 二级标题 String h3 level3 三级标题 String h4 signature（博文签名 enable 是否启用 Boolean true 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 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 topImg（头图） homeTopImg 首页头图 Array [https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808213858652-132088076.jpg<br />https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190808214726187-2092834311.jpg] notHomeTopImg 文章和随笔页头图 Array [https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190807151203983-873040918.jpg] topInfo(首页头图信息) titile 头部标题 String Hi, Toretto! text 座右铭 String You got to put the past behind you before you can move on. github GitHub连接 String “ ” weibo 微博连接 String “ ” telegram telegram连接 String “ ” music 网易云音乐连接 String “ ” twitter twitter连接 String “ ” zhihu 知乎连接 String “ ” mail 邮箱连接 String “ ”
配置完成后，记得点击「保存」按钮，保存上述操做。
个性化定制
首页及文章大图
首页和随笔以及文章页的头图都是随机切换的，添加图片在侧边栏配置中。这里类型为随笔的时候头部会显示标题、头像、做者、发布时间、阅读数，而类型为文章的时候只会显示标题，根据状况选择类型发布。
随笔预览图
在写随笔或者文章的时候添加摘要图片和摘要文字，摘要文字必定要添加，若是不添加摘要图片会给一张默认图片。
<div class="info important"><p>发布随笔的时候不要再同一天发布超过一篇文章，由于博客园同一天的文章会归档在一块儿致使我构建html的时候出现bug，这个bug到如今尚未解决，因此只能一天发布一篇文章。</p></div>
公告
公告内容修改在侧边栏基础信息配置中，修改notice
看板娘
看板娘，将如下代码添加到页脚，可是api失效致使看板娘没有，偶尔发生。
<script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>
音乐播放器
相信看过我之前文章的同窗对这个必定不会陌生，怎么获取id我也不在这里罗嗦了，能够去找我之前的文章。获取到id以后把下面的id替换掉就能够了
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css"> <script src="https://blog-static.cnblogs.com/files/zouwangblog/APlayer.min.js"></script> <script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script> <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="2878443703" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>
博客logo
左上角的logo，修改文字须要到main.js里找到如下代码，替换文字便可，若是不喜欢能够注掉（我费了很大劲居然敢不喜欢🤕）。
var title = '<div class="site-branding">' +
'<span class="logolink moe-mashiro">' +
'<a href="https://www.cnblogs.com/zouwangblog/" alt="富士的雪">' +
'<ruby><span class="sakuraso">ふじさん</span><span class="no">の</span><span class="shironeko">雪</span>' +
'<rt class="chinese-font">富士的雪</rt></ruby></a></span>' +
'</div>'
$('body').prepend(title);
页面滚动进度条
页面滚动的时候会在顶部出现一个橙色的进度条，修改颜色到页面css里，找到如下代码修改background
.scrollCls {
position: fixed;
top: 0;
height: 3px;
background: orange;
transiton-property: width,background;
transition-duration: 1s,1s;
z-index: 99999;
}
首页我的信息
-
名称 在侧边栏配置中修改
topInfo里的title -
座右铭 在侧边栏配置中修改
topInfo里的text -
其余网站连接 在侧边栏配置中修改
topInfo里对应的连接地址，这里邮箱使用的是QQ邮箱的邮我，能够在QQ邮箱里配置。