CSS《基于Sakura美化方案打造的博客园风格》+项目源码+文档说明+代码注释

# CNblogs-Theme-Sakura * 基于Sakura美化方案打造的博客园样式，给你不一样的博客园体验 * 如有幸使用了本样式，还请给个Star。 ## 功能简介 * 首页及随笔页头图随机切换 * 其他网站链接 * 音乐播放器 * 看板娘 * 图片灯箱 * 自动生成文章目录 * 导航菜单子目录 * 滚动进度条 ## 主题预览     ## 主题部署 ### 一键部署 <div class="info"><p>如果你想快速搭建出与本博客一样的样式， 请看下面这句说明，当然前提是得有<span style="color: red">js权限</span></p></div> 如果将部署和本博客一样的主题，直接下载整个主题，下载地址在文末。把**css**、**侧边栏**、**页脚**，代码粘贴的你的博客后台，然后对应的改下**文件链接地址** 就行。下面的内容是为了个性化定制而写，如果你想个性化定制博客，请往下看基本部署。 ### 基本部署 * 前提：已经开通`js`权限 * 引入样式 把**page.css**中的代码粘贴到自定义css中 * 引入文件 放在侧边栏中 ```javascript <script src="https://blog-static.cnblogs.com/files/zouwangblog/main.js"></script> ``` * 选择模板 按照图片内容设置模板  * 顶部菜单设置 将以下链接替换成自己的文章或者随笔地址，以下代码在`main.js`中 ```javascript $("#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](http://fontawesome.dashgame.com/ ) ```javascript $('#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>'); ``` * 菜单子目录设置 菜单悬浮触发的菜单子目录，这里我在**关于**菜单下添加了子目录 ```javascript 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); ``` * 脚本设置 为了配置方便，我在侧边栏里设置了一些常用参数，可根据下表选择需要开启和配置 ```javascript <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 |海上月是天上月，眼前人是心上人。| | | authorName | 作者姓名 | String |不忘编码| | catalog（博文目录） | enable | 是否启用 | Boolean | false | | | move | 是否允许拖拽 | Boolean | true | | | index | 是否显示索引 | Boolean | true | | | level1 | 一级标题 | String | h2 | | | level2 | 二级标题 | String | h3 | | | level3 | 三级标题 | String