Configure Hexo

Posted on | Edited on | In | | Views:
| 9.7k | 7 min

There are some useful tips to configure hexo, especially for nexT theme.

Add Your Own Website

Method 1

Putting those files in ./public

But $ hexo clean will delete them

Method 2

Adding them to ./themes/themes-name/source

And $ hexo g can generate them

And you can add the url of this file into the config file of the theme to make it to be displayed.

1
2
menu:
  home: / || home

Add Canvas-nest

ref

Installation

Step 1: Go to NexT dir

Change dir to NexT directory. There must be layout, source, languages and other directories:

1
2
3
$ cd themes/next
$ ls
bower.json  _config.yml  docs  gulpfile.coffee  languages  layout  LICENSE.md  package.json  README.md  scripts  source  test

Step 2: Get module

Install module to source/lib directory:

1
$ git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

Step 3: Set it up

Enable module in NexT _config.yml file:

1
2
3
4
5
6
7
canvas_nest:
  enable: true
  onmobile: true # display on mobile or not
  color: '0,0,255' # RGB values, use ',' to separate
  opacity: 0.5 # the opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # the number of lines

And, if you wants to use the CDN, then need to set:

1
2
3
4
vendors:
  ...
  canvas_nest: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest.min.js
  canvas_nest_nomobile: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-nest@1.0.0/canvas-nest-nomobile.min.js

Update

1
2
$ cd themes/next/source/lib/canvas-nest
$ git pull

Hide Powered by Hexo

ref

Open themes/next/layout/_partials/footer.swig, and use <!-- --> to hide the relative codes.

Enable Math Environment

Successful method

Install

1
2
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save

you should use the following setting in theme config file. (/themes/next/_config.yml)

1
2
katex:
  cdn: //cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css

Exploring Process

hexo-math

hexo-math is no longer maintained, and it doesn’t work at all.

guide from hexo-theme-next

hexo-theme-next provides a math environment installment guide here.

hexo-renderer-pandoc(mathjax)

hexo-renderer-pandoc can’t generate files with the following error message:

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
30
31
32
33
34
35
36
37
38
39
40
$ hexo clean && hexo g && hexo s
INFO  Deleted database.
INFO  Deleted public folder.
INFO  Start processing
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: write EPIPE
    at afterWriteDispatched (internal/stream_base_commons.js:78:25)
    at writeGeneric (internal/stream_base_commons.js:73:3)
    at Socket._writeGeneric (net.js:717:5)
    at Socket._write (net.js:729:8)
    at doWrite (_stream_writable.js:410:12)
    at writeOrBuffer (_stream_writable.js:394:5)
    at Socket.Writable.write (_stream_writable.js:294:11)
    at Hexo.pandocRenderer (C:\Users\pengc\OneDrive\pengchaoandy.github.io\blog\node_modules\hexo-renderer-pandoc\index.js:75:15)
    at Hexo.tryCatcher (C:\Users\pengc\OneDrive\pengchaoandy.github.io\blog\node_modules\bluebird\js\release\util.js:16:23)
    at Hexo.ret (eval at makeNodePromisifiedEval (C:\Users\pengc\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\bluebird\js\release\promisify.js:184:12), <anonymous>:13:39)
    at Promise.then.text (C:\Users\pengc\OneDrive\pengchaoandy.github.io\blog\node_modules\hexo\lib\hexo\render.js:61:21)
    at tryCatcher (C:\Users\pengc\OneDrive\pengchaoandy.github.io\blog\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (C:\Users\pengc\OneDrive\pengchaoandy.github.io\blog\node_modules\bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (C:\Users\pengc\OneDrive\pengchaoandy.github.io\blog\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromiseCtx (C:\Users\pengc\OneDrive\pengchaoandy.github.io\blog\node_modules\bluebird\js\release\promise.js:606:10)
    at _drainQueueStep (C:\Users\pengc\OneDrive\pengchaoandy.github.io\blog\node_modules\bluebird\js\release\async.js:142:12)
    at _drainQueue (C:\Users\pengc\OneDrive\pengchaoandy.github.io\blog\node_modules\bluebird\js\release\async.js:131:9)
    at Async._drainQueues (C:\Users\pengc\OneDrive\pengchaoandy.github.io\blog\node_modules\bluebird\js\release\async.js:147:5)
    at Immediate.Async.drainQueues [as _onImmediate] (C:\Users\pengc\OneDrive\pengchaoandy.github.io\blog\node_modules\bluebird\js\release\async.js:17:14)
    at runCallback (timers.js:705:18)
    at tryOnImmediate (timers.js:676:5)
    at processImmediate (timers.js:658:5)
events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: spawn pandoc ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19)
    at onErrorNT (internal/child_process.js:407:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)
Emitted 'error' event at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:238:12)
    at onErrorNT (internal/child_process.js:407:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)

hexo-renderer-kramed(mathjax)

hexo-renderer-kramed can generate file but it has some bugs for inline formula.

1
2
3
$p_t^i$ is the price for the i-th asset  
$r_{t+1} = p_{t+1} / p_t$ is the return over the interval [t, t+1]  
VWAP = volume-weighted average price

The above code can’t be converted to formula, and shown as plain text.

hexo-renderer-markdown-it(katex)

It can’t show right formula by following those instructions in the website. And I don’t know how to fix it. Some issues for example:

  • the code of the formula shows following the formula
  • wrong format

hexo-renderer-markdown-it-plus(katex)

This one can work with some extra work.

It can’t show right formula by following those instructions in the website too at the beginning. And it sometimes has the same issue as hexo-renderer-markdown-it

So I try to follow the instruction here.

Install

1
2
npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save

Katex plugin is enabled by default. However, this renderer alone does not work out of the box for mathematical formulas to display correctly on your website. Therefore, you do not need to do anything if you do not want to use Katex. Otherwise, if you want to use katex, you must add this css style to your website: https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css

But it can’t show \frac correctly, with the mid horizontal line missed

And I found the latest version in github.

1
2
3
4
# modify the url from hexo-renderer-markdown-it-plus
# cdn: https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.10.0/katex.min.css
# modify the url from the default config file of next theme, works everywhere even in China
cdn: //cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css

The above two url works works perfectly and you should set them in the theme config file.

But the following url comes from hexo-theme-next doesn’t work

1
2
# If you want to try the latest version of Katex, use one below instead
# cdn: //cdn.jsdelivr.net/katex/latest/katex.min.css

Dynamically preview the generated website

1
$ npm install hexo-browsersync --save

The website will automatically refresh when you save your modified file.

Uniform Image Link

Problem Description

If you want to link a picture with an asset folder, you need to use the image_name directly, but this link can not work in editor, which need the link to be asset/image_name.

solution

github link

1
npm install hexo-asset-image --save

Also make sure

1
post_asset_folder: true

Then the asset/image_name can work properly in hexo.

Add Categories to Sidebar

ref

add

1
2
3
4
5
<div class="category-all-page">
  <div class="category-all">
    {{ list_categories({depth: 1}) }}
  </div>
</div>

to

1
themes\next\layout\_custom

More Hexo API: https://hexo.io/zh-cn/docs/helpers.html#list-categories

Click Avatar to Go Back to Homepage

File Position: ~/blog/themes/next/layout/_macro/sidebar.swig

Edit this file:

1
2
3
4
5
+ <a href="/">
  <img class="site-author-image" itemprop="image"
        src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
        alt="{{ theme.author }}" />
+ </a>

Convert html to pdf maintaining the hyperlink

https://cloudconvert.com/html-to-pdf

Markdown Learning Material

Reference

Related Posts
0%