博客搭建和SimpleMemory的美化

导语

准备开始学习一门新的技能，碍于之前没有很系统的记录学习的流程。所以想着搭一个自己的博客网站，搭建博客过程中踩了不少坑，特地记录下来。
一开始本来选用了Github Pages~二次元主题的Aurora来搭建参考（蝉时雨的github），
搭建到github后发现不太好编辑文章和分类，所以又另寻了办法找到了博客园的搭建。用了SimpleMemory的相关美化开始食用~

搭建

首先要申请到博客园的账号啦当然，然后去申请博客和js服务（这个还有点小麻烦，试了几次才成功，填写申请资料的时候要注意点）

申请通过之后，就可以参考 SimpleMemory v1.* 文档对自己的博客进行一个美化

文档对应的github地址为：github直达

直接右边将文件的主支拉下来就可以得到样式和代码

注意点

在设置博客侧边栏公告的时候，可以通过博客上传文件到自己的文件里面，然后填入你的头像网址就可以将其内容替换掉。拿我的举例：

然后就可以直接复制到侧边栏公告中

下面的 homeTopImg 就是自己找的背景图片，其他设置也基本在这里了增改就可以。记住要加上‘逗号’ 以便于分割

这样我们的一个美妆博客就基本完成了。让我们看看效果

这就差不多啦，剩下的就是自己拓展了。

放下自己的拓展

博客侧边栏公告 js

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.4', // 版本
        blogUser      : "若云的学习笔记", // 用户名
        blogAvatar    : "https://files.cnblogs.com/files/blogs/681154/109951163773784534.bmp", // 用户头像
        blogStartDate : "2021-04-27", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
        homeBannerText: "鹏之背，不知其几千里也，怒而飞，其翼若垂天之云 !",
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.4/src/script/simpleMemory.min.js" defer></script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
 
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>

页首 HTML 代码



<script>

!function(){

function n(n,e,t){

return n.getAttribute(e)||t

}

function e(n){

return document.getElementsByTagName(n)

}

function t(){

var t=e("script"),o=t.length,i=t[o-1];

return{

l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)

}

}

function o(){

a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,

c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight

}

function i(){

r.clearRect(0,0,a,c);

var n,e,t,o,m,l;

s.forEach(function(i,x){

for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],

null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,

l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),

t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))

}),

x(i)

}

var a,c,u,m=document.createElement("canvas"),

d=t(),l="c_n"+d.l,r=m.getContext("2d"),

x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||

function(n){

window.setTimeout(n,1e3/45)

},

w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.οnresize=o,

window.onmousemove=function(n){

n=n||window.event,y.x=n.clientX,y.y=n.clientY

},

window.onmouseout=function(){

y.x=null,y.y=null

};

for(var s=[],f=0;d.n>f;f++){

var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})

}

u=s.concat([y]),

setTimeout(function(){i()},100)

}();

</script>

页脚 HTML 代码

<!--   网站统计  -->
<div id="cnzzProtocol"  style="display: none;">
    <span class="id_cnzz_stat_icon" id='cnzz_stat_icon_你的id'></span>
    <script src='//v1.cnzz.com/z_stat.php?id=你的id&online=1&show=line' type='text/javascript'></script>
</div>

<!--   播放器  -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="//cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="//cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js    
        auto="//y.qq.com/n/yqq/playlist/7787591166.html"
        fixed="true"

></meting-js>
<!-- require MetingJS -->
<script src="//cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<meting-js    
        auto="//y.qq.com/n/yqq/playlist/7787591166.html"
        fixed="true"

></meting-js>
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤开心❤","❤快乐❤","❤高兴❤","❤开心❤","❤快乐❤","❤开心❤","❤开心❤","❤开心❤","❤开心❤","❤开心❤","❤开心❤","❤开心❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

<script src="https://blog-static.cnblogs.com/files/Return-blog/xue.js"></script>
 <script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script>
 <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<script src="https://blog-static.cnblogs.com/files/Return-blog/xue.js"></script>

添加站点统计
1、先到友盟申请一个账号
2、然后点击网页端的申请，按照以下填写就可以申请到自己id

3、就会出现在下面的框框里

参考文章注意

1、
参考文章的页底太长了，需要删除一个div

2、文章底部的统计id，找了好久才找到一个可以成功检测并以英文显示统计出来的，需要先在添加站点处申请一个友盟的账号和对应的id, id在api处可以拿到，然后在参考文章处将id替换掉，就可以成功显示。

参考文章： https://blog.csdn.net/weixin_45765795/article/details/113928881

posted @ 2021-04-28 00:10 陈科科阅读(189) 评论(0) 收藏举报

刷新页面返回顶部