博客园主题 Silence的配置
博客园主题 Silence
本人在写博客时, 一直苦于找不到能够提供一个简洁, 舒适的博客web网站, 而就在前两天, 偶然看到一位博客园博主的网站主题甚得我意, 进一步通过百度搜索得知, 原来博客园的个人网站是可以自己定制的, 然后光速注册了一个博客园账号, 申请了个人网站, 通过开源项目 Silence(感谢开发作者) 对网站进行装修, 期间还踩了不少坑, 请教了主题的开发作者, 才成功配置好, 所以在此写一篇博客, 希望如果有小伙伴喜欢这款主题, 通过这篇博客能够快速的搭建自己满意的个人网站
配置步骤
-
1.下载项目文件
https://github.com/esofar/cnblogs-theme-silence/archive/master.zip
-
2.申请个人网站
进入 https://home.cnblogs.com/ 点击写博 即可申请
-
3.进入博客园后台设置, 进行网站的配置
3.1 进入 https://i.cnblogs.com/settings
3.2 将项目cnblogs-theme-silence-master下的 ./dist/silence.min.css 文件中的代码拷贝到页面定制 CSS 代码 框中
-
4.修改博客皮肤为 Custom
上图已标记
-
5.禁用模板默认css
上图已标记
-
6.申请js权限
上图已标记
-
7.进入 https://i.cnblogs.com/files, 将项目下 ./dist/silence.min.js 文件进行上传, 上传完毕, 鼠标移动到文件, 点击鼠标右键,复制文件链接, 在博客侧边栏中引入
// src替换成自己的链接, 不过这个链接也能用 <script src="https://blog-static.cnblogs.com/files/juzia/silence.min1.js"></script>
-
8.根据官方文档自行在 博客侧边栏 中进行配置
-
9.我个人的配置
<script> window.$silence = { favicon: 'https://storage.live.com/Users/5510755311915960826/MyProfile/ExpressionProfile/ProfilePhoto:Win8Static,UserTileMedium,UserTileStatic', github: 'https://github.com/juziia', sponsor: { enable: true, text: '', wechat: '', alipay: '' }, showNavAdmin: false, catalog: { enable: true, index: true, active: false, levels: ['h3', 'h4', 'h5'] }, signature: { enable: true, author: null, license: ['署名-非商业性使用-相同方式共享 4.0 国际', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'], remark: '你可以在这里自定义其他内容', }, navbars: [{ title: '归档', // 这里的juzia改成自己的 url: 'https://www.cnblogs.com/juzia/p/' }, { title: '搜索', chilren: [{ title: '百度', target: '_blank', url: 'https://www.baidu.com', }, { title: '谷歌', target: '_blank', url: 'https://www.google.com', }] }] }; </script> <script src="https://blog-static.cnblogs.com/files/juzia/silence.min1.js"></script> <img src="https://pic.cnblogs.com/avatar/1415026/20190816215152.png" alt="博客主的头像" class="img_avatar" width="200px" style="border-radius:50%">
对原js文件做了小小的改进
在与网站的交互过程中, 有时需要对文章进行修改, 这时候需要滑动到页面的最上面,点击新随笔跳转到后台, 再对要修改的博客进行更改, 步骤过于繁琐, 所以对silence.min.js 文件进行了修改, 增加了鼠标双击 底部右下角的 菜单按钮 就快速跳转到修改当前博客的页面
修改方式:
- 打开silence.min.js文件(用 vs code打开比较好, 有良好格式), ctrl + F 搜索 <div class="bars"><i 在此处添加如下代码 (可直接复制粘贴,格式已经控制好了), 重新上传该文件即可
ps: 如果嫌麻烦可以在第7步时, 直接引用我的js文件即可 (采用第一种方案)
在新的页面打开
ondblclick=window.open("https://i.cnblogs.com/posts/edit;postId="+((window.location.pathname).substring((window.location.pathname).lastIndexOf("/")+1,(window.location.pathname).lastIndexOf("."))))
在当前页面打开
ondblclick=window.location.href="https://i.cnblogs.com/posts/edit;postId="+((window.location.pathname).substring((window.location.pathname).lastIndexOf("/")+1,(window.location.pathname).lastIndexOf(".")))
- 可以在 博客侧边栏 中引入js文件时引入我已经修改好的js文件
在新的界面打开
<script src="https://blog-static.cnblogs.com/files/juzia/silence.min2.js"></script>
在当前界面打开
<script src="https://blog-static.cnblogs.com/files/juzia/silence.min3.js"></script>