博客園主題 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>