Hexo Usage

How to Write a new post

1. Generate new post in your terminal: hexo new "Your post name"
2. Open your project by vscode, then open file: source\_post\Your post name.md
3. Edit your post with vscode, hexo support markdown and ejs files

Clean cache

1. After finish editing, you can type hexo clean in your terminal to clean the cache, clean is short for clean here.

1

hexo clean

Generate static files

1. After finish editing, you can type hexo g in your terminal to generate static files, g is short for generate here.

1

hexo g

Publish your post

1. Type hexo d to deploy your post to github.io, d is short for deploy here.

1

hexo d

View your post

1. open zdd.github.io to see your post, good job!

you can use npm run deploy to combine generate and deploy in a single command.

View post locally

1. Run hexo s in terminal, then open localhost:4000 to see your post, this is very convenient to check your post before publish.

1

hexo s

404 File not found

When you encounter the 404 error, make sure to do the following

1. Check your source\_post\Your post name.md file name, make sure it is the same as the title in the file.
2. run hexo clean to clean the cache
3. run hexo g to generate static files
4. run hexo d to deploy your post to github.io

Tags not working

1. Make sure you have a tags folder under source folder
2. Install easy tag plugin by npm install hexo-easy-tags-plugin --save
3. Delete .deploy_git folder
4. Run hexo clean to clean the cache
5. Run hexo g to generate static files
6. Run hexo d to deploy your post to github.io
7. Force refresh your browser by Ctrl + F5

Make sure tags config in themes\next\_config.yml is correct, remember to set amount to a large number

1
2
3
4
5
6
7

tagcloud:
  # All values below are same as default, change them by yourself.
  min: 12 # Minimun font size in px
  max: 30 # Maxium font size in px
  start: "#ccc" # Start color (hex, rgba, hsla or color keywords)
  end: "#111" # End color (hex, rgba, hsla or color keywords)
  amount: 2000 # <--------------- Set this to a large number

How to add tags

1. Run hexo new post "tags"
2. Make sure tags/index.md has the following content

   1 2 3 4 5

   --- title: tags date: 2023-06-30 23:21:34 type: "tags" ---

Add multiple tags for a post

1. Add tags in the front matter of your post, for example:

   1 2 3 4 5 6 7

   --- title: Hexo Usage date: 2023-04-16 22:03:56 tags: - hexo - blog ---

Insert Read more tag to post

1. Insert `<!-- more -->` in your post, for example:
   
1
2
3
4
5
6
7
8
9
10
11
12
---
title: Hexo Usage
date: 2023-04-16 22:03:56
tags: 
- hexo
- blog
---

# Hexo Usage
## How to Write a new post
<!-- more -->
# other content 

ng-template

顾名思义，ng-template是一个模板元素，通常与结构化指令ng-if, ng-for, ng-switch及模板变量配合使用.

ng-template配合ng-if

1
2
3

<ng-template [ngIf]="true">
  <div>Hello, world!</div>
</ng-template>

在实际编程中，我们一般不用上面的写法，而是采用指令的简写形式，也就是用*ngIf代替[ngIf]。

1

<div *ngIf="true">Hello, world!</div>

这段代码编译后的结果和第一段代码是相同的。关于指令的简写形式，请参考这篇。注意：在ng-template上使用指令的简写形式是无效的，必须使用属性绑定的方式，下面的代码无法正常工作。

1
2
3

<ng-template *ngIf="true">
  <div>Hello, world!</div>
</ng-template>

作为elseBlock使用

假设有如下需求，当condition为true时，显示Hello, world!，否则显示Goodbye, world!, 该如何实现呢？
我们可以在ngIf指令后面添加else关键字，然后在else后面添加一个模板引用变量，然后定义一个ng-template并用该模版变量标识之，如下所示：

1
2

<div *ngIf="condition else otherTemplate">Hello, world!</div>
<ng-template #otherTemplate>Goodbye, world!</ng-template>

如果你使用的是Angular17及以上版本，那么你可以使用built-in control flow语法。

1
2
3
4
5

@if(condition) {
  <div>Hello, world!</div>
} @else {
  <div>Goodbye, world!</div>
}

If-then-else

如果两个分支对应的模板都很大，那么可以采用这种方式，使结构更清晰，代码更易读。

1
2
3

<div *ngIf="condition; then thenBlock else elseBlock"></div>
<ng-template #thenBlock>Content to render when condition is true.</ng-template>
<ng-template #elseBlock>Content to render when condition is false.</ng-template>

同样的，如果你使用的是Angular17及以上版本，那么你可以使用built-in control flow语法。

1
2
3
4
5

@if(condition) {
  <div>Hello, world!</div>
} @else {
  <div>Goodbye, world!</div>
}

看到了吗，built-in control flow语法的可读性更强，更符合人类的思维方式。

References:

1. Angular ng-template
2. ng-container - https://zdd.github.io/2024/07/09/angular-ng-container/

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment