Hexo series (5) writing articles

Half rainbow 2021-05-04 11:05:47
hexo series writing articles

Using Hexo Framework to build a blog site of our own , Now let's talk about how to write our first blog on the website

One 、 Create articles

Open... In the site folder git bash, Enter the following command to create the article , among title For the title of the article

$ hexo new "title"
 Copy code 

When you enter a command , Will be in source/_post Create a file under folder , Name it :title.md

This file is the original file to be published on the website , It is used to record the content of the article

below , We're going to write our first blog in this file

Two 、 Writing an article ( be based on Markdown)

1、Markdown brief introduction

however , Before we officially write down the first words , We need to understand what is Markdown?

Markdown It can be written in a normal text editor Markup language , Through simple Tag Syntax , It can make the content of ordinary text have a certain format

be based on Markdown The simplicity of grammar , It has become the most popular language for blogging in the world

2、Markdown grammar

Writing Markdown when , Bloggers strongly recommend a simple and easy to use Markdown Editor —— Typora

Officially, it's Simple and powerful , It not only supports native Syntax , It also supports the corresponding shortcut keys , More importantly, it can Real-time Preview

Here attached Typora Download address :www.typora.io/, Interested friends can download to try

good , Let's get to the point , Introduce some common Markdown grammar

(1) title

Markdown grammar :

# First level title
## Secondary title
### Three level title
#### The fourth level title
##### Five level titles
###### Six level title
 Copy code 

Typora Shortcut key :

Ctrl+1: First level title

Ctrl+2: Secondary title

Ctrl+3: Three level title

Ctrl+4: The fourth level title

Ctrl+5: Five level titles

Ctrl+6 : Six level title

Ctrl+0: The paragraph

(2) bold 、 Italics 、 Strikethrough and underline

Markdown grammar :

* Italics *
** bold **
*** Bold italics ***
~~ Delete line ~~
 Copy code 

Typora Shortcut key :

Ctrl+I: Italics

Ctrl+B: bold

Ctrl+U: Underline

Alt+Shift+5: Delete line

(3) Reference block

Markdown grammar :

> Quotation
 Copy code 

Typora Shortcut key : Ctrl+Shift+Q

(4) Code block

Markdown grammar :

` Inline code `
Many lines of code
Many lines of code
 Copy code 

Typora Shortcut key :

Inline code :Ctrl+Shift+`

Many lines of code :Ctrl+Shift+K

(5) Formula block

Markdown grammar :

The mathematical formula
 Copy code 

Typora Shortcut key : Ctrl+Shift+M

(6) Split line

Markdown grammar :

 Method 1 :---
Method 2 :+++
Method 3 :***
 Copy code 

(7) list

Markdown grammar :

1. There are sequence items
* Unordered list items
+ Unordered list items
- Unordered list items
 Copy code 

Typora Shortcut key :

There are sequence items :Ctrl+Shift+[

Unordered list items :Ctrl+Shift+]

(8) form

Markdown grammar :

 Header 1| Header 2
Content 11| Content 12
Content 21| Content 22
 Copy code 

Typora Shortcut key : Ctrl+T

(9) Hyperlinks

Markdown grammar :

 Method 1 :[ Link text ]( Link address " Link description ")
for example :[ Sample links ](https://www.example.com/ " Sample links ")
Method 2 :< Link address >
for example :<https://www.example.com/>
 Copy code 

Typora Shortcut key : Ctrl+K

(10) picture

Markdown grammar :

![ Picture text ]( Picture address " Picture description ")
for example :![ The sample picture ](https://www.example.com/example.PNG " The sample picture ")
 Copy code 

Typora Shortcut key : Ctrl+Shift+I

explain : stay Hexo in When inserting a picture , Follow these steps to set up

  1. take Site profile Medium post_asset_folder The value of the option is set to true

  2. Open... In the site folder git bash, Enter the command npm install hexo-asset-image --save Installing a plug-in

  3. such , When using hexo new title When creating an article , At the same time source/_post Create a folder with title A folder with the same name , We just need to put the pictures in this folder , And then in the article through Markdown Syntax can be used for reference

    for example , In the Resources folder ( That's the one with you title A folder with the same name ) Add picture to example.PNG, You can use the statement in the corresponding article ![ The sample picture ](title/example.PNG " The sample picture ") Add images

3、 Advanced settings

(1) Template settings

When we use the command hexo new "title" When creating an article ,Hexo Will be based on /scaffolds/post.md Initialize the new article

In other words ,/scaffolds/post.md It's the new article Templates , So we can adapt it to our writing habits

A simple example is as follows :

title: {{ title }}
date: {{ date }}
 Copy code 

(2) Head set

Use... In every article Hexo The beginning of the created article , There will be words to explain the article , be called The head of the article

In addition to setting the title of the article in the head of the article 、 Release date and other basic information , You can also tag articles 、 Classification, etc.

A simple example is as follows :

title: Title
tags: [tag1, tag2, ...]
categories: category
 Copy code 

Be careful : There must be a space between the attribute and the attribute value , Otherwise, there will be parsing errors

(3) Home page display

Using Hexo Framework of the blog site , The front page will show the content of the article , And the default display of the entire content of the article

If the article is too long, it will be very redundant , So we need to streamline it

At this time , We just need to use... In the article <!--more--> A sign is enough , Indicates that only the contents in front of the logo will be displayed

3、 ... and 、 Deployment of release

Open... In the site folder git bash, Enter the following command to deploy and publish the article

$ hexo g -d
 Copy code 

Suggest : In the use of hexo g After deployment , You can use it first hexo s Run the local site , Then enter the address in the browser http://lacolhost:4000/ View the run results , Use it after checking hexo d Release

本文为[Half rainbow]所创,转载请带上原文链接,感谢

  1. JS: event flow
  2. Front end performance optimization: rearrangement and redrawing
  3. JS - deep and shallow copy
  4. JavaScript异步编程3——Promise的链式使用
  5. JavaScript asynchronous programming 3 -- chain use of promise
  6. Vue.js组件的使用
  7. The use of vue.js component
  8. How to judge whether a linked list has links
  9. Element UI custom theme configuration
  10. Text image parallax effect HTML + CSS + JS
  11. Spring的nohttp宣言:消灭http://
  12. Vue3 intermediate guide - composition API
  13. Analysis of URL
  14. These 10 widgets that every developer must know
  15. Spring's nohttp Manifesto: eliminate http://
  16. Learn more about JS prototypes
  17. Refer to await to JS to write an await error handling
  18. A short article will directly let you understand what the event loop mechanism is
  19. Vue3 uses mitt for component communication
  20. Characteristics and thinking of ES6 symbol
  21. Two way linked list: I'm no longer one-way driving
  22. Vue event and form processing
  23. Reactive TraderCloud实时外汇开源交易平台
  24. Reactive tradercloud real time foreign exchange open source trading platform
  25. Node.js REST API的10个最佳实践
  26. Ten best practices of node.js rest API
  27. Fiddler advanced usage
  28. Process from Vue template to render
  29. Promise up (asynchronous or synchronous)
  30. Principle and implementation of promise
  31. Vs code plug in sharing - run code
  32. Vue practical notes (1) introduction of Ant Design
  33. Vue actual combat notes (2) introduction of element plus
  34. Introduction to webpack
  35. Webpack construction process
  36. Vue notes
  37. The experience and lessons of moving from ruby megalith architecture to go microservice
  38. Using leancloud to add artitalk module to hexo blog
  39. Implementation of chrome request filtering extension
  40. Detailed introduction of beer import declaration elements and label quarantine [import knowledge]
  41. Gallop workflow engine design series 01 process element design
  42. VUE移动端音乐APP学习【十六】:播放器歌词显示开发
  43. Vue Mobile Music App learning [16]: player lyrics display development
  44. jquery cookie
  45. jquery cookie
  46. 体面编码之JavaScript
  47. JavaScript for decent coding
  48. React17 系统精讲 结合TS打造旅游电商平台
  49. React17 system combined with TS to build tourism e-commerce platform
  50. 2021-05-04 hot news
  51. HttpSession对象与Cooike的关系 以及 Cookie对象构造函数问题
  52. gRPC-Web:替代REST的gRPC的Javascript库包
  53. The relationship between httpsession object and cooike and the construction of cookie object
  54. Grpc Web: a JavaScript library package to replace rest grpc
  55. Building reactive rest API with Java - kalpa Senanayake
  56. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  57. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  58. PDF转HTML工具——用springboot包装pdf2htmlEX命令行工具
  59. Pdf to HTML tool -- Wrapping pdf2htmlex command line tool with springboot
  60. Vue.js比jQuery更容易学习