title: MySQL相关概念总结
categories: 工具
tags: [Hexo,博客]


没错,这几天又开始折腾一下博客了,最近的节奏天天白天待在实验室怼论文,晚上看C++,时间安排比较紧凑,就觉得更需要阶段性的总结吧,所以又来写博客了,github始终是一个好的选择,于是入了Hexo的坑。。折腾的过程心情总是有些复杂,在激动和mmp之间徘徊,虽然很多问题在wiki和issue里都有,但还是想总结一下自己亲自踩的坑。

2019-5-12

修改语雀自动同步,不用再本地编辑和推送了,见:
https://www.yuguocong.cn/yuque/mwklk2.html

更换了主题:Aircloud

##

2018-12-24

Hexo添加分类

在文件中使用categories,然后配置themes/_config.yml文件:

1
2
3
4
5
6
7
8
9
menu:
home: /
#categories: /categories/
archives: /archives/
tags: /tags/
books: /books
movies: /movies
friends: /categories/friends
about: /categories/about

添加背景图片

使用插件jquery-backstretch,编辑文件/themes/next/layout/_layout.swig,将下面的代码添加到最后面body的前面:

1
2
3
4
5
6
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>;
<script>
$("body").backstretch("http://blog-1252063226.cosbj.myqcloud.com/network/20181224194730.png");
</script>

</body>

但是好像没有效果,于是在文件themes\next\source\css_custom\custom.styl中添加了如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
background:url(https://source.unsplash.com/random/1600x900);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
}

//修改背景的不透明度
.main-inner {
margin-top: 60px;
padding: 60px 60px 60px 60px;
background: #fff;
opacity: 0.8;
min-height: 500px;
}

使用hexo-neat进行压缩以增加页面速度

采用hexo-neat进行压缩,插件地址为:https://github.com/rozbo/hexo-neat,使用步骤为:

1
2
#安装hexo-neat
$ npm install hexo-neat --save

添加配置到根目录下的_config.yml,在最后加上(这里跟别人的有一些改动,因为有一些配置出了问题,找了很久,但是还是没有解决,干脆就不折腾了):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# hexo-neat
# 博文压缩
neat_enable: true
# 压缩html
neat_html:
enable: true
exclude:
- '**/*.html'
# 压缩css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 压缩js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'

不用再做其他的改动,压缩前后的对比为:


主页文章添加阴影效果

在网站底部加上访问量

添加热度

网站底部字数统计

修改代码块自定义样式

打开\themes\next\source\css\_custom\custom.styl,向里面加入:(颜色可以自己定义):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}

添加访问量

打开\themes\next\layout\_partials\footer.swig文件,搜索<div class="copyright">,在这个div标签前边加上如下代码:

1
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后再在合适的位置添加如下代码,放在footer.swig文件的末尾:

1
2
3
4
5
<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

设置博文内链接为蓝色

通过路径:themes\next\source\css\_common\components\post\,打开post.styl文件,在文件中添加,如下字段:

1
2
3
4
5
6
7
8
.post-body p a{
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

设置文章末尾”本文结束”标记

显示每篇文章字数

文章末尾添加版权说明

直接修改主题配置文件,定位到post_copyright,将enablefalse改为true即可。

1
2
3
4
5
# Declare license on posts
post_copyright:
enable: true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

实现fork me on github

在右上角或者左上角实现fork me on github。
点击这里挑选自己喜欢的样式,并复制代码。 例如,我是复制如下代码:

1
<a href="https://github.com/you"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>

粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面),并把href标签改为github地址:

修改文章底部的#号标签

修改模板/themes/next/layout/_macro/post.swig,搜索 rel="tag">#,将其中的 #换成<i class="fa fa-tag"></i>

添加搜索功能

安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:

1
npm install hexo-generator-searchdb --save

编辑 站点配置文件 (站点根目录下),新增以下内容到任意位置:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

编辑 主题配置文件 (主题目录下),启用本地搜索功能:

1
2
3
# Local search
local_search:
enable: true

图床修改

由于以前都是直接使用的github私人仓库做的图床,但是有时候就是访问不到,因为博客是采用双部署的,可能coding上的已经是外链了被屏蔽了,所以还是得想点别的办法了。
看到网上说的各种,其实都还是有点问题,最终发现最近的腾讯对象存储,发现还真的可以。
软件名:picgo
链接:https://sspai.com/post/42310
使用方法:https://github.com/Molunerfinn/PicGo/wiki/详细窗口的使用#v5版本说明

Next主题个性化之自动更换背景图片

https://blog.csdn.net/mango_haoming/article/details/78473243

修改主题:yilia(已取消)

https://github.com/litten/hexo-theme-yilia

2018-4-22 加入畅言评论(已取消)

详见:https://blog.csdn.net/lcyaiym/article/details/76762074

2018-4-10 加入豆瓣读书和电影

详细见:https://github.com/mythsman/hexo-douban

页面中文无法显示的问题

这种中文问题,基本上都是编码的问题,但是开始各种都没找到原因,改了language里面的配置文件,最后发现是文件的编码,需要改成’无bom的utf-8的编码格式 ‘

主界面无法显示categories和tags的问题

这个问题真的是搞的有点久,因为基本上都被人忽略了,也可能很多人都没遇到而我恰好遇到了吧,不懂前端的我只能对于这种玄学问题强行百度了。
解决办法:将categories和tags目录下的index文件分别改成:

1
2
3
4
5
6
categories:
type: "categories"
layout: "categories"
tags:
type: "tags"
layout: "tags"

折腾完又不早了,希望以后好好看书,好好编程吧,最近没有什么特别大的梦想,只想安静的学习。。。

绑定gitpages到自己的域名

打开学生包,通过教育邮箱申请之后,可以在package中找到那么namecheap,注册通过GitHub进入,可以直接申请域名,会自动绑定到我们的gitpage,不过还需要一点点修改,就是把cname的www改成我们的gitpage页面,就可以了。。

采用coding和gitpages双部署

采用双部署的原因是国内访问github的速度有时候太感人了,有些人直接打不开,搞得有点尴尬,于是看到了网上所说的双部署,将默认的国内地址解析到coding的pages服务上,其他的绑定到gitpage上,这样国内的访问速度就快了。
具体的coding pages的搭建就不写了,在coding网站中建好仓库后,在我们本地的config文件后面的push repository 加上coding page仓库的地址就可以了。
具体的cname记录和A记录如下图:

Reference:
Hexo文档
Next主题文档
绑定到coding
Hexo搭建的GitHub博客之优化大全
解决 Travis CI 总是更新旧博客的问题
修改背景图片
Hexo添加分类