在Github博客加入博客背景 评论功能以及修改侧栏

Posted on | In

一.加入博客背景

1. 找到主博客\themes\next\source\css_custom下custom.styl文件，原始文件里面是空白的，用记事本打开然后添加如下文本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
@media screen and (min-width:1200px) {

    body {
    background-image:url(/images/backgroundpicturename.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size: cover
    }

    #footer a {
        color:#eee;
    }
}

注意上面url后面括号里面内容。

2.把需要的背景图片放在\themes\next\source\images文件夹里然后把图片名称填入步骤1，url后面backgroundpicturename,注意扩展名例子是jpg, 要根据实际情况修改。

3. 部署后就可以看到我们的背景了。我把图片进行了修改，在图片编辑器里面修改他的像素为电脑屏幕的实际像素值。

4. 如果感觉背景图片会挡住博客上的字可以调节，图片的透明度。在步骤1的文件中下面加入如下代码，

1
2
3
4
5
//background color and opacity
.main-inner {
    background: #fff;
    opacity: 0.9;
}

background后面的值是颜色代码，这里是白色。opacity是指透明度。这里可以根据需要进行调整。

二. 加入评论功能

1.网上推荐使用LiveRe, 在其主页申请一个免费帐号，再Install(安装)，city(一般网站)就可以得到一串代码注意data-uid后面引号里面的字符串。

2.再打开主目录下\themes\next的配置文件_config.yml文件找到如下内容，然后在your uid后面填上步骤1的字符串，注意不要引号，并去掉livere uid前面的#。部署好就可以了。

三. 修改侧栏目录的显示

在打开某一个文章的时候，侧栏老是在显示（下图一）如果想把隐藏掉。可以这样修改，在主目录下主题的配置文件\themes\next， _config.yml中sidebar display中在post值那里最前面加上#, 再去掉hide前的#, 就可以了（如下图二）

总结：

修改博客背景，添加评论功能，修改侧栏目录的显示方式