博客园主题 Silence

本人在写博客时, 一直苦于找不到能够提供一个简洁, 舒适的博客web网站, 而就在前两天, 偶然看到一位博客园博主的网站主题甚得我意, 进一步通过百度搜索得知, 原来博客园的个人网站是可以自己定制的, 然后光速注册了一个博客园账号, 申请了个人网站, 通过开源项目 Silence(感谢开发作者) 对自己的网站进行装修, 期间还踩了不少坑, 请教了主题的开发作者, 才成功的配置好, 在此写一篇博客, 希望如果有小伙伴喜欢这款主题, 看到这篇博客能够快速的搭建自己满意的个人网站

• 项目开源地址
• 项目官方文档

配置步骤

• 下载项目文件

  https://github.com/esofar/cnblogs-theme-silence/archive/master.zip

  ​

• 申请个人网站

  进入 https://home.cnblogs.com/ 点击写博 即可申请

  ​

• 进入博客园后台设置, 进行网站的配置

  1. 进入 https://i.cnblogs.com/settings

  2. 将项目cnblogs-theme-silence-master下的 ./dist/silence.min.css 文件中的代码拷贝到页面定制 CSS 代码框中

3. 修改博客皮肤为 Custom

4. 禁用模板默认css

上图已标记

5. 申请js权限

上图已标记

6. 进入https://i.cnblogs.com/files, 将项目下 ./dist/silence.min.js 文件进行上传, 上传完毕, 鼠标移动到文件, 点击鼠标右键,复制文件链接, 在博客侧边栏中引入

   // src替换成自己的链接, 不过这个链接也能用
   <script src="https://blog-static.cnblogs.com/files/juzia/silence.min1.js"></script>
   

   ​

7. 根据官方文档自行在博客侧边栏中进行配置

 [官方文档](https://esofar.github.io/cnblogs-theme-silence/#/options)  

8. 我个人的配置

   <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 搜索 class="esa-toolbar" 在此处添加如下代码 (可直接复制粘贴,格式已经控制好了), 重新上传该文件即可

  ondblclick=window.open("https://i.cnblogs.com/posts/edit;postId="+((window.location.pathname).substring((window.location.pathname).lastIndexOf("/")+1,(window.location.pathname).lastIndexOf("."))))