The BIGBAI

Table of Content

杂记
创建Hexo主题
Hexo的一些小坑
1. Coding+Github双托管

Hi，这是BigBai的第一篇，欢迎大家以后常来看看。

杂记

故事要从很久以前说起，那时我还是一个少年，一直都想弄一个自己的个人页面，其ss原因细想起来，也不过如此：

可以Zhuangbility，作为一个学习CS的人，个人页面还是有点腔调的

确实也有必要整理一些七七八八的东西，并且要方便随时查看

用别的平台提供的博客什么的，不爽！

所以呢，就一直想弄一个这样的空间给自己。至于为什么久久没有实施，其原因也是非常简单：一来是我特别懒；二来是对于web系统我确实七窍只通六窍。随着时间的推移，事物的变迁，我终于受不了自己，要开始弄了。一开始想的是学习一下Django框架，简单搭一个部署到云服务器上就得了。可是，问题在于，我这么穷，又财迷，怎么可能租云虚机嘛？然而，车到山前必有路。前几个月，一位朋友给我介绍了Hexo。我看了一下简直perfect，利用github的pages展示静态页面，具备充足的前端主题，自己还不用管后端，那不是分分钟搞定？

这个时候问题又来了,Hexo的主题，我居然一个都不喜欢，我也是醉了。那没办法了，只好自己写前端了。我会写前端代码吗？当然不会啊！但是身为龙的子孙，必将冲破锁链，飞翔九天~自己写就自己写！都说一入前端深似海，以前我年幼无知，现在我是信了。各种自适应问题、浏览器不兼容、css样式莫名其妙的问题，我是服了。不过好在虽然磕磕绊绊，最终还是搞定了，也不知道有没有Bug，大家如果发现，欢迎下面留言告诉我，或者Email我。

很多coder都把Hexo用作技术博客，我觉得生活多姿多彩，什么都有点才好。所以BIGBAI就不作为纯技术博客了，那些有的没的也得写写啊。欢迎各位看官有事没事都来这里看我扯扯淡，看得开心还可以点击文末的donate打赏一下小的我。

好了，就闲扯这么多了。欢迎来到BIGBAI！

创建Hexo主题

该正经的时候也要正经一下，自己写主题学到的一些东西，还是记录一下比较好，万一以后要用，又忘记了。

模板的应用

Hexo的主题页面实际上是通过一系列.ejs文件中的html代码拼出来的。一般会设置一个layout.ejs文件，作为布局，之后无论是index.ejs或是archieve.ejs文件的内容都是添加到layout.ejs里面组成一份完整的前端页面代码。举个例子来说：

<div>
    Hi, Welcome to BIGBAI!
</div>

以上是index.ejs中的内容。就是显示一个div标签。再看layout.ejs：

<!DOCTYPE html>
<html>
    <body>
        <%- body %>
    </body>
</html>

通过<%- body %>就可以把index.ejs中的内容组合进来，所以，最终的页面代码就会变成：

<!DOCTYPE html>
<html>
    <body>
        <div>
            Hi, Welcome to BIGBAI!
        </div>
    </body>
</html>

明白了这个方式以后，其实就和写正常的前台代码没有什么区别了。至于具体的一些Hexo中的参数，可以参考官网说明

关于About页面

Hexo主题中的其实默认是只有index和archieve两种页面的。如果想在导航栏增加其他页面，例如About页面，需要在GitBash里输入：

hexo new page "about"

之后会在source文件夹下新建了一个about文件夹，里面有一个index.md文件。这里有一个问题，新建的页面默认都是走默认的post的模板的，如果想要强行变为其他的布局，可以在index.md中加上：

---
title: about
date: 2016-10-26 17:19:34
layout: new_layout
---

然后再创建一个new_layout.ejs的文件，写入自己想要的html代码就行了。

代码高亮

默认的Hexo主题是有代码高亮功能的，但是我自己弄完的主题，代码高亮就完全失灵了。于是我决定自己弄一下，主要使用的是highlight.js。

其实整个过程十分简单，只是我不熟悉这些js包的加载方式，弄的时候有点小错而已。首先需要在主题的前端代码中加入：

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>

<script>
    hljs.initHighlightingOnLoad();
</script>

之后在link一个自己喜欢的样式：

<link href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/darcula.min.css" rel="stylesheet">

这样只要是页面中有pre标签的地方就都运用起来了。如果对其不满意，还可以自己再调整一下pre的css样式。

Latex 公式的使用

这个通过MathJax来实现，在编辑的md文件中，加入一行：

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

然后需要使用行内公式的地方使用“\$公式\$”，行间公式用“$$公式$$”即可。但是要注意的是，markdown和mathjax存在转义的问题，所以需要转义的地方多加一个‘\’。例如下标需要写成“X\_{i}”。

Hexo的一些小坑

这部分想得起多少写多少吧，以后可能还会补充，毕竟做的时间零零碎碎，有些坑现在已经忘记了。

Coding+Github双托管

由于Github在国内有时候访问速度实在捉急，于是我决定把网站也托管到Coding。无论部署在哪里，首先一定要先安装Hexo的git部署工具：

npm install hexo-deployer-git --save

之后在自己网站的根目录下的config.yml中的deploy部分，如下填写：

deploy: 
  type: git
  repo: 
    coding: https://git.coding.net/thebigbai/thebigbai.git
    github: https://github.com/thebigbai/thebigbai.github.io.git
  branch: master

这里有个小小的坑是什么呢？如果使用ssh做提交，肯定没有问题。只是我个人觉得ssh公钥私钥太烦，不利于多台电脑写文章，就用了https方式提交。然而，github一直显示失败，搞得我各种郁闷。遇到这种情况，我强烈建议在确认格式，账号密码都对的条件下，反复提交，多次提交，不厌其烦的提交，总有一次你会成功的。这tm是github链接不稳定的原因！

好了，就先写这么多吧，以后就在这里Zhuangbility了！

BIGBAI的第一篇

杂记