3分鍾教你實現Github風格的博客園博客

廢話不多說，這是官方部署文檔，可以打開一起看

https://github.com/esofar/cnblogs-theme-silence/blob/master/docs/deploy.md

寫在前面

操作之前請先確保您的博客園賬號已正常登陸並且已經成功申請開通了 JS 權限。

下載解壓

點擊 下載 本主題最新版本源碼包，下載完畢后，使用解壓工具解壓並進入解壓后目錄

然后打開博客園后台 管理 頁面，進行后續操作。

使用樣式

打開./dist/themes文件夾，選擇一款自己心儀的主題風格代碼文件。我這里選擇的是默認的藍色default.min.css 。

使用 Notepad++ 等文本編輯工具打開您選擇的主題樣式文件，全選所有代碼，然后復制。

進入『設置』界面，將復制的代碼粘貼到「頁面定制CSS代碼」文本域中。

點擊「保存」按鈕，保存上述操作。

注意：

「頁面定制CSS代碼」上面的博客皮膚選擇成Custom，其他排版會亂的。

上傳腳本

打開./dist文件夾，獲取主題的 JS 腳本文件silence.min.js。

進入『文件』界面，將該文件上傳到自己的博客中。上傳完成后，點擊文件名便可在瀏覽器地址欄中獲取上傳文件的外鏈，類似如下所示：

https://blog-static.cnblogs.com/files/benjieqiang/silence.min.js

然后使用<script>標簽將外鏈包裹，生成一個網頁腳本引用，類似如下所示：

<script src="https://blog-static.cnblogs.com/files/benjieqiang/silence.min.js"></script>

進入『設置』界面，將上面生成的網頁腳本引用復制到「博客側邊欄公告」文本域中。

使用腳本

為了提高園友的閱讀體驗，主題在博客園原有功能基礎上追加了一些輔助閱讀、以及人性化的功能模塊。其中部分模塊做了參數配置，用戶可根據自己意願選擇是否啟用。若啟用，再根據自己的信息或寫作習慣設置相關參數。

進入『設置』界面，將如下腳本代碼引用 追加 到「博客側邊欄公告」文本域中，其中配置參數根據下表自行修改。
官方給的配置代碼：

<script type="text/javascript">
    $.silence({
	base: {
            avatar: 'http://images.cnblogs.com/cnblogs_com/esofar/972540/o_avatar.jpg',
            favicon: 'https://files.cnblogs.com/files/esofar/favicon.ico',
        },
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            home: 'http://blog.esofar.cn',
            license: 'CC BY 4.0',
            link: 'https://creativecommons.org/licenses/by/4.0'
        },
        sponsor: {
            enable: true,
            paypal: null,
            wechat: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_wechat.png',
            alipay: 'https://images.cnblogs.com/cnblogs_com/esofar/972540/o_alipay.png'
        },
        github: {
            enable: true,
            link: 'https://github.com/esofar'
        }
    });
</script>

這是我的配置代碼：

<script src="https://files.cnblogs.com/files/benjieqiang/silence.min.js"></script>
<script type="text/javascript">
    $.silence({
	base: {
            avatar: 'https://pic.cnblogs.com/avatar/1415026/20190816215152.png',
            favicon: 'https://www.cnblogs.com/images/cnblogs_com/benjieqiang/1508613/t_Github_32px_1230449_easyicon.net.png',
        },
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            home: 'https://www.cnblogs.com/benjieqiang/',
            license: 'CC BY 4.0',
            link: 'https://creativecommons.org/licenses/by/4.0'
        },
        sponsor: {
            enable: false,
            paypal: null,
            wechat: 'https://www.cnblogs.com/images/cnblogs_com/benjieqiang/1508613/t_WeChatPay.jpg',
            alipay: 'https://www.cnblogs.com/images/cnblogs_com/benjieqiang/1508613/t_Alipay.jpg'
        },
        github: {
            enable: true,
            link: 'https://github.com/benjieqiang'
        }
    });
</script>

配置完成后，記得點擊「保存」按鈕，保存上述操作。

其他配置

進入『設置』界面，在「標題」文本框中設置博客標題，注意不支持顯示「子標題」；把「禁用模板默認CSS」復選框取消勾選。最后，點擊「保存」按鈕保存上述 3 步操作。

進入『選項』界面，在「控件顯示設置」中需要勾選的博客園官方功能模塊如下幾個：

• 必須要勾選：公告、我的標簽、隨筆分類、閱讀排行榜、推薦排行榜
• 自定義勾選：博客園鏈接、首頁鏈接、RSS訂閱、聯系

寫在最后

如果你感覺左上角的github顏色不好看，F12打開自己調，進入『設置』界面，然后加到對應的css位置。

可以參考我的哦。

.github-corner svg {
    fill: #069;
}