Silence - 博客園主題美化-部署


部署文檔

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

主題下載

點擊 下載 本主題最新版本源碼包,下載完畢后,使用解壓工具解壓並進入解壓后目錄,其結構大致如下所示:

│  .babelrc                                                   
│  .gitignore                                                 
│  LICENSE                                                    
│  package-lock.json                                          
│  package.json                                               
│  README.md                                                  
│                                                             
├─dist                           // 編譯發布目錄                                      
│  │  silence.min.js                                          
│  │                                                          
│  └─themes                                                   
│          dark.min.css                                       
│          default.min.css                                    
│          goddess.min.css                                    
│                                                             
├─docs                           // 文檔相關目錄                                       
│      change.md                                              
│      logo.png                                               
│      theme_dark.png                                         
│      theme_default.png                                      
│      theme_goddess.png                                      
└─src                            // 源碼存放目錄                               
    │  silence.js                                             
    │  silence.less                                           
    │                                                         
    ├─images                                                  
    │      contents.png                                         
    │      follow.png                                   
    │      gotop.png                                            
    │                                                         
    └─themes                                                  
            dark.less                                         
            default.less                                      
            goddess.less                                      
                                                              

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

使用樣式

打開./dist/themes文件夾,選擇一款自己心儀的主題風格代碼文件。

default.min.css         // 簡約 · 藍
dark.min.css            // 暗黑 · 綠
goddess.min.css         // 女神 · 粉

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

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

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

上傳腳本

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

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

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

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

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

注意:

我在配置這個網頁腳本引用的時候,按照上述方法配置,js腳本無法生效,需要將silence.min.js文件,重新命名為silence.js上傳,並修改引用js腳本才可以,修改后的js腳本為:

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

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

說明:主題腳本文件silence.min.js非必須上傳到博客園,也可上傳到七牛雲等對象存儲空間,但必須開啟 HTTPS 訪問。

使用腳本

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

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

<script type="text/javascript">
    $.silence({
        avatar: 'http://images.cnblogs.com/cnblogs_com/esofar/972540/o_avatar.jpg',
        favicon: 'https://files.cnblogs.com/files/esofar/favicon.ico',
        navigation: [
            {
                title: '標簽',
                url: 'https://www.cnblogs.com/esofar/tag/'
            },
            {
                title: '歸檔',
                url: 'https://www.cnblogs.com/esofar/p/'
            },
            {
                title: '導航',
                chilren: [
                    {
                        title: '谷歌',
                        url: 'https://www.google.com/',
                    },
                    {
                        title: '百度',
                        url: 'https://www.baidu.com/',
                    },
                ]
            },
        ],
        catalog: {
            enable: true,
            move: true,
            index: true,
            level1: 'h2',
            level2: 'h3',
            level3: 'h4',
        },
        signature: {
            enable: true,
            license: '署名-非商業性使用-相同方式共享 4.0 國際',
            link: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
            remark: null
        },
        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',
	    target: '_self'
        }
    });
</script>

配置參數說明表:

模塊 屬性 說明 類型 默認值
公共模塊 avatar 博主頭像 String null
favicon 網頁標題圖標 String null
navigation 自定義導航 Array null
catalog(博文目錄) enable 是否啟用 Boolean false
move 是否允許拖拽 Boolean true
index 是否顯示索引 Boolean true
level1 一級標題 String h2
level2 二級標題 String h3
level3 三級標題 String h4
signature(博文簽名) enable 是否啟用 Boolean true
auther 作者名字 String [Cnblogs Nickname]
license 共享許可協議名稱 String 署名-非商業性使用-相同方式共享 4.0 國際
link 共享許可協議鏈接 String https://creativecommons.org/licenses/by-nc-sa/4.0/
remark 其他備注 String null
sponsor(博文贊賞) enable 是否啟用 Boolean false
text 標題 String Sponsor
paypal PayPal 收款地址 String null
alipay 支付寶收款二維碼 String null
wechat 微信收款二維碼 String null
github(GitHub Corners) enable 是否啟用 Boolean false
fill 背景填充色 String [Silence Theme Color]
color 章魚貓顏色 String #fff
link Github 鏈接 String null
target Github 打開方式 String _self

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

其他配置

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

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

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

其他模塊取消勾選(可選操作)。最后,點擊「SAVE」按鈕保存操作。

至此,主題部署完成。

寫在最后

熟悉博客園的朋友都清楚,博客園提供了多種編輯器供我們選擇,不同編輯器模式下發表的博文樣式可能有所差別,本主題可能無法全面測試覆蓋重寫,所以本主題肯定會存在一些不足之處,如果您在使用遇到問題歡迎提交 Issues,我會及時響應。

不過本主題對 Markdown 編輯模式下的博文樣式支持相對較好,所以斗膽推薦您使用 Markdown 編輯器編輯發表新的博文,具體設置如下:

進入『選項』界面,在「默認編輯器」中選擇 Markdown 選項,然后點擊「SAVE」按鈕保存操作。

如果您還不知道什么是 Markdown ,是不是有點跟不上隊伍了。

如果您在部署遇到任何問題請給我發郵件 esofar@qq.com。

來源:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM