1. 主題

Cnblogs-Theme-SimpleMemory 1.3.3 版本

2. 權限申請

先在博客園申請開通博客，這里就不做介紹了，然后申請 js 權限（博客側邊欄公告）

3. 博客園后臺設定

3.1 用戶設定

引數：

標題：主要影響后臺的顯示；

博客地址名：https://www.cnblog.com/博客地址名/，這個只會修改只能通過郵件申請，我申請過一次，申請完之后用了 js 的話，還會用舊的鏈接地址訪問，需要把 css 和 js 的代碼清掉保存，再重新填寫再保存，才能快速清除；

登錄用戶名：這個影響不大，因為下面有個顯示名稱，就是替換這個的

密碼：忽略

顯示名稱（作者名）：這里會替換掉登錄用戶名的顯示規則，會影響瀏覽器標簽那里的 title，還有顯示作者的地方；

郵箱：評論那里可以選擇發送郵箱

回復通知郵箱：默認樓上那個

時區：utc+8 即可，北京時間

語言與地區：簡體中文

3.2 模板設定

引數：

博客皮膚：選擇SimpleMemory

頁面定制 CSS 代碼：

CSS代碼位置：/src/style/base.min.css ，拷貝此檔案代碼至頁面定制CSS代碼文本框處即可，

/src/style/base.min.css 的修改參考 /src/style/base.css，博客設定請使用壓縮版本，直接使用 /src/style/base.css 會字符超限！

禁用模板默認 CSS：這里要記得

博客側邊欄公告：

JavaScript 物件是被命名值的容器，值以名稱:值對的方式來書寫（名稱和值由冒號分隔），

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3',  //這里的版本要與最下面的 scripts 參考的 js 版本一致
        blogUser      : "欲戴王冠，必承其重...易波葉平",  //用戶名，主要是首頁打開的為孩子
        blogAvatar    : "https://cdn.jsdelivr.net/gh/ZhaoUncle/images/blog/avatar.png", //用戶頭像
        blogStartDate : "2017-11-17",  // 入園時間，年-月-日，入園時間查看方法：滑鼠停留園齡時間上，會顯示入園時間
        webpageTitleOnblur: '(o?v?)ノ Hi', //離開頁面，title 顯示的文字
        webpageTitleFocus: '(*′?｀*) 歡迎回來！',//點擊頁面，title 顯示的文字
        webpageIcon: "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/blog_logo.webp", //網站圖示
        fontIconExtend: "//at.alicdn.com/t/font_2104671_57vkche3kz2.css",//字體圖示配置，開個小章節單獨講
        menuNavList: [ // 選單導航 ['導航名稱', '鏈接', 'icon']
             ['Blog', 'https://zhaouncle.com/', 'icon-blog-solid'],
             ['CMS', 'https://link.zhaouncle.com/', 'icon-logo1'],
             ['k8sYaml 生成器', 'https://k8syaml.com/', 'iconkubernetes1'],//這里的iconkubernetes1就是用的我自己的圖示庫來配置的，默認不自帶
        ],
        //homeBannerText: "好好學習，天天向上！",我這里不設定，用的主題的自動獲取，默認獲取詩詞
        //homeBannerTextType: "jinrishici", //jinrishici：每次重繪隨機獲取一句古詩詞;one：每榷訓取一句話
        homeTopImg: [ //首頁輪播圖，可以設定多個進行輪播
            "https://cdn.jsdelivr.net/gh/ZhaoUncle/images/blog/home_top_bg.webp",
            "https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@master/img/webp/home_top_bg.webp"
        ],
        essayTopImg: [//文章頁面最上面那個圖片，每次重繪隨機選擇
            "https://cdn.jsdelivr.net/gh/ZhaoUncle/images/blog/nothome_top_bg.webp",
            "https://cdn.jsdelivr.net/gh/ZhaoUncle/images/blog/wallhaven-4o5zm9.webp"
        ],
        menuUserInfoBgImg: 'https://cdn.jsdelivr.net/gh/ZhaoUncle/images/blog/menu_bg.gif',//選單欄個人資訊背景圖
        codeLineNumber: true, //代碼行號渲染
        essayCodeHighlightingType: "prettify",//代碼渲染高亮
        essayCodeHighlighting: "obsidian", // 代碼渲染主題
        footerStyle: 2,// 頁腳樣式，默認有 1、2 兩種
        bottomText: { //頁腳標語
            left : "長風破浪會有時",
            right: "直掛云帆濟滄海",
        },
        reward: { //文章打賞按鈕，顯示在頁面右下角，
            enable: true,
            wechatpay: 'https://cdn.jsdelivr.net/gh/ZhaoUncle/images/blog/WechatPay.png',//我這里設定的贊賞碼
            alipay: 'https://cdn.jsdelivr.net/gh/ZhaoUncle/images/blog/Alipay.png',//支付寶付款碼
        },
        bottomBlogroll: [ // 友情鏈接，[[鏈接名,鏈接]....]
            ["易波葉平", 'https://zhaouncle.com/'],
        ],
        consoleList: [ //瀏覽器 console 輸出
           ['Zhaouncle CNBlogs', 'https://www.cnblogs.com/UncleZhao/'],
        ],
        advertising: true, //博客園廣告
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/[email protected]/src/script/simpleMemory.min.js" defer></script>

3.3 開啟公告控制元件

公告這里要選上，否則部分 js 檔案會無法生效，其他的就自行參考自己的需要了，

到了這一步，基本上一個完整的博客主題就搭建完成了，保存即可自由玩耍寫博客了，

4. 功能擴展

4.1 選單欄圖示

4.1.1 查看選單欄

字體圖示庫列舉了部分內置的圖示，但是還有一些需要自定義，比如 “k8sYmal 生成器” 這個圖示就沒有內置，需要我們自己去 iconfont ，阿里的圖示庫自定義，

4.1.2 登錄 iconfont

我一開始選擇“Github”登錄的方式，但是直接報錯了，所以我只能選擇“新浪微博”的登錄方式，主要是我不玩微博，我覺得很蛋疼

4.1.3 創建專案

我們先進到 “資源管理” -- “我發起的專案” ，創建一個 “博客園” 專案，如圖所示

4.1.4 生成代碼

然后生成代碼，填入 3.2 的 “博客側邊欄公告” 的 js 物件 fontIconExtend 更換成你自己的就行了，這個要添加圖示進去后才能生成，

4.1.5 圖示加入購物車

你可以直接搜索 “kubernetes”，也可以直接一個一個搜，不過一般不會這么傻吧？哈哈，重要的是選中圖示，把滑鼠移到圖示上面，然后添加進購物車

4.1.6 從購物車添加至專案

點擊購物車圖示，然后 “添加至專案” 即可，當然你也可以忽略前面創建專案的步驟，直接在這里的選中添加專案也行，隨你自己喜歡了，

4.1.7 添加成功

點擊確定，就添加成功了，然后在“生成代碼”就好啦，滑鼠移動到圖示上面，直接復制代碼，

4.1.8 配置 js 物件

然后直接生成代碼，香氣十足，再配置到 3.2 的 js 物件 “menuNavList”，完美添加圖示了，當然你也可以自己制作圖示然后上傳使用，

    menuNavList: [ // 選單導航 ['導航名稱', '鏈接', 'icon']
         ['k8sYaml 生成器', 'https://k8syaml.com/', 'iconkubernetes1'],//這里的iconkubernetes1就是用的我自己的圖示庫來配置的，默認不自帶
    ],

4.2 滑鼠點擊特效

4.2.1 滑鼠特效

4.2.1.1 煙花特效，我自己在使用的

4.2.1.2 文字特效

4.2.2 添加滑鼠影像

在博客園的設定那里，我們在 “頁面定制 CSS 代碼” 的“body” 代碼塊添加如下幾句代碼，這幾句代碼主要添加滑鼠的展示圖，至于點擊效應在下面的 js 代碼塊里面，如下圖所示

注意：至于如何快速找到 body，要么你直接瀏覽器 F12 搜，要么把 css 代碼 copy 出來咯，改完再放進去不就好了嗎

background-repeat: repeat;background-attachment: fixed;background-size:cover;cursor: url(https://cdn.jsdelivr.net/gh/ZhaoUncle/images/blog/cursor.ico),auto;

4.2.3 添加 js 代碼

注意：特效只需要添加一種即可

4.2.3.1 煙花特效

在 **“頁首 HTML 代碼” **那里添加以下代碼

<!--滑鼠點擊特效，煙花效應-->
<script src="https://cdn.jsdelivr.net/gh/ZhaoUncle/images/static/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>

4.2.3.2 文字特效

在 **“頁首 HTML 代碼” **那里添加以下代碼

<script type="text/javascript">
/* 滑鼠特效，文字特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("?富強?","?民主?","?文明?","?和諧?","?自由?","?平等?","?公正?","?法治?","?愛國?","?敬業?","?誠信?","?友善?");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

4.2.4 結束語

如上就能完成滑鼠的特效了，當然特效也不止這一種，剩下的等以后有興趣再試了，

4.3 網站統計

CNZZ 也就是友盟的網站統計功能，主題整合 CNZZ 網站統計，并對樣式進行了優化，如果需要本功能，請首先去 CNZZ 配置網站的統計，然后修改下面的代碼，添加至頁腳 Html 代碼中，

4.3.1 配置 CNZZ

網址：U-Web

4.3.2 添加站點

4.3.3 獲取統計代碼 ID

4.3.4 開啟詳細資料

4.3.4 配置頁腳 HTML 代碼

進入博客園后臺設定，配置頁腳 HTML 代碼，將 4.3.3 的統計 ID 替換，然后 copy 進去

<div id="cnzzProtocol"  style="display: none;">
    <span  id='cnzz_stat_icon_你的統計ID'></span>
    <script src='https://v1.cnzz.com/z_stat.php?id=你的統計ID&online=1&show=line' type='text/javascript'></script>
</div>

5. 參考資料

https://github.com/BNDong/Cnblogs-Theme-SimpleMemory

https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/

https://www.cnblogs.com/wkfvawl/p/9414180.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/135471.html

標籤：其他

上一篇：OpenWrite 博客群發使用步驟

下一篇：【網路協議】TCP/IP：資料鏈路層

博客園主題選址—搭建個人博客系列文章