博客搭建的经历

一、前言

我总想着一个人学了那么多东西，最后究竟有什么留了下来了？到现在回过头来一看，发现没有看到有什么时留下来的，保存在记忆中的知识也会逐渐的忘掉。所以，弄一个自己的博客，把学过的，学到的东西留下来，让自己看得到，也能让别人看得到。与这个世界的交互，从此刻开始吧！个人是个夏娜入坑宅，所以再参考许多前辈的博客设计方案加自身体会搭建起来，欢迎大家讨论，浏览。

二、账号注册与申请我的博客

这里我使用的是博客园平台。

• 1、注册账号

• 2、在自己博客园的主页中点击写博

• 3、点击写博客后，需要申请写博，你就如实填写写博理由，提交后一般等待一两个小时就能通过了。

三、设置我的博客中的板式

我主要参考落花桂大佬的小白如何在博客园上创建一个自己的超美化博客这篇文章，第3部样式可直接参考，自己懂css的可以自己控制。主要还是背景图ε(┬┬﹏┬┬)3，我也是花了很久查找夏娜的图片，一开始百度在画师通搜索但发现图还是太小了，最后打听了p站

 (https://www.pixiv.com)需要vpn，我使用是chorme的插件crx4chrome,（地址https://www.crx4chrome.com/crx/39922/），下载完拖动到google浏览器的扩展程序，注册账号就可以使用。这里分享下我到p站收藏的百度网盘（链接：https://pan.baidu.com/s/1N1O-SB_WPm5O7eDD3oNZWQ提取码：v7rk备注文件名-换成/的是p站的图片地址，大家可以去那点赞，收藏，里面许多很大的图，有些像素达到4000多，许多二次元小姐姐)。

页面滚动进度条

页面滚动的时候会在顶部出现一个橙色的进度条，修改颜色到页面css里，找到以下代码修改


.scrollCls {
    position: fixed;
    top: 0;
    height: 3px;
    background: orange;
    transiton-property: width,background;
    transition-duration: 1s,1s;
    z-index: 99999;
}

四、在我的博客中添加看板娘

 我参考了这篇教程博客园添加看板娘教程，本想做个夏娜看板娘，也看了下B站视频，最后放弃了，希望强大的小伙伴可以尝试。这里就很轻松的用现成的。只是我改了css放右边，左侧放音乐播放器。

五、在我的博客中添加点击特效

六、在我的博客中添加雪花飘落特效与生成目录索引列表

<script language="javascript" type="text/javascript">
function GenerateContentList()
{
    var jquery_h3_list = $('#cnblogs_post_body h1');
    if(jquery_h3_list.length>0)
    {
        var content = '<a name="_labelTop"></a>';
        content    += '<div id="navCategory">';
        content    += '<p style="font-size:18px"><b>阅读目录</b></p>';
        content    += '<ul>';
        for(var i =0;i<jquery_h3_list.length;i++)
        {
            var li_content = '<li><a href="#label_' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
            content += li_content;
            $(jquery_h3_list[i]).attr('id','label_'+i);
        }
        content    += '</ul>';
        content    += '</div>';
        if($('#cnblogs_post_body').length != 0 )
        {
            $($('#cnblogs_post_body')[0]).prepend(content);
        }
    }    
}
GenerateContentList();
</script>

 

七、设置背景音乐

比较喜欢https://www.fghrsh.net/category/tutorial.html这个网站的播放器，暂时不知道如何实现o(╥﹏╥)o可以问那个博客主。我的播放器是用APlayer（参考方法https://www.cnblogs.com/jyroy/p/10374442.html），我放的音乐都是夏娜动漫里面的主题曲,有兴趣的小伙伴可以搜索。

八、设置博客文章评论功能

九、设置博客点赞按钮

十、设置博客文章返回顶端按钮

右上侧的github链接和返回顶部小火箭，

在页首html代码中添加:

<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 50px;
     height: 64px;
     display: block;
     background:url(https://s1.ax1x.com/2018/06/16/Cv19L8.png) no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});
</script>

侧边栏添加代码：

<a href="https://github.com/liuyishi0919" target="_blank">
　　<img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1;" src="https://s1.ax1x.com/2018/06/16/Cv1psf.png" >
</a>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

十一、代码框的复制按钮

十二、其他CSS样式代码

十三、如何正确设置博客园的个人博客访问量-百度统计

十四、求包养插件

最右侧的打赏点击插件打赏插件tctip使用方法（地址教程：https://www.cnblogs.com/an-shiguang/p/14382903.html），操作很简单就是去微信和支付宝那获取收款码。Thanks♪(･ω･)ﾉ大佬的包养。

 

此外发现另一个新颖的博客主题里面也有博客主的搭建方法在此分享https://www.cnblogs.com/xult/articles/12810724.html#。樱花飘飞和新颖的top按钮和上侧右侧的进度条。大家可以自主选择。