📌 Hexo Development Checklist

Here you can find my Hexo-Dev checklist and some useful hexo documentations

Checklist & Index:

DONE:

TODO:

  • Friends
  • Badge at footer
  • limit height of
     and 
  • Sitemap
  • Auto switch normal/dark mode not in the fabulous guide
  • Widget Graphviz
  • Change the tags style in the post page
  • Change the article-meta line
  • Weather widget
  • Fold a part of the tags
  • Fold a part of the archives
  • Code highlight
  • “Resources” list here (includes lots of useful documentations) which is basically a bunch of links (Under construction)
  • Double live2d widget (?? worth it?)
  • Complete “About” page

↑↑↑ 试着点击“显示一言”!

Useful Documentations

(Almost) Everything needed

Basically you don’t need anything else hehe. XD. No no no. I actually got help from other websites like GitHub and Stack Overflow

General

TOC

After deleted that plugin, the normal TOC showed up:

Email subscription system

Wait wait, what does this mean? So there will be no email subscription via FeedBurner since this July? NOOOO!

Comments

Comments (Disqus)

Disqus is shit because you need to pay for premium in order to get rid of ADs. Damn it.

Comments (GitTalk)

Then I chose GitTalk, which is AD free :)

  1. I went to my repository and created a new issue.
  2. Then I copied and pasted the following code to the theme’s _config.yml file
    _config.yml
    comment:
    type: utterances
    repo: truezihaoxu/zhx-blog
    issue_term: pathname # Required if issue_number is not set
    issue_number: 1 # Required if issue_term is not set. Every post can be mapped to a separate, manually-created GitHub issue.
    label: some-issue-label # Optional
    theme: github-light # Optional
    crossorigin: anonymous
    And it’s done!

Share

First, I chose ShareThis because the dev of this theme icarus also uses this plugin. But then I realized that something is wrong with ShareThis. So I changed to AddThis, which works perfecly now.

ShareThis unexpected behaviour:

Categories

I didn’t consult any documents, I figured it out by myself 😆. Just add this to the header of my .md file:

.md
category: [cat1]

Tags and Categories are pretty much the same thing.

Insert the code below to header of the .md file to get sub-category called “subcat1”:

.md
categories: [Hexo-Dev, subcat1]

“About” page

Just type this at terminal and excute:

BASH
hexo new page "About"

Pin an article to top

  • The complete guide After the installation make sure to type down “top: True” in the header of the .md file.

Abbreviation Change

The HB is a protein.

.md
The <abbr title="Hemoglobin">HB</abbr> is a protein.

Abbr is not working.

I have been using the rotated version of the “NexT” logo for a while If you rotate "N" by 90º, you will get a "Z" XD.…it’s time to make my own logo!

In night mode:

In normal mode:

Well, I have to say that I'm pretty satisfied with this logo 😆

For now I will keep my browser tab favicon as it is.

Repositioning the live 2D widget

Changed height to 180 and the cat now sit on the bottom of the browser window (much better).

_config.yml
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-hijiki
display:
position: right
width: 150
height: 180
mobile:
show: true
react:
opacity: 0.8

I don’t like the code highlight style above. I will talk about that later in Syntax Highlighting

Syntax Highlighting

Problem

  • I didn’t use this link, but I will put it here since it might be useful in the future PrismJS

Well, I do get some sort of highlight, but not what I actually want. What I want is this👇 style, but inside a real code block (so you can copy with one click and the code block gets its title):

(...)
  display:
    position: right
    width: 150
-   height: 300
+   height: 180
(...)

Hmmm I tried the “three inverse quote” method. Not good because I can’t change anything 😩:

_config.yml
(...)
display:
position: right
width: 150
<span style="color:#e88080">- height: 300</span> <--- WTF??
<span style="color:#21db40">+ height: 180</span> <--- ????
(...)

Solution (Updated 2021-04-24)

Haha finally I found how to do that:

.config.yml
-   height: 300
+ height: 180

This is how I achived that (use 4 inverse quote to write triple inverse quote!):

.md
```diff .config.yml
- height: 300
+ height: 180
```

Anchors in Markdown

Very easy:

[Anchor name](#title-with-no-spaces)

Encrypted Post

Download the plugin named “hexo-blog-encrypt” and follow the guide in this link

This is my encrypted post

Friends


End of the page

   Hexo logo
Author

Zihao Xu

Posted on

2021-04-15

Updated on

2021-04-27

Licensed under

You forgot to set the business or currency_code for Paypal. Please set it in _config.yml.

Comments

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.