安装 blog-admin 博客插件

安装 hexo

安装

brew install node
npm install hexo-cli --no-optional -g
hexo init blog && cd blog
git clone https://github.com/iissnan/hexo-theme-next.git theme/next
npm install https://github.com/CodeFalling/hexo-renderer-org\#emacs --save
npm install hexo-deployer-git --save
npm install hexo-renderer-org --save
# 在org-mode下插入图片[[./article-title/image.png]],
# 生成后图片路径需要替换
# 替换node_modules/hexo-renderer-org/lib/renderer.js的parse_output函数
# 在out = whole[1]下面添加替换语句
#   out = out.replace(/img src=".\//g, 'img src="../')

配置

  • 配置 next 主题

    grep theme  _config.yml
      ## Themes: https://hexo.io/themes/
      #theme: landscape
      theme: next
  • 配置 hexo-renderer-org,通过 org 写博客

    grep -A5 org: _config.yml
    org:
    emacs: '/Applications/Emacs.app/Contents/MacOS/Emacs'
    common: |
        #+OPTIONS: toc:nil
        #+BIND: org-html-postamble \"Last Updated %C.</br>Render by <a href='https://github.com/CodeFalling/hexo-renderer-org'>hexo-renderer-org</a> with %c\"
        cachedir: './hexo-org-cache/'
  • 配置 swiftype 搜索

    grep -A2 Swiftype _config.yml
      # Swiftype Search Key
      swiftype_key: XXXXXXXXXXX
  • 配置 github 发布

    grep -A2 deploy: _config.yml
    deploy:
      type: git
      repo: https://github.com/keychar/keychar.github.io

生成、测试和部署

hexo g
hexo s
open http://127.0.0.1:4000
hexo d

在 org 中插入 more 按钮

#+BEGIN_HTML
<!--more-->
#+END_HTML

使用 blog-admin

如何添加本地搜索

执行如下命令安装 search 引擎

npm install hexo-generator-search --save

在~/blog/config.yml 添加如下配置

search:
  path: search.xml
  field: post

如何使用搜索

安装 algolia

npm install hexo-algolia --save

配置config.yml

algolia:
  applicationID: '****'
  apiKey: '**********'
  adminApiKey: '**********'
  indexName: 'hexo'
  chunkSize: 5000

生成索引

hexo algolia

表格示例

学号 姓名 年级
1234 张晓晓 一年级
1235 张要要 二年级
1235 张不不 三年级

代码示例

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
/**
* @file main.c
* @brief Print "Hello world" to screen
* @author evans
* @version 1.0
* @date 05/29/2016 16:31:39, 21th Sunday
* @par Copyright:
* Copyright (c) www.keychar.com 2016. All rights reserved.
*/




#include <stdio.h>
#include <stdlib.h>


/**
* @brief The entry of this program
*
* @param argc counts of argument
* @param argv argument variables stored in
*
* @return EXIT_SUCCESS
*/

int main (int argc, char **argv)
{

printf("Hello world\n");
return EXIT_SUCCESS;
} //end of function main

如何添加标签和分页

在 blog 目录执行如下目录

1
2
hexo new page tags
hexo new page categories

编辑~/blog/source/tags/index.md, 添加 type: tags

1
2
3
4
5
6
cat source/tags/index.md
---
title: tags
date: 2016-05-29 07:07:13
type: tags
---

编辑~/blog/source/categories/index.md, 添加 type: categories

1
2
3
4
5
6
cat ~/blog/source/categories/index.md
---
title: categories
date: 2016-05-29 07:17:43
type: categories
---

如何修改 search 对话框的按钮,改为 X 图标

编辑

  • 修改'<span class="popup-btn-close">Close</span>'为'<span class="popup-btn-close search-icon fa fa-close"></span>'

    1
    2
    3
    4
    5
    6
    7
    cat themes/next/layout/_partials/search/localsearch.swig
    <div class="popup">
    <span class="search-icon fa fa-search"></span>
    <input type="text" id="local-search-input">
    <div id="local-search-result"></div>
    <span class="popup-btn-close search-icon fa fa-close"></span>
    </div>
  • 修改颜色为红色, color: #FC6423;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    grep -A 10 'popup-btn-close' ./themes/next/source/css/_common/components/third-party/localsearch.styl
    .popup-btn-close {
    position: absolute;
    top: 6px;
    right: 14px;
    color: #FC6423;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    }

如何添加引用


#+BEGIN_QUOTE
Everything should be made as simple as possible,
but not any simpler -- Albert Einstein
#+END_QUOTE

Everything should be made as simple as possible, but not any simpler – Albert Einstein


#+BEGIN_HTML
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}
#+END_HTML

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io


#+BEGIN_HTML
{% note %}
Node stlye note
{% endnote %}
#+END_HTML

Node stlye note


#+BEGIN_HTML
{% note default %}
Default Node
{% endnote %}
#+END_HTML

Default Node


#+BEGIN_HTML
{% note primary %}
Primary Note
{% endnote %}
#+END_HTML

Primary Note


#+BEGIN_HTML
{% note info %}
Info Note
{% endnote %}
#+END_HTML

Info Note


#+BEGIN_HTML
{% note success %}
Sucess Note
{% endnote %}
#+END_HTML

Sucess Note


#+BEGIN_HTML
{% note warning %}
Warning Note
{% endnote %}
#+END_HTML

Warning Note


#+BEGIN_HTML
{% note danger %}
Danger Note
{% endnote %}
#+END_HTML

Danger Note