博客園教程-定制皮膚

目錄

• 前言
  • 鏈接
  • 參考
• 筆錄草稿
• 步驟
  • 1. 注冊博客園
  • 2. 申請開通博客園
  • 3. 申請支持 JS 權限
  • 4. 配置皮膚
    • 添加 頁面定制CSS代碼
    • 添加 博客側邊欄公告

---

前言

記錄博客園皮膚設置。

鏈接

• 皮膚源碼及主要教程
• 我的博客
• 備用博客園定制頁面CSS源碼

參考

• 上面鏈接

筆錄草稿

步驟

1. 注冊博客園
2. 申請開通博客園
3. 申請支持 JS 權限
4. 配置皮膚

1. 注冊博客園

1. 進入 http://www.cnblogs.com 該鏈接進行注冊；
2. 注意查收激活郵件；
3. 輸入手機接收到的激活碼；
4. 完成激活並進入登錄頁面。

2. 申請開通博客園

1. 進入 我的博客；
2. 申請博客；
   1. 填寫申請理由
   2. 等待申請成功

3. 申請支持 JS 權限

1. 進入我的博客
2. 進入選項
3. 進入賬戶設置
4. 進入博客設置
5. 申請 JS 權限
   1. 等待申請成功

4. 配置皮膚

（當前處於網頁頁面 A）

1. 進入我的博客

2. 進入選項

3. 進入賬戶設置

4. 進入博客設置

5. 博客皮膚

   1. 選擇 SimpleMemory
      

6. 勾選 禁用模板默認CSS
   

7. 勾選 允許 MetaWeblog 博客客戶端訪問
   

做好以上步驟后，開始源碼配置

添加 頁面定制CSS代碼

1. 在新的網頁打開https://github.com/BNDong/Cnblogs-Theme-SimpleMemory（當前處於網頁頁面 B）

2. 進入src/style/base.min.css（當前處於網頁頁面 B）

   1. 復制其源碼（全部）（即是base.min.css文件內容）(去該鏈接復制 李柱明 ，但可能不是最新)
      

3. 粘貼到上面步驟中的 博客設置-->頁面定制CSS代碼 中（當前處於網頁頁面 A）
   

添加 博客側邊欄公告

此步驟必須申請並通過 JS 權限

1. 返回到https://github.com/BNDong/Cnblogs-Theme-SimpleMemory鏈接中（當前處於網頁頁面 B）
2. 進入說明文檔看官方教程或看本簡略教程，如 v1.*.*（當前處於網頁頁面 B）
3. 復制以下代碼到 上面步驟中的 博客側邊欄公告 中（當前處於網頁頁面 A）
   1. 該例子為一個簡陋的皮膚配置
   2. 需要豐富顯示效果，可以參考官方文檔，或留言討論。

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3', // 版本
        blogUser      : "userName", // 用戶名
        blogAvatar    : "https://xxxx.png", // 用戶頭像
        blogStartDate : "2016-11-17", // 入園時間，年-月-日。入園時間查看方法：鼠標停留園齡時間上，會顯示入園時間
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>

4. 保存（當前處於網頁頁面 A）
5. 刷新我的博客頁面即可。