主題預覽
主題適配
清空主題配置，設置博客皮膚為Custom，確保自己已經開通了JS權限，按以下步驟完成適配：
頁面定制CSS代碼
頁面定制CSS代碼引用的是基礎版的，為了不影響網頁加載，建議直接將代碼復制進頁面定制CSS代碼，而不是引用CSS文件。
最新版本鏈接 https://blog-static.cnblogs.com/files/gshang/gshang.2019.10.27.1.css
頁腳html代碼
頁腳一般用來引入js文件，並且在頁腳的最先加載。內容見下面的代碼。
<!--念兩句詩-->
<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>
這里面主要涉及到念詩的腳本（捷徑功能調用）、復制代碼塊的腳本、以及我制作的主題需要調用的各種函數腳本。
最新版本鏈接 https://blog-static.cnblogs.com/files/gshang/gshang.2019.10.27.1.js
博客側邊欄公告
博客側邊欄公告，主要負責信息初始化、各種功能代碼的調用。代碼如下。
<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>
具體使用方法是這樣的：
這里為了讓自定義更加開放便捷，在調用時，可以自行定義基礎信息，主要包括
- 博客公告信息自定義
- 博客側邊欄個人信息自定義
- 首頁輪播信息自定義
- 頂部導航欄擴展信息自定義
博客公告信息自定義
// 設置公告
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翻看關注按鈕的函數，具體是這樣的：
其余的都是一些文本信息，自行更改即可。
首頁輪播信息自定義
// 設置首頁輪播
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代碼，這一塊目前處於探索階段......。
后台配置預覽圖
說明
主題不定期進行修改，適配主題請及時備份，最好存在自己的博客園文件庫里。