Test

发表于 更新于 分类于 ，
本文字数： 3.3k

本来想写个测试文档作为第一篇博文来着，突然觉得记录一下搭建这个网站的过程也不错，名字还是叫 test 吧。具体搭建过程基本参考这个知乎专栏，不过这篇文章写得并不全，有些细节丢失了之后导致某些地方有点卡手。我首先会把搭建时遇到的一些问题和解决方法列举一下（Part 1），之后应该会陆陆续续整点新功能，所以到时候就接着在这里补充一些遇到的新问题（Part 2）。

Part 1

设置 ssh 以免密部署

在使用 ssh-keygen 生成密钥并于 github 上 add ssh key 后，先在 ~/.ssh 里测试一下配置是否成功

1
$ ssh -T git@github.com

然后得到了成功提示如下：

1
Hi fomiuna! You've successfully authenticated, but GitHub does not provide shell access.

其实按照原文章搞的话必不可能成功，因为 ssh-agent 并没有启动。所以需要

1
2
eval `ssh-agent -s`
ssh-add

之后才可。接下来在博客根目录下的配置文件 _config.yml 中修改 deploy 属性如下

1
2
3
4
deploy:
  type: git
  repo: git@github.com:fomiuna/fomiuna.github.io.git
  branch: master

若按原文直接在 repo 写 https 好像不太行，还是要输入密码。

关于数学公式渲染

我相信咱们还是会写点学习上的东西，不会一直在博客上吹逼吧，不会吧不会吧？
咳咳，话题回来。本来我参考了这篇博文来配置 mathjax 渲染的，但是按这篇文章把 marked 引擎换成 kramed 后还是没卵用。然后我去 next 主题下的配置文件中瞅了一眼 mathjax 属性，发现注释中已经告诉我去官网看 instruction 了，于是按提示装了 pandoc 之后问题就得到了解决。

现在拿分部积分公式试一下效果： \[ \int_{\Omega}u\ \mathrm{div}(\mathbf{V})\mathrm{d}x = \int_{\partial\Omega}u\mathbf{V}\cdot \mathbf{n}\mathrm{d}S-\int_{\Omega}\mathrm{grad}(u)\cdot\mathbf{V}\mathrm{d}x \]

（不错，我很满意）

博文配图

参考一下这个，咱们可能还是考虑一下外链比较好。

我先搞个本地的图试试看：

其实第一次搞实在遇到了很多问题，跑去搜索并用了网上各种解决方案的之后，成功把网站搞崩了（怎么都加载不出来主题）并且不知道怎么纠正。后来还是老老实实读官方文档照着重新再做，基本就没再遇到什么问题了（所以小白还是不要先去整大佬们花里胡哨那一套）。

那么到此，一血（指第一篇博文）我就拿下了。

Part 2

给文章加阴影边框

在网上找了不少 adding shadow effect 的文章，都是需要在 css\_custom\custom.styl 文件中改 .post 属性。但因版本更新问题，在我使用的 NexT（ver 8.0.2）里已取消了此路径下的这个文件夹和样式表。新的 Custom File Support 告诉我们：可以在主题 config 文件中取消注释 custom_file_path 里面你想作个性化调整的属性，然后在博客根目录下的 source\_data 文件夹中进行相应文件（没有就新建）的自定义调整。

比如我们想要实现的这个功能是在 style 属性中，在主题 config 文件中开启 custom_file_path 的 style 选项后，再到 source\_data\styles.styl 中添加

1
2
3
4
5
6
7
8
9
10
11
12
.post-block {
    color: black;
    margin-top: 25px;
    margin-bottom: 40px;
    background: #fff;
    opacity: 0.9;
    border-radius : 12px; // 圆角，爱了
    -webkit-box-shadow: 0 0 8px rgba(128, 128, 128, 1.0);
    -moz-box-shadow: 0 0 8px rgba(128, 128, 128, 1.0);
    // box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.06), 0 1px 5px 0 rgba(0,0,0,0.12);
    padding: 25px; // 左右边距
}

p.s. 在我查官方文档前，先是在 css\_common\components\post 文件夹里逗留时找到了 post.styl 里的 .post-block 属性，然后试着把其他文章里给出的填写例子加进去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 25px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    visibility: hidden;
  }
}
...

不出所料也是起作用的。

博客背景图片设置及 block 透明化处理

仍在自定义的 styles.styl 里进行调整。需要注意的是对页面头所在的 .header-inner 样式里不能直接调整透明度 opacity，因为 header-inner 包含 header.swig 中的所有内容，若使用 opacity 进行配置，子结点会出很多问题（例如会影响到搜索框的透明度）。所以我们使用 rgba 来进行调整

1
2
3
.header-inner {
  background: rgba(255,255,255,0.85);
}

现在待解决的问题是如何在保持 post block 的透明化前提下对其中插入的图片做非透明化处理（透明化图片和背景会相互干扰，看上去很不舒服）。

关于应对上传速度慢的方法

由于 GFW 的存在 writing objects 速度会十分感人，经常会遇见上传失败的情况。在这里记录一下适用自己的解决方案。

由于我的 VPN 仅对 http 代理，所以只能考虑将上传方式从 ssh 更改到 https 了（目前免密部署用不了了）。首先在博客文件夹下的 \.deploy_git\.git 的 config 文件里进行如下添加 

1
2
3
4
5
6
7
[http]
  proxy = http://xxx:y
[https]
  proxy = https://xxx:y
[branch "master"]
  remote = https://github.com/zzz/zzz.github.io.git
  merge = refs/heads/master
这里 xxx:y 是代理地址与端口号，zzz 是 repo 名。如果上传文件大小有限制，可以在 http 和 https 项中添加 
1
postBuffer = 524288000
然后到主站配置文件 _config.yml 里修改 deploy 配置项 
1
2
3
4
5
deploy:
  # other deployer
  - type: 'git'
    repo: https://github.com/zzz/zzz.github.io.git
    branch: master
之后的每次部署（如 hexo clean && hexo g -d）都将要求输入用户名与密码了。Github 在即将进行的 git 操作更新中将取消支持用户名-密码验证了（见此），目前的方法到时候可能也会受到影响。