博客園主題選址—搭建我的博客系列文章

時間  2020-11-01
標籤 javascript php css html java jquery git github web npm 欄目 JavaScript 简体版
原文   原文鏈接

記得點「推薦」或者「關注」哦！！！javascript

1. 主題

Cnblogs-Theme-SimpleMemory 1.3.3 版本php

2. 權限申請

先在博客園申請開通博客，這裏就不作介紹了，而後在 「博客側邊欄公告」 申請 js 權限（博客側邊欄公告）css

3. 博客園後臺設置

3.1 用戶設置

參數：html

  1. 標題：主要影響後臺的顯示；java

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

  3. 登陸用戶名：這個影響不大，由於下面有個顯示名稱，就是替換這個的git

  4. 密碼：忽略github

  5. 顯示名稱（做者名）：這裏會替換掉登陸用戶名的顯示規則，會影響瀏覽器標籤那裏的 title，還有顯示做者的地方；web

  6. 郵箱：評論那裏能夠選擇發送郵箱npm

  7. 回覆通知郵箱：默認樓上那個

  8. 時區：utc+8 便可，北京時間

  9. 語言與地區：簡體中文

3.2 模板設置

參數：

  1. 博客皮膚：選擇SimpleMemory

  2. 頁面定製 CSS 代碼：

    2.1 CSS代碼位置：/src/style/base.min.css ，拷貝此文件代碼至頁面定製CSS代碼文本框處便可。

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

  3. 禁用模板默認 CSS：這裏要記得 image-20200928112416329

  4. 博客側邊欄公告：

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

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3',  //這裏的版本要與最下面的 scripts 引用的 js 版本一致
        blogUser      : "欲戴王冠，必承其重...易波葉平",  //用戶名，主要是首頁打開的爲孩子
        blogAvatar    : "https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/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/image@main/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/image@main/blog/nothome_top_bg.webp",
            "https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/wallhaven-4o5zm9.webp"
        ],
        menuUserInfoBgImg: 'https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/menu_bg.gif',//菜單欄我的信息背景圖
        codeLineNumber: true, //代碼行號渲染
        essayCodeHighlightingType: "prettify",//代碼渲染高亮
        essayCodeHighlighting: "obsidian", // 代碼渲染主題
        footerStyle: 2,// 頁腳樣式，默認有 一、2 兩種
        bottomText: { //頁腳標語
            left : "長風破浪會有時",
            right: "直掛雲帆濟滄海",
        },
        reward: { //文章打賞按鈕，顯示在頁面右下角。
            enable: true,
            wechatpay: 'https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/WechatPay.png',//我這裏設置的讚揚碼
            alipay: 'https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/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/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>

3.3 開啓公告控件

公告這裏要選上image-20200928112416329，不然部分 js 文件會沒法生效，其餘的就自行參考本身的須要了。

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

4. 功能擴展

4.1 菜單欄圖標

4.1.1 查看菜單欄

字體圖標庫 列舉了部份內置的圖標，可是還有一些須要自定義，好比 「k8sYmal 生成器」 這個圖標就沒有內置，須要咱們本身去 iconfont ，阿里的圖標庫自定義。

4.1.2 登陸 iconfont

我一開始選擇「Github」登陸的方式，可是直接報錯了，因此我只能選擇「新浪微博」的登陸方式，主要是我不玩微博，我以爲很蛋疼

4.1.3 建立項目

咱們先進到 「資源管理」 -- 「我發起的項目」 ，建立一個 「博客園」 項目，如圖所示

4.1.4 生成代碼

而後生成代碼，填入 3.2 的 「博客側邊欄公告」 的 js 對象 fontIconExtend 更換成你本身的就好了，這個要添加圖標進去後才能生成。

image-20200928163806514

4.1.5 圖標加入購物車

你能夠直接搜索 「kubernetes」，也能夠直接一個一個搜，不過通常不會這麼傻吧？哈哈。重要的是選中圖標，把鼠標移到圖標上面，而後添加進購物車

image-20200928164246239

4.1.6 從購物車添加至項目

點擊購物車圖標，而後 「添加至項目」 便可，固然你也能夠忽略前面建立項目的步驟，直接在這裏的image-20200928164444244選中添加項目也行，隨你本身喜歡了。

image-20200928164401982

4.1.7 添加成功

點擊肯定，就添加成功了，而後在「生成代碼」就好啦，鼠標移動到圖標上面，直接複製代碼，

image-20200928164637400

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 煙花特效，我本身在使用的

image-20200928164637400

4.2.1.2 文字特效

image-20200928164637400

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/image@main/blog/cursor.ico),auto;
image-20200928170447277

4.2.3 添加 js 代碼

注意：特效只須要添加一種便可

4.2.3.1 煙花特效

在 **「頁首 HTML 代碼」 **那裏添加如下代碼

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

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 代碼中。

image-20200928174817556

4.3.1 配置 CNZZ

網址：U-Web

image-20200928173853524

4.3.2 添加站點

image-20200928174154923

4.3.3 獲取統計代碼 ID

image-20200928174331794

4.3.4 開啓詳細數據

image-20200928174425996

4.3.4 配置頁腳 HTML 代碼

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

<!--友盟訪問統計-->
<div id="cnzzProtocol"  style="display: none;">
    <span class="id_cnzz_stat_icon" 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>
image-20200928174738903

4.4 天氣預報

4.4.1 心知天氣

註冊登陸，這就我無需多說啦！

4.4.2 天氣插件

Weather Widget，咱們這裏直接點擊 「當即免費試用」 就能夠啦。

image-20200928232605509

4.4.3 天氣插件配置

4.4.3.1 自定義配置

自動定位：這裏不知爲什麼我電腦定位到「福州」，因此我乾脆關了算了，多是免費版致使的。

image-20200928233502331

4.4.3.2 生成代碼

將生成的 JS 代碼複製到 「頁腳 HTML 代碼」中，放在 4.3 網站統計的下面就好。

image-20200928233706388 image-20200928234644921

4.4.4 效果如圖所示

image-20200928235057890 image-20200928235137699

4.5 背景圖片

4.5.1 緣由

打開一篇博文，你是否因其空蕩蕩的背景而以爲索然無味呢？這個時候我沒就要利用本身強大的 copy 能力，給本身找張好看的背景丟上去咯

4.5.2 配置到 CSS 的 body 代碼段

background-image: url("https://img2018.cnblogs.com/blog/1358881/201909/1358881-20190910100015098-837598352.jpg");

如圖所示：

image-20200929091203925

4.5.1 效果圖以下

image-20200929092309224

4.6 網抑雲音樂

4.6.0 效果圖

image-20200929103039509

4.6.1 獲取網抑雲 ID

打開網頁版網抑雲，而後選擇你想播放的歌單，歌單能夠是你本身的也能夠是別人的，只要歌曲能播放就行，而後把 uri 後面的 id 給 copy 出來

image-20200929100851791

4.6.2 代碼添加

將一下代碼添加至頁腳Html代碼中，更改 歌單 ID 爲你本身的便可

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js
        id="歌單ID"
        lrc-type="0"
        server="netease"
        order="random"
        type="playlist"
        fixed="true"
        list-olded="true">
</meting-js>

如圖所示，代碼存放位置，直接放在以前的代碼後面就行

image-20200929102832380

4.7 去掉反對按鈕

4.7.1 何謂反對按鈕

看到這個按鈕，下意識就想刪了，你們可不要給我反對哦，不然就不更新了呢，不過我也不給你這個按鈕，哈哈！

image-20200929134759718

image-20200929134740622

4.7.2 在配置 CSS

在 **頁面定製 CSS 代碼 ** 裏面直接在最後一行添加一下代碼便可，記得保存由

#rightBuryit{display: none !important;}.buryit{display: none;}

如圖所示：

image-20200929232353044

4.7.3 效果圖

這個時候咱們再看就沒有啦，我是否是很雞賊呢？

image-20200929135145293

image-20200929232045242

4.8 複製文字加版權

當用戶複製文中內容(ctrl+C或鼠標右擊複製)時，會自動加上版權文字，csdn的代碼複製以及知乎的內容複製都有此功能。

4.8.1 添加到**頁首 HTML 代碼 **

<!--自動複製添加版權-->
<script language="javascript" type="text/javascript">
jQuery(document).on('copy', function(e)
    {
      var selected = window.getSelection();
      var selectedText = selected.toString().replace(/\n/g, '<br>');  // Solve the line breaks conversion issue 處理換行轉換的問題
      var copyFooter = '<br>---------------------<br>著做權歸做者全部。<br>' 
                            + '商業轉載請聯繫做者得到受權，非商業轉載請註明出處。<br>'
                            + '做者：易波葉平<br> 源地址：' + document.location.href
                            + '<br>來源：博客園cnblogs<br>© 版權聲明：本文爲博主原創文章，轉載請附上博文連接！';
      var copyHolder = $('<div>', {id: 'temp', html: selectedText + copyFooter, style: {position: 'absolute', left: '-99999px'}});
        
      $('body').append(copyHolder);
      selected.selectAllChildren( copyHolder[0] );
      window.setTimeout(function() {
          copyHolder.remove();
      },0);
    });
</script>

如圖所示：直接在鼠標特效後面換行加上就好，而後及的保存

image-20200929140933762

4.9 看板娘

4.9.1 效果圖

image-20200930132532566

4.9.2 全部文件

能夠私聊博主要，博主沒有藏私，也能夠在下面的代碼裏面本身獲取，若是合適，請給個推薦和關注，感謝博主的無私貢獻，雖然博主也是從其餘地方獲取來着。

點擊推薦和關注纔會下載哦，否則會出錯的呢 emmmm!!!

4.9.3 「博客側邊欄公告 」設置

<!--看板娘-->
<div class="waifu" id="waifu">
    <div class="waifu-tips" style="opacity: 1;"></div>
    <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    <div class="waifu-tool">
      <span class="fui-home"></span>
      <span class="fui-chat"></span>
      <span class="fui-eye"></span>
      <span class="fui-user"></span>
      <span class="fui-photo"></span>
      <span class="fui-info-circle"></span>
      <span class="fui-cross"></span>
    </div> 
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/static/kanbanniang/live2d.js"></script>
<script src="https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/static/kanbanniang/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>

image-20200930141616463

4.9.4 「頁首 HTML 代碼」配置

<!--看板娘-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/static/kanbanniang/waifu.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/static/kanbanniang/flat-ui.min.css"/>

image-20200930141533232

4.10 更改置頂圖標

4.10.1 效果圖

本來是 iconfont 的默認圖標，我這裏用個小火箭給替代了。

image-20201001153701615

image-20201001153954054

4.10.2 配置

在頁面定製 CSS 代碼那裏最後直接追加便可，記得選擇保存哦！

i.iconfont.icon-zhiding {background: url(https://cdn.jsdelivr.net/gh/ZhaoUncle/image@main/blog/o_rocket.png) no-repeat center center;}

image-20201001153846665

4.11 評論區優化

4.11.1效果圖

image-20201002203505959

4.11.2 配置 「頁面定製 CSS 代碼 」

#tbCommentBody {background: #fff url(https://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/raw/master/img/comment_bg.jpg) right -65px;background-size: 250px;background-repeat: no-repeat;}

image-20201002203553522

4.12 放大圖片（low）

4.12.1 配置 「頁面定製 CSS 代碼 」

.post img {cursor: pointer;transition: all 0.5s;}.post img:hover {transform: scale(1.3);}

4.13 我的書單

image-20201014175117428

4.13.1 建立隨筆

markdown 格式直接建立一個新「隨筆」，而後 markdown 文檔模式添加已下數據便可

<input id="bookListFlg" type="hidden">

4.13.2 配置書單數據

博客側邊欄公告設置，由於數據量很大，直接在最後一行新起，就不嵌套在原有的配置裏面，不過我以爲後期應該直接加到 github管理引用才方便，期待中。

<!--書單-->
<script type="text/javascript">
window.cnblogsConfig.bookList = [
        {
            title: '在讀',
            books: [
                {
                    cover: 'https://images.weserv.nl/?url=https://wfqqreader-1252317822.image.myqcloud.com/cover/71/25066071/t6_25066071.jpg&default=ssl:images.weserv.nl/?url=https://img3.doubanio.com/view/subject/l/public/s29962521.jpg',
                    name: '斷舍離',
                    formerNname: '',
                    author: '[日]山下英子',
                    translator: '賈耀平',
                    press: '湖南文藝出版社',
                    year: '2019-01|2020-10-14',
                    score: 2,
                }
            ]
        },
        {
            title: '已讀',
            books: [
                {
                    cover: 'https://images.weserv.nl/?url=https://wfqqreader-1252317822.image.myqcloud.com/cover/509/413509/t6_413509.jpg&default=ssl:images.weserv.nl/?url=https://img3.doubanio.com/view/subject/l/public/s27311101.jpg',
                    name: '知行合一王陽明',
                    formerNname: '',
                    author: '度陰山',
                    translator: '',
                    press: '北京聯合出版公司',
                    year: '2014-07|2020-04',
                    score: 4,
                },
            ]
        },
    ];
</script>

如圖所在位置所示：

image-20201014174943992

5. 參考資料

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

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

http://www.javashuo.com/article/p-fepzmtjf-bw.html

https://github.com/metowolf/MetingJS

https://www.cnblogs.com/enjoy233/p/10328361.html#複製正文文字時自動加版權

http://www.javashuo.com/article/p-tnfmitfr-eb.html

https://live2d.fghrsh.net/demo/1.4.2/

https://github.com/fghrsh/live2d_demo

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程