GShang博客園主題高級版本適配教程詳解

時間  2019-11-08
標籤 gshang 博客 園主 高級 版本 適配 教程 詳解 简体版
原文   原文鏈接

主題預覽

image

博客Favicon自定義


image

導航欄擴展


image

博客內部公告信息


image

首頁輪播信息


image

側邊欄公告信息整合


image

博文發佈信息位置調整


image

博文側邊目錄


image

博文代碼塊複製


image

博文做者信息簽名


image

博客捷徑應用（更多實用功能正在探索）


image

博客主題夜間模式


image

Matlab語法高亮


image

移動底部功能欄


主題適配

清空主題配置，設置博客皮膚爲Custom，確保本身已經開通了JS權限，按如下步驟完成適配：javascript

頁面定製CSS代碼

頁面定製CSS代碼引用的是基礎版的，爲了避免影響網頁加載，建議直接將代碼複製進頁面定製CSS代碼，而不是引用CSS文件。css

最新版本連接 https://blog-static.cnblogs.com/files/gshang/gshang.2019.10.27.1.csshtml


頁腳html代碼

頁腳通常用來引入js文件，而且在頁腳的最早加載。內容見下面的代碼。java

<!--念兩句詩-->
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<!--代碼複製-->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>

<!--主題-->
<script src="https://blog-static.cnblogs.com/files/gshang/gshang.2019.10.27.1.js"></script>

這裏面主要涉及到唸詩的腳本（捷徑功能調用）、複製代碼塊的腳本、以及我製做的主題須要調用的各類函數腳本。git

最新版本連接 https://blog-static.cnblogs.com/files/gshang/gshang.2019.10.27.1.jsgithub


博客側邊欄公告

博客側邊欄公告，主要負責信息初始化、各類功能代碼的調用。代碼以下。npm

<script type="text/javascript">
    
    // 設置公告
    var news ='博客新增音樂播放器，點擊打開捷徑，切換或暫停音樂。' ;
    
    // 設置博客信息
    var myprofile = [{
        blogName: "GShang",
        blogAvatar: "https://pic.cnblogs.com/avatar/1489774/20190708183140.png",
        blogSign: "Stay hungry,Stay foolish.",
        blogFollow: "follow('30807ee3-3273-4cff-72df-08d619358b99')",
        QQ: "1220949046",
        Github: "https://github.com/GShang2018",
        WeChat: "https://img2018.cnblogs.com/blog/1489774/201910/1489774-20191015183429352-318054137.jpg"
    }];

    // 設置首頁輪播
    var mybanner = [{
            url: "https://www.cnblogs.com/gshang/category/1555205.html",
            img: "https://img2018.cnblogs.com/blog/1489774/201910/1489774-20191019152510780-1400941252.png",
            title: "2019年研究生數學建模比賽經驗分享"
        },

        {
            url: "https://www.cnblogs.com/gshang/p/11107946.html",
            img: "https://www.kanjiantu.com/images/2019/07/05/post4242f1ce89576c2f3.png",
            title: "動畫電影分享"
        },

        {
            url: "https://www.cnblogs.com/gshang/p/11185613.html",
            img: "https://img2018.cnblogs.com/blog/1489774/201909/1489774-20190923190114426-2061049622.png",
            title: "VIP視頻解析"
        },

        {
            url: "https://www.cnblogs.com/gshang/p/11135154.html",
            img: "https://www.kanjiantu.com/images/2019/07/05/post2b40b83305f79d463.png",
            title: "經常使用網站集合"
        },

        {
            url: "https://www.cnblogs.com/gshang/p/10746751.html",
            img: "https://www.kanjiantu.com/images/2019/07/05/post169393a677253c679.png",
            title: "實用工具分享"
        }


    ];

    // 設置導航欄擴展

    var mynav = [{
            id: "blog_nav_cnblogs",
            url: "https://home.cnblogs.com",
            title: "園子"
        },
        {
            id: "blog_nav_maintain",
            url: "https://www.cnblogs.com/gshang/p/11149316.html",
            title: "維護"
        },

        {
            id: "blog_nav_frieds",
            url: "https://www.cnblogs.com/gshang/p/11149804.html",
            title: "友鏈"
        },
        {
            id: "blog_nav_theme",
            url: "javascript:changeTheme()",
            title: "切換主題"
        },
        {
            id: "blog_nav_shortcut",
            url: "javascript:narrow()",
            title: "打開捷徑"
        }

    ];
    
    setFavio(myprofile); // 網頁tab圖像
    loadThemeColor(); //導入主題顏色
    setHeader(); //導航欄
    extendNav(mynav); // 導航欄擴展
    loadNewsinfo(news);//導入公告
    loadBanner(mybanner); //首頁輪播
    loadProfile(myprofile); // 公告欄我的信息
    changePublishinfo(); //博文發佈信息位置
    setPostSideBar(); //側邊欄目錄
    setSignautre(myprofile); //博文簽名
    loadMobileContent(); //移動端目錄功能欄
    commentIcon(); //評論區頭像
    blankTarget(); //文章連接新窗口打開
    copyCode(); //代碼塊複製
    //setMobileHeader(); //移動端導航欄
    tableScorll(); //表格滾動
    mymd(); //自定義語法
    runCode(); //文章內部運行代碼
    highlightMATLABCode(); //matlab自定義語法高亮
</script>

具體使用方法是這樣的：ide

這裏爲了讓自定義更加開放便捷，在調用時，能夠自行定義基礎信息，主要包括函數

  • 博客公告信息自定義
  • 博客側邊欄我的信息自定義
  • 首頁輪播信息自定義
  • 頂部導航欄擴展信息自定義


博客公告信息自定義

// 設置公告
var news ='博客新增音樂播放器，點擊打開捷徑，切換或暫停音樂。' ;
loadNewsinfo(news);//導入公告

這兩個是一塊兒的，若是須要，則修改文本便可；若是不須要，把這兩個一併刪除（或者註釋掉）。工具


博客側邊欄我的信息自定義

// 設置博客信息
var myprofile = [{
        blogName: "GShang",
        blogAvatar: "https://pic.cnblogs.com/avatar/1489774/20190708183140.png",
        blogSign: "Stay hungry,Stay foolish.",
        blogFollow: "follow('30807ee3-3273-4cff-72df-08d619358b99')",
        QQ: "1220949046",
        Github: "https://github.com/GShang2018",
        WeChat: "https://img2018.cnblogs.com/blog/1489774/201910/1489774-20191015183429352-318054137.jpg"
    }];
loadProfile(myprofile); // 公告欄我的信息

這兩個是一塊兒的，若是須要，則修改對應的資源連接或者文本信息；若是不須要，把這兩個一併刪除（或者註釋掉）。

這裏須要注意的是，blogName是博客網站的最後一級，本身取的名字（如cnblogs.com/gshang）。blogFollow這個調用的是博客園自帶的函數，由於涉及到id，所以須要本身F12翻看關注按鈕的函數，具體是這樣的：

image

其他的都是一些文本信息，自行更改便可。


首頁輪播信息自定義

// 設置首頁輪播
var mybanner = [{
            url: "https://www.cnblogs.com/gshang/category/1555205.html",
            img: "https://img2018.cnblogs.com/blog/1489774/201910/1489774-20191019152510780-1400941252.png",
            title: "2019年研究生數學建模比賽經驗分享"
        },
                    
    ...
                    
    ];
loadBanner(mybanner); //首頁輪播

這兩個是一塊兒的，若是須要，則修改對應的資源連接或者文本信息；若是不須要，把這兩個一併刪除（或者註釋掉）。這裏支持任意個數的banner，若是須要多個，則複製多份，修改內容便可。


頂部導航欄擴展信息自定義

// 設置導航欄擴展
var mynav = [{
            id: "blog_nav_cnblogs",
            url: "https://home.cnblogs.com",
            title: "園子"
        },

                 ......

    ];
extendNav(mynav); // 導航欄擴展

這兩個是一塊兒的，若是須要，則修改對應的資源連接或者文本信息；若是不須要，把這兩個一併刪除（或者註釋掉）。這裏支持任意個數的banner，若是須要多個，則複製多份，修改內容便可。


其餘自定義函數

其餘自定義的函數，若是不須要，則刪除或者註釋掉便可。函數順序最好不要改動，以避免影響加載。


頁首Html代碼

<!--符號圖標-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

<script>
    // 設置捷徑
    var myHtml =
        '<h3>念兩句詩</h3>' +
        '<div class="poem"><p id="poem_sentence"></p><p id="poem_info"></p></div>' +
        '<h3>博主推薦</h3>' +
        '<embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=auto src="//music.163.com/outchain/player?type=0&id=3046013012&auto=0&height=auto"></embed>' +
        '<h3>音樂點播臺</h3>' +
        '<embed frameborder="no" border="0" style="border-radius:4px;" marginwidth="0" marginheight="0" width=100% height=426 src="//www.jikefan.com/music/"></embed>';
    loadShortcut(myHtml); //導入捷徑
</script>
<script type="text/javascript">
    jinrishici.load(function(result) {
        var sentence = document.querySelector("#poem_sentence");
        var info = document.querySelector("#poem_info");
        sentence.innerHTML = result.data.content;
        info.innerHTML = '——【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》';
    });
</script>

這裏主要是捷徑功能的配置，你能夠自行往裏面添加html代碼，這一塊目前處於探索階段......。


後臺配置預覽圖

image


說明

主題不按期進行修改，適配主題請及時備份，最好存在本身的博客園文件庫裏。

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