博客修改

发表于 更新于 分类于
零碎的博客配置记录

本帖持续更新中。。。

自定义主题

介绍

博客主题：matery

拿谷歌的pagespeed做个很粗糙的测试：


与用户最多的nexT主题相比：


有优化的空间，但跑得还是不错的。只要不瞎改的话，不用CDN加速也勉强可以。

音乐

转自洪卫の博客

加载音乐

这里用到是Aplayer插件，但是歌曲来源需要自己定义，可以这么加载音乐

1.直接加载：

可以在Blog\themes\matery\source\medias\music添加音乐文件.mp3和封面.jpg，然后在musics.json文件里添加路径。像这样：

1
2
3
4
5
6
[{
    "name": "The Road",
    "artist": "As The Stars Fall",
    "url": "medias\music\music_name.mp3",
    "cover": "medias\music\music_name.jpg"
}]

这种方式将文件直接推到仓库，不推荐。

2.外链：

首先我们找到网易云在线平台，任意找到一首歌点进去播放，可以在播放页面的地址栏拿到音乐ID号

然后修改下面网址
http://music.163.com/song/media/outer/url?id=XXXXXX.mp3
XXXXXX替换成刚刚的歌曲ID号

网页打开一般是MP3文件的地址，就相当于每一首的外链了。歌曲封面从页面提取封面链接即可。之后将得到的两个链接替换掉第一种方法的相对地址。比如这样：

1
2
3
4
5
6
[{
	"name": "The Road",
	"artist": "As The Stars Fall",
	"url": "http://music.163.com/song/media/outer/url?id=16468500.mp3",
	"cover": "http://p2.music.126.net/dQXurpol9xZAMx-6ohesHw==/109951163101866703.jpg?param=130y130"
}]

插入音乐

特别的，对于由于版权保护，无法生成外链的音乐，我们找到生成外链播放器，检查，并复制a链接/outchain/2/16468500/

将/outchain/2/16468500/插入到http://music.163.com/#/href后，http://music.163.com/#//outchain/2/16468500/就是生成外链的网址。
把HTML代码拷到post文档里就行了：
<div align="middle">这里粘贴刚刚复制的代码</div>

好听吗，不好听就说明这个方法已经失效了

更正：主题更新到next之后，Aplayer无了，直接拷贝网易的iframe吧：

评论区

我用的Gitalk插件。

最近Github疯狂给我发邮件，说是GitHub不赞成使用Authorizations API，将要Deprecated APIs and authentication，原因嘛，可能是这个：建议大家弃用 Gitalk 和 Gitment 等权限过高的 Github OAuth App，额，水一水了，看大佬怎么处理的：Gitalk Issues。到时候补充。。。

2020.02.25更新

Gitalk插件已更新版本，解决了问题。
谈到Github，安利一个chrome插件：Octotree
作用是树状列出项目文件和更改，像这样：

视频

B站网站视频分享的选项里有iframe的嵌入代码。

1
<iframe src="//player.bilibili.com/player.html?aid=48591341&cid=85086096&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

移动端嵌入视频比例：高度200px240px，宽度280330px；推荐大小为： height:200px ；width:330px
电脑端嵌入视频比例：高度460px以上，宽度640px以上；推荐大小： height:460px ；width:640px
其中，frameborder表示播放控制边框。为了满足响应式，稍微改一点即可。

1
2
3
<iframe id="spkj" src="https://player.bilibili.com/player.html?aid=48591341&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>
<script type="text/javascript">  
document.getElementById("spkj").style.height=document.getElementById("spkj").scrollWidth*0.76+"px";</script>

图片懒加载

项目地址

hexo-lazyload-image的作用是将博客里面img标签的src属性替换为一个loading image，把真实的图片地址放在data-origin属性下面。然后当你的网页翻到那张图片时，有一段js用data-origin的内容替换src，打到懒加载的目的。

懒加载可能会和gallery插件发生冲突。

安装npm install hexo-lazyload-image --save ，在根_config.yml配置

1
2
3
4
5
lazyload:
    enable: true
    onlypost: false # optional
    loadingImg: # optional eg ./images/loading.gif
    isSPA: false # optional

网站地图

npm自动生成网站的sitemap，然后将生成的sitemap提交谷歌 地址

安装npm install hexo-generator-sitemap --save 

1
2
3
# 自动生成sitemap
sitemap:
path: sitemap.xml

顺便说一下谷歌验证的网站所有权，简单一点，可以从谷歌下载提供的.html验证文件，文件里是google-site-verification键和值，将其上传到自己的站点。

需要注意的是，如果你将html文件放到博客\source\目录下，hexo会将其渲染成网站页面，文件就失效了，所以为了防止渲染，简单的做法是放到博客主题文件下，\themes\matery\source\,防止渲染，在生成站点后会在\public\下得到原来未渲染的.html文件。

robots.txt

robots.txt 是存放于网站根目录下的 ASCII 编码的文本文件，它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的，哪些是禁止爬取的。

robots.txt 放在博客目录下的 source 文件夹中，博客生成后在站点目录 public/ 下。

1
2
3
4
5
6
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Disallow: /js/
Disallow: /css/

git区分大小写

一个git的小知识。git默认文件是ignorecase = true，即推送仓库无视文件大小写，但是网站访问时，路径是区分大小写的。

当你修改文件夹名大小写，推送到github后，可能出现由于路径大小写的问题导致页面的404，此时去博客的.git目录下，找到config文件，将ignorecase改为false即可。

草稿draft

draft是草稿的意思。

hexo new draft newdraft这样会在source/_draft中新建一个newdraft.md文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用hexo server --draft在本地端口中开启服务预览。

如果你的草稿文件写完了，想要发表到post中，hexo publish draft newdraft，就会自动把newdraft.md发送到post中。

由于某些原因，博客主题改为了next。现在文章已经迁移完成，除了需要注意一下文件路径，以上的配置方法依然有效。

屏蔽点击事件

让博客变得简洁，在博客主js文件下加入下述代码。

next主题是next-boot.js文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 屏蔽F12
document.onkeydown = function () {
    if (window.event && window.event.keyCode == 123) {
        event.keyCode = 0;
        event.returnValue = false;
    }
    if (window.event && window.event.keyCode == 13) {
        window.event.keyCode = 505;
    }
    if (window.event && window.event.keyCode == 8) {
        alert(str + "\n请使用Del键进行字符的删除操作！");
        window.event.returnValue = false;
    }
}
// 屏蔽右键菜单
document.oncontextmenu = function (event) {
    if (window.event) {
        event = window.event;
    }
    try {
        var the = event.srcElement;
        if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
            return false;
        }
        return true;
    } catch (e) {
        return false;
    }
}
// 屏蔽粘贴
document.onpaste = function (event) {
    if (window.event) {
        event = window.event;
    }
    try {
        var the = event.srcElement;
        if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
            return false;
        }
        return true;
    } catch (e) {
        return false;
    }
}
//屏蔽复制，不建议开启
document.oncopy = function (event) {
    if (window.event) {
        event = window.event;
    }
    try {
        var the = event.srcElement;
        if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
            return false;
        }
        return true;
    } catch (e) {
        return false;
    }
}
// 屏蔽剪贴
document.oncut = function (event) {
    if (window.event) {
        event = window.event;
    }
    try {
        var the = event.srcElement;
        if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
            return false;
        }
        return true;
    } catch (e) {
        return false;
    }
}

Next主题自定义css

基于hexo-theme-next-8.0.2自带插件

现在正式改为了next主题，next的滚动条为原生默认的，不是很搭，自定义一下滚动条。

next的css样式文件为.styl，我之前只接触过.css，算是摸石头过河了。为了方便git拉取更新文件，最好将用户css样式放在自建的样式文件里，否则到时候冲突太多很麻烦。

1
2
3
4
5
6
7
8
9
10
11
custom_file_path:
  #head: source/_data/head.njk
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: themes/hexo-theme-next-8.0.2/source/css/_custom/custom.styl

这里style的路径从博客根目录开始：

既然是主题文件，我就直接放在主题文件夹下面的source里，以后想换其他主题也方便。

在css文件夹里新建_custom，然后在_custom文件夹里新建custom.styl，将用户自定义css放在此文件里即可。

添加scrollbar伪选择器样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
::-webkit-scrollbar {//by mednight4
    width: 5px;
    height: 5px;
    opacity:0;
}

::-webkit-scrollbar-track {//by mednight4
    border-radius: 10px;
    opacity:0;
}

::-webkit-scrollbar-thumb {//by mednight4
    border-radius: 10px;
    background-color: #000000;
}

添加背景图片

分别给body和侧栏添加图片

1
2
3
4
5
6
7
8
9
10
11
12
13
body { //by mednight4
  background :url("/images/body.png");
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-size: cover;
}

.sidebar {
  opacity:1;
  background:url("/images/sidebar.png");
  background-repeat: no-repeat;
  background-size: cover;
}

图片的路径在/themes/hexo-theme-next-8.0.2/source/images，也是放在主题文件夹的source里。

修改sidebar链接颜色

其实是修改左侧sidebar的a链接颜色，想直接在base.style里改，没找到。干脆在custom.styl覆盖好了。

1
2
3
4
.sidebar a:hover{
  color:#fc6423;
  border-bottom-color: #555;
}