博客园二次元主题

最近有人找我要这个主题的代码。
我就来详细解答一下这个要怎么弄吧。

写在前面

配置这些东西，还真的懂一些前端语法，像我这种语法都没有完全搞懂的垃圾……哎。

教程

材料

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就好，没有其他的了。

来源：oschina

链接：https://my.oschina.net/u/4275644/blog/4296934

标签

javascript

alipay

wechat