博客园二次元主题_进阶版
- 2020 年 3 月 11 日
- 笔记
我是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就好，没有其他的了。
