22-10-21-Hexo-Build-Beautify

Posted on Edited on In Symbols count in article: 8.4k Reading time ≈ 8 mins.

The article is used to record how to use hexo to build my own blog. I will try my best to make records by using English. To Be Honest, this is really somewhat a hard challenge for me.

The problems and some solutions are as follows.

https://hexo-next.readthedocs.io/

BUILD HEXO

preparation:

git

node.js

after the installation, test:

node -v/npm -v/ git -v

HEXO BLOG

all use git-bash

  • to install hexo:

npm install -g hexo-cli

  • init hexo and build blog:
1
2
3
hexo init [blogname]
cd [blogname]
npm install
  • after building the common commands:
1
2
3
4
5
hexo clean
hexo generate/hexo g
hexo server/hexo s
hexo deploy/hexo d(unless everything is OK)
# hexo clean && hexo g & hexo s

NEW POST

  • set markdown

In scaffolds\post.md, above the !--more-- can make the article excerption

1
2
3
4
5
6
7
8
9
10
---
title: {{ title }}
date: {{ date }}
categories: 
tags: 
mathjax: true
---

<!--more-->
# to limit the length of article
  • new post

hexo new [postname]

To make the article and everting clean, follow the standard YY-MM-DD-article-name.md

And the categories are as follows: 

1
2
3
4
5
categories:
	- Studying
	- Reading
	- Recording
	- Amusing

DRAFT/BAND GITHUB&TOKEN

  • register the github account
  • new repository

Create a new repository, github has reserved your own website.

[githubaccount].github.io

  • use token to authenticate

In the root menu, add the follows to the file _config.yml.

1
2
3
4
5
6
7
8
9
10
# install:
npm install hexo-deployer-git --save

# _config.yml
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: https://[token]@github.com/[githubaccount]/[githubaccount].github.io
  branch: master
  • git config
1
2
3
# if authentication failed
git config --globaluser.name "yourname"
git config --global user.email "youremail"
  • after everything above is ready

hexo d, test if the running is well.

the default website is: localhost:4000/

MATH

If the markdown can not display well, maybe the renderer gets wrong.

The hexo default renderer is hexo-renderer-marked.

You can use hexo-renderer-kramed or @upupming/renderer-markdown-it-plus to replace the default one.

1
2
npm uninstall hexo-renderer-marked --save
npm i @upupming/hexo-renderer-markdown-it-plus --save

DON’T FORGET!

In _config.next.yml set: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
math:
  # Default (false) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in front-matter.
  # If you set it to true, it will load mathjax / katex script EVERY PAGE.
  every_page: true

  mathjax:
    enable: true
    # Available values: none | ams | all
    tags: none

  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

and in your every post fonts, add math: true

NOT 404

question

When I visit the tags, the website always return 404. I search for some solutions all over the web. However, most of them are wrong, until I see the solution in the Zhihu.

solution

new page

In the root of the blog, open the git bash command.

hexo new page "tags"

edit the index

1
2
3
4
5
---
title: tags
type: tags
layout: tags # /theme/next/layout/[tags].njk
---

Behind the layout, to write down the name of the target njk, which is in the depth of the file path.

edit the _config file

1
2
# Dirctory
tag_dir: tags

Make the names one-to-one.

CALCULATE WORDS

hexo-word-counter

Install the plugin hexo-word-counter, in the root path of blog. 

1
2
npm install hexo-word-counter
hexo clean && hexo g

config

In _config.yml, at the end of the file add the follows: 

1
2
3
4
5
6
7
8
9
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 4
  wpm: 275
  suffix: "mins."

In _config.next.yml, edit the finding item_text_total: false. Change false to true.

BACKGROUND PICTURE

I tried more ways to set background picture, more thins were wrong. Util I saw an article, I done this thing.

When I reflected all my things on this part, I knew the keypoint part was to **add the correct source path **to next_config.

js file

The NexT v8 has the canvas-nest.js in themes\next\source\js.

If you don’t have the JS file, create the new file contains：

1
!function(){function n(n,e,t){return n.getAttribute(e)||t}function e(n){return document.getElementsByTagName(n)}function t(){var t=e("script"),o=t.length,i=t[o-1];return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)}}function o(){c=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,a=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function i(){l.clearRect(0,0,c,a);var n,e,t,o,u,d,x=[w].concat(y);y.forEach(function(i){for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>c||i.x<0?-1:1,i.ya*=i.y>a||i.y<0?-1:1,l.fillRect(i.x-.5,i.y-.5,1,1),e=0;e<x.length;e++)n=x[e],i!==n&&null!==n.x&&null!==n.y&&(o=i.x-n.x,u=i.y-n.y,d=o*o+u*u,d<n.max&&(n===w&&d>=n.max/2&&(i.x-=.03*o,i.y-=.03*u),t=(n.max-d)/n.max,l.beginPath(),l.lineWidth=t/2,l.strokeStyle="rgba("+m.c+","+(t+.2)+")",l.moveTo(i.x,i.y),l.lineTo(n.x,n.y),l.stroke()));x.splice(x.indexOf(i),1)}),r(i)}var c,a,u=document.createElement("canvas"),m=t(),d="c_n"+m.l,l=u.getContext("2d"),r=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/45)},x=Math.random,w={x:null,y:null,max:2e4};u.id=d,u.style.cssText="position:fixed;top:0;left:0;z-index:"+m.z+";opacity:"+m.o,e("body")[0].appendChild(u),o(),window.onresize=o,window.onmousemove=function(n){n=n||window.event,w.x=n.clientX,w.y=n.clientY},window.onmouseout=function(){w.x=null,w.y=null};for(var y=[],s=0;m.n>s;s++){var f=x()*c,h=x()*a,g=2*x()-1,p=2*x()-1;y.push({x:f,y:h,xa:g,ya:p,max:6e3})}setTimeout(function(){i()},100)}();

add path

My NexT layout file is in the path themes\next\layout\_layout.njk.

For we created the js file, we saved as canvas-nest.js. Open the _layout.njk, and add the following words. REMEMBER above the </body>

1
2
<!-- Background picture -->
  <script type="text/javascript" src="/js/canvas-nest.js">	   </script>

ICON

https://fontawesome.com/search

ATTACH FILES

We may hope visitors that can download files easily and conveniently. Thus, we can upload our relating files onto the same name file. Eg. The post is named 22-10-21-hexo-build-beautify.md, and its same name file is 22-10-21-hexo-build-beautify. They are created at the same time.

After uploading, and you can quote the file path in the post. And we can download these things while visiting.

  • Picture ![filename](filepath)
  • Zip [filename](filepath)
  • ……

At the same path!

FOLK ME

The function is inlayout.njk.

in headband module add the following code: 

1
<a href="your url" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

ensure that the pjax in _config.next.yml is true

TITLE CASE

to make the titles follow the standard of title, we can turn the titlecase into true

DAY/NIGHT MODE

Hexo Next 8.x 主题添加可切换的暗黑模式 | Clay 的技术博客 (techgrow.cn)

TBC

-------------THE END-------------