之前，突然想弄一個自己的個人博客。經過一番查找，我最終選定了hexo來配置博客。以下是我目前在配置hexo的過程中遇到的一些問題。
公式渲染的問題
作為一個計算機專業的學生，難免會和各種數學公式打交道，使用截圖來呈現公式又感覺有些小low。而現在的Markdown也是支持類似LaTex的公式的。因此，我一開始選擇了使用hexo-renderer-kramed作為渲染引擎來渲染，也能較好的符合我的需求。可以通過如下命令來安裝hexo-renderer-kramed插件。
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
同時，需要對hexo-render-kramed的文件進行少量的修改。將node_modules\kramed\lib\rules\inline.js中的一部分進行如下修改，
escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
修改為：
escape: /^\\([`*\[\]()# +\-.!_>])/,
將
em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
修改為：
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
這樣最終得出的數學公式，能符合我的要求。
腳注的問題
某一天，我在預覽我的博客的時候，發現使用hexo-render-kramed渲染出的頁面，腳注的樣式不太符合我的審美。比如說，渲染出的腳注沒有編號，而是按照腳注的標識符來標識的；同時渲染出的腳注就在Markdown源文件中的位置，而不是期望的頁面底。因此，我果斷執行了如下命令來解決我的問題：
npm uninstall hexo-renderer-kramed --save
2333333333！
想啥，當然是卸載掉這個插件啦！
在經過一些查找后，我最終選用了hexo-renderer-pandoc這個插件。
執行
npm install hexo-renderer-pandoc --save
這款插件需要首先安裝pandoc[1]，可以去 pandoc-github 上下載它的安裝包進行下載。
之后在生成靜態頁面時，我又遇到了pandoc exited with code 9: pandoc: Unknown extension: smart錯誤。發現這是pandoc的版本低導致的問題，而我明明下載的是最新的版本啊。。。
最終我終於找到了原因，在hexo-renderer-pandoc的github的issue中，我發現了一個哥們和我遇到了同樣的問題，原來是Anaconda給我安裝的pandoc版本過低的原因。而我的解決方案是直接將其替換為最新的pandoc程序。。。不知道之后用python的時候會不會出現啥問題。
現在的腳注長這樣：
看着還行。
同時這款插件的公式也渲染的不錯
上面公式的源markdown代碼如下:
$$f\left( x \right) = \sum\limits_{i = 1}^n {X_i^2} $$
$$MD\left(n_{i, j}, n_{x, y}\right)=|i-x|+|j-y|$$
$f\left( x \right) = \sum\limits_{i = 1}^n {X_i^2} $
$MD\left(n_{i, j}, n_{x, y}\right)=|i-x|+|j-y|$
代碼塊復制的問題
作為預備程序員，怎么能忘記ctrl + c、ctrl + v呢。感覺之前展示的代碼都不帶直接復制的功能，屬實是有點弟弟了。於是，我准備在我的博客里加入代碼塊復制的功能。這里我參考了 這篇博客，來實現代碼復制的功能。
但是，可惜的是那篇博客中使用的是Next主題，而我使用的主題是 Ayer[2]，好像就不能直接照抄他的步驟了。可能是這個主題的使用人數不是太多，我沒有查找到這種主題配置代碼復制功能的教程，我只能自己想想怎么弄了。
Three Hours Later！
下面是我的步驟。
下載 clipboard.js
下載第三方插件：clipboard.js, 或者直接下載 (右鍵另存為)。
保存文件到 \themes\ayer\source\js 下。
clipboard.js 的使用
也是在 \themes\ayer\source\js 目錄下，創建 clipboard-use.js，添加內容如下：
//頁面載入完成后，創建復制按鈕
$(document).ready(function() {
/*頁面載入完成后，創建復制按鈕*/
!function (e, t, a) {
/* code */
var initCopyCode = function(){
var copyHtml = '';
copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
copyHtml += '<span>復制</span>';
copyHtml += '</button>';
$(".highlight .code pre").parent().parent().parent().parent().before(copyHtml);
new ClipboardJS('.btn-copy', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
}
initCopyCode();
}(window, document);
});
這里的代碼和 參考博客 有些不同，按照參考博客中的內容我會報空對象的錯誤。當然，這也有可能是我自己使用的問題。總之，為了穩妥，我將函數執行的時間手動調整為頁面加載完成之后。
樣式調整
同樣，需要調整\themes\ayer\source\css\main.css中的部分內容。
加入
.highlight:hover .btn-copy{
opacity: 1;
}
.btn-copy {
z-index: 999;
color: #333;
cursor: pointer;
display: inline-block;
font-weight: 700;
line-height: 1.6;
opacity: 0;
outline: 0;
padding: 2px 6px;
position: absolute;
transition: opacity 0.3s ease-in-out;
vertical-align: middle;
white-space: nowrap;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
background-color: #eee;
background-image: linear-gradient(#fcfcfc, #eee);
border: 1px solid #d5d5d5;
border-radius: 3px;
font-size: 1.3rem;
right: 5px;
top: 5px;
}
.btn-copy span {
margin-left: 5px;
}
同時，將.article-entry .highlight的position屬性修改為relative。
在模板中引入js文件
接下來就要在模板中引入這兩個js文件了。
在\themes\ayer\layout\_partial\head.ejs中引入這兩個文件，添加如下代碼
<script type="text/javascript" src="/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/js/clipboard.min.js"></script>
<script type="text/javascript" src="/js/clipboard-use.js"></script>
Pandoc是由John MacFarlane開發的標記語言轉換工具，可實現不同標記語言間的格式轉換，堪稱該領域中的“瑞士軍刀”。 ↩︎
Ayer中文說明: https://shen-yu.gitee.io/2019/ayer/ ↩︎