博客园二次元主题_进阶版

03/11 17:17
阅读数 57

我是Mj,点击右下方"+"一键关注我.如果你喜欢我的文章,那么拒绝白嫖行为.然后..请多来做客鸭.

前言

没什么题材,把小号的文章搬过来.

最近有人找我要这个主题的代码。 我就来详细解答一下这个要怎么弄吧。 这是具体如何配置版,有些细节靠你自己脑补或搜索其它文章(我心想这篇文章你都找到了,其他热度更高的你还找不到?) 预览:

教程

材料

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

原文出处:https://www.cnblogs.com/mngmbear/p/12463691.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部