博客园主题--搬运自博主BNDong
首先当然是展示一些这个主题的一些页面,其实具体完全可以参考https://www.cnblogs.com/bndong/
- 主要是自己加了一个天数计数的代码,毕竟最初的想法就是实时网页可以查看天数计数。嘿嘿嘿~
- 还有就是底部链接了一个接口,随机更换文字。
- 然后就是方法和代码啦
话不多说,上教程:
- 申请博客园账号,登录
- 申请开通博客,注册网址(选个好记的就行啦),设置页面申请js权限(等待天数不等)
- 设置界面,主题选择 SimpleMemory
- 页面定制 CSS 代码框里复制 @import url(https://blog-static.cnblogs.com/files/ache/myblog.css); 即可(因为我是上传了CSS文件,然后在自己博客内引用一下,大家应该都可以引用,如果不行就自己复制下面的然后上传(即复制下面很长的样式表),记得打勾禁用模板默认 CSS)
- js权限框复制下面代码,那个是首页壁纸,天数计数会有注释
- 底部的随机文字的js代码
PS:由于代码段都很长,就全放在最后了
代码部分
- 第一处:博客侧边栏公告(支持HTML代码)(支持 JS 代码)
<script type="text/javascript">
window.cnblogsConfig = {
GhVersions: 'v1.2.3',
blogUser: "AlsoRan", // 用户名
homeBannerText: "On The Way~🎈",
blogAvatar: "https://images.cnblogs.com/cnblogs_com/ache/1644357/o_200224105015icons8-iron-man-512.png",//头像
blogStartDate: "2020-02-09", // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
webpageTitleOnblur: 'Hi',
//下面是网页的小icon
webpageIcon: 'https://images.cnblogs.com/cnblogs_com/ache/1644357/o_200219114548icons8-home-page-96.png',
//文章页面的图片背景,多添几个就会有随机切换效果,岂不美滋滋
essayTopImg: [
"https://images.cnblogs.com/cnblogs_com/AlsoRan/1644357/o_20020913443946.jpg",
"https://images.cnblogs.com/cnblogs_com/ache/1644357/o_200216054649o_20021512560622.jpg",
"https://images.cnblogs.com/cnblogs_com/ache/1644357/o_20022410503214.jpg"
],
//主页的图片背景
homeTopImg: [
"https://images.cnblogs.com/cnblogs_com/ache/1644357/o_20022410503214.jpg",
"https://images.cnblogs.com/cnblogs_com/AlsoRan/1644357/o_20020913443946.jpg",
"https://images.cnblogs.com/cnblogs_com/ache/1644357/o_200216054637o_20021512574711.jpg",
"https://images.cnblogs.com/cnblogs_com/ache/1644357/o_20021511482217.jpg",
],
}
</script>
<script
src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.2.3/src/script/simpleMemory.min.js">
</script>
- 第二处:页首 HTML 代码(就是那个可以计数天数的js代码)
<script>
window.setTimeout("share_data_time()", 1000);
//毕业时间
BirthDay = new Date("1/7/2018 00:00:00");//月/日/年 就很奇怪,这个是网上找的啦
//获取当前时间
today = new Date();
timeold = (today.getTime() - BirthDay.getTime()); //总豪秒数
secondsold = Math.floor(timeold / 1000); //总秒数
e_daysold = timeold / (24 * 60 * 60 * 1000);
daysold = Math.floor(e_daysold); //相差天数
e_hrsold = (e_daysold - daysold) * 24;
hrsold = Math.floor(e_hrsold); //相差小时数
e_minsold = (e_hrsold - hrsold) * 60;
minsold= Math.floor(e_minsold) //相差分钟数
seconds = Math.floor((e_minsold - minsold) * 60); //相差秒数
//将所获取的时间拼接到一起,再把值显示到页面,这里我投机找到了一个没有用的sbTitle,所以就这样利用啦,id不可改,所以只能是替换内容啦
setInterval("document.getElementById('sbTitle').innerHTML='💗💖第'+daysold.toString()+'天💖💗';", 1000);
</script>
- 第三处:页脚 HTML 代码(显示一段文字的代码)
<div id="footer" style="margin:80px;">
<script type="text/javascript" src="https://api.xygeng.cn/dailywd/api/getjs.php"></script>
</div>
- 第四处:页面定制 CSS 代码(前面提到的样式表全部代码)
本来打算贴源码的,后来发现太长了,还是点开链接查看吧!
样式表全部代码
好了~
你看完了,代码太长啦~
也是搬运工一个啦,记录一下~