前言
没什么题材,把小号的文章搬过来.
最近有人找我要这个主题的代码。
我就来详细解答一下这个要怎么弄吧。
这是具体如何配置版,有些细节靠你自己脑补或搜索其它文章(我心想这篇文章你都找到了,其他热度更高的你还找不到?)
预览:
教程
材料
1、博客主题选Custom
2、禁用模板默认CSS不要勾选
文件在这里下载
文件目录
CSS.txt
侧边栏.txt
页脚.txt
main.txt
哦差点搞忘了，侧边栏支持js代码！！
侧边栏文件main
要注意的是侧边栏，侧边栏里的大部分都用文件代替，完全用它给我们的文件是无法达到自己想要的个性化的，导致很多链接（比如页首导航栏的链接都无法更改）会是其他人的，怎么解决呢？我们需要将他给我们的这个js的文件再行更改。
如果要达到方便，建议在txt里面直接更改，但是保存时我们需要把编码改为UTF-8，否则乱码。
txt里面你需要改的地方。
<!--离开页面改变title-->
var time;
var normar_title = document.title;
document.addEventListener('visibilitychange', function () {
if (document.visibilityState == 'hidden') {
clearTimeout(time);
document.title = '离开时的字段';
} else {
document.title = '回来时的字段';
time = setTimeout(function () {
document.title = normar_title;
}, 3000);
}
});
$("#navList").append('<li><a id="blog_nav_myhome" class="menu" href="首页地址">首页</a><i></i></li><li><a id="blog_nav_myyoulian" class="menu" href="友链地址">友链</a><i></i></li><li><a id="blog_nav_contact" class="menu" href="留言板地址">留言板</a><i></i></li><li><a id="blog_nav_rss" class="menu" href="我的随笔地址">归档</a><i></i></li><li><a id="blog_nav_myguanyu" class="menu" href="">关于</a><i></i></li>');
//添加标签icon
$('#blog_nav_myhome').prepend('<i class="fa fa-fort-awesome" aria-hidden="true"></i>');
$('#blog_nav_contact').prepend('<i class="fa fa-address-book-o" aria-hidden="true"></i>');
$('#blog_nav_rss').prepend('<i class="fa fa-rss faa-pulse" aria-hidden="true"></i>');
$('#blog_nav_admin').prepend('<i class="fa fa-list" aria-hidden="true"></i>');
$('#blog_nav_myyoulian').prepend('<i class="fa fa-link" aria-hidden="true"></i>');
$('#blog_nav_myzanshang').prepend('<i class="fa fa-heart" aria-hidden="true"></i>');
$('#blog_nav_myguanyu').prepend('<i class="fa fa-leaf" aria-hidden="true"></i>');
//添加li内嵌ui
let guanyu = '<ul class="sub-menu">' +
'<li><a href="关于1地址"><i class="fa fa-meetup" aria-hidden="true"></i>关于1</a></li>' +
'<li><a href="关于2地址"><i class="fa fa-area-chart" aria-hidden="true"></i>关于2</a></li>' +
'<li><a href="关于3地址"><i class="fa fa-heartbeat" aria-hidden="true"></i>关于3</a></li>' +
'<li><a href="关于4地址"><i class="iconfont icon-taohua" aria-hidden="true"></i>关于4</a></li>' +
'</ul>';
$('#blog_nav_myguanyu').after(guanyu);
}
//博客logo
var title = '<div class="site-branding">' +
'<span class="logolink moe-mashiro">' +
'<a href="首页地址" alt="随便">' +
'<ruby><span class="sakuraso">前面</span><span class="no">中间</span><span class="shironeko">后面</span>' +
'<rt class="chinese-font">下面</rt></ruby></a></span>' +
'</div>'
$('body').prepend(title);
这个可以研究一下。
main文件以后缀js的形式上传网络，放在侧边栏<script src=""></script>引号中间
侧边栏代码
侧边栏有一段代码，可以直接更改main文件里面的参数。
<script src=""></script>
<script type="text/javascript">
$.silence({
profile: {
enable: true,
avatar: '',
favicon: 'https://files-cdn.cnblogs.com/files/zouwangblog/blog_logo.gif',
notice: ''
},
我们看到这里第一行的src是空的，这里需要你上传更改好的main文件上传至网络（博客园就可以）。找到main文件地址填入src。
除了第一行以外就是main文件里面的参数了，这里是你可能需要改的代码。
avatar:头像地址
notice:公告
home:首页地址
wechat:微信支付图片地址
alipay:支付宝支付图片地址
homeTopImg: [
"",
],
notHomeTopImg: [
"",
]
homeTopImg是主页的图片，引号里面是图片地址，可以放多个图片地址，用引号括起来，逗号隔开；
notHomeTopImg是随笔顶部图片，引号里面是图片地址，可以放多个图片地址，用引号括起来，逗号隔开。
title: '首页标题',
text: '座右铭',
github: "github地址",
weibo: "微博地址",
telegram: "",
music: "网易云",
twitter: "",
zhihu:"知乎",
mail: "邮我",
这一段里面双引号里面都是地址，注释已经标注好(▽)
CSS与页脚
这里照常copy就好，没有其他的了。