1. 程式人生 > 實用技巧 >設定更漂亮的部落格園主題

設定更漂亮的部落格園主題

在逛部落格園的時候發現了一款特別漂亮的主題,效果圖如下,找了好久終於找到了設定的方法

效果預覽

部落格首頁樣式

部落格詳情樣式

側邊欄樣式

不得不誇讚一下作者精湛的技術,這裡為了快速上手這套面板我就挑肥揀瘦的快速過一遍教程,有意者也可以通過作者的文件進行設定,地址在結尾給出

後臺基本調整

1. 修改部落格的預設面板,所有樣式都是基於該面板進行設定的

2. 基本的設定

3. 選項頁面的調整

開始設定樣式

1.頁面定製 CSS 程式碼 中(注意禁用預設樣式)新增以下地址中的css程式碼:

https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/blob/master/src/style/base.min.css

2.部落格側邊欄公告中加入以下內容:

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3',        // 版本
        blogUser      : "部落格首頁的暱稱",   // 使用者名稱
        blogAvatar    : "頭像的URL地址",  // 使用者頭像
        blogStartDate : "2020-01-01",    // 入園時間,年-月-日。入園時間檢視方法:滑鼠停留園齡時間上,會顯示入園時間
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js" defer></script>

大功告成

接下來訪問自己的部落格頁面就可以看到效果了!如果未達到目標的效果可能有哪些地方出了遺漏,可以看作者文件進行設定

原作者地址:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/