In this paper, a permanent link: zhengtuqiang pw / 2018/07/31 /…

1. Introduction

Originally this year at the beginning of the time has built a blog, then read the nuggets inside a tutorial. But in fact that tutorial is not very good, encountered many problems. Until recently, he had the idea of building a personal brand, so he continued to fiddle with personal blogs. I searched the Internet and found out that Grok was missing this tutorial. Grok’s fragmentary blog is both recognizable and understandable. Follow the tutorial once and you’re done. This summary is written on the basis of Grok’s fragmentary position as a supplement.

2. Process overview

This step does not repeat the wheel, just follow Grok’s incomplete tutorial.

  1. Install Node JS, Git. These two are downloaded after the direct installation can be.
  2. Git configuration and Github configuration SSH.
  3. Install Hexo.
  4. Hexo builds the site locally.
  5. Topic configuration. This paper takes Material-Flow as an example.
  6. Bind an independent domain name.

3. Material-flow topic configuration

This is a theme that follows the Android Material Design style and supports responsiveness, which means it ADAPTS to the current browser screen and works well on mobile phones. I mainly made the following modifications: Chinese, about the page, Baidu statistics, not garlic child reading statistics and a Easter egg function. This is my custom version.

3.1 Overview of the Material-Flow topic

The file structure of the topic is as follows:

├ ─ material - flow │ ├ ─ layout# ejs template│ │ ├─ partial │ ├─# Sidebar related│ ├ ─ snapshots │ └ ─source # font, images, JS resources│ ├─fonts │ ├─images │ ├─js │ ├─ lessCopy the code

Ejs. By default, hexo new

uses layout. Ejs as a template to generate HTML pages. 

<%- partial('_partial/head') %> <! -- header --> <body> <%- partial('_partial/loading') %> <script>setLoadingBarProgress(20)</script> <%- partial('_partial/header', null, {cache: ! config.relative_link}) %> <script>setLoadingBarProgress(40); </script> <div class="l_body"> <div class='container clearfix'> <div class='l_main'> <%- body %> <! - main body - - > < / div > < value class = 'l_side' > < % - partial (' _partial/side) % > <! -- side bar --> </aside> <script>setLoadingBarProgress(60); </script> </div> </div> <%- partial('_partial/footer', null, {cache: ! config.relative_link}) %> <! -- footer --> <script>setLoadingBarProgress(80); </script> <%- partial('_partial/scripts') %> <script>setLoadingBarProgress(100); </script> </body> </html>Copy the code

Line 10 <% -body %>, which is the body of the HTML page. There are three menu home pages, articles and about, and the main parts correspond to layout/_partial/post.ejs, layout/_partial/categories.ejs, and layout/_partial/article. Note that the main body of the blog page is layout/_partial/article.ejs.

3.2 Sinicization & time modification

The idea of localization is actually very simple. After hexo s, check the webpage, use FileLocationPro to search for the content in the theme folder that you want to make Chinese, and then change it to Chinese. For example, I sinicized the previous post, the next post, see more and some content on the browser TAB. The default time format of Material-Flow is month, day, year (MMM D, YYYY), I change the time format to year/month/day (YYYY/M/D).

3.3 About the Page

By default, the Material-Flow theme only has two menu homepage articles, we can add one about Menu in the blog. Start by adding about Menu to the topic’s configuration file.

Slug: home url: / - name: slug: archives URL: /archives # Slug: About # This is used to automatically generate the CSS URL: /about # URL path for menu items highlighted when menu is selectedCopy the code

Then in the CMD command hexo new page “about”, this command will generate an About folder under the source folder, where the index.md is the main content of the menu. You can write your own introduction as if writing a blog post. Like I put an Easter egg in it.

3.4 Baidu Statistics

Register a Baidu statistics account, and then add their own blog address, get statistics code. Statistical code:

<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); Hm. SRC = "https://hm.baidu.com/hm.js? your baidu statistics id"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); }) (); </script>Copy the code

Start by adding the following code to layout/_partial/head.ejs:

<script> function setLoadingBarProgress(num) { document.getElementById('loading-bar').style.width=num+"%"; } <! - baidu statistics begin -- > < % if (theme. Tongji. Baidu_id) {% > var _hmt = _hmt | | []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?<%- theme.tongji.baidu_id %>"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); }) (); The < %} % > <! End --> </script> </head>Copy the code

Then add the following code to the topic configuration file _config.yml:

Tags: baidu_id: #Copy the code

In the future, if Baidu statistics ID changes, you can directly replace baidu_id.

3.5 Statistics of reading quantity of garlic seeds

Baidu statistics has a number of powerful analysis functions, such as traffic analysis, source analysis, access analysis, conversion analysis, visitor analysis and optimization analysis. But Baidu statistics are mainly for bloggers themselves. For visitors, I want them to see how popular this article is, by showing the number of views at the bottom of the post. I chose the non – garlic son, said to be two lines of code to fix the count. Since I want to display the read information at the bottom of the page, I first add the following code to layout/_partial/footer.ejs:

< % if (theme. Tongji. Busuanzi) {% > < script async SRC = "/ / dn - lbstatics. Qbox. Me/busuanzi / 2.3 / busuanzi. Pure. The mini. Js" > </script> <% if(is_HOME ()){%> <span id="busuanzi_container_site_pv"> <span id="busuanzi_value_site_pv"></span> times </span> <span ID ="busuanzi_container_site_uv"> </span id="busuanzi_value_site_uv"> <span id="busuanzi_value_page_pv"></span> times </span> <%} %> <%} %>Copy the code

Then add the following code to the topic configuration file _config.yml:

Tag-busuanzi: True # No-garlic switchCopy the code

Because there is no ID, there is only one attribute that represents the switch. Layout /_partial/footer.ejs line 1 <% if(theme.content.busuanzi){%>

3.6 <! — more –>

This is a separate label. In writing the blog post,

4. Some uses of EJS

When modifying Material-Flow, I directly refer to some code of the context. I have no systematic knowledge of EJS, so I record some scattered usage.

4.1 javascript mixed HTML

The < %if (post.excerpt) { %>
	  <div class="readmore">
      <a href="<%- url_for(post.path) %>">Click to view</a>
      </div>The < %} % >Copy the code

Javascript statements are wrapped in <% %>, where HTML tags are not required. The output execution result is <%- %>.

4.2 javascript Reads the Theme configuration file_config.ymlIn the form of

Single value

tongji:
  busuanzi: true
Copy the code

Single value read

<% if(theme.tongji.busuanzi){ %> <! -- omit --> <%} %>Copy the code

A collection of

Slug: home url: / - name: slug: archives URL: / archives-name: slug: archives url: / archives-name: about slug: about url: /aboutCopy the code

Collection traversal reads

<% (theme.menu||[]).forEach(function(value){ %>
						<li>
							<a class='flat-box nav-<%=value.slug%>' href='<%=url_for(value.url)%>'>
								<%=value.name%>
							</a>
						</li>
					<%})%>
Copy the code

After foreach(), value is an object foreach set of data and is read directly by attribute name.

4.3 Precautions

Note in the configuration file that -, : is followed by a space.

5. Update your blog multiple times — my best practice

In fact, after configuring my blog, there is a scenario: what if my data is corrupted, or I want to post from another computer? In fact, from the above such a process down, you will find: the main raw material of the blog is actually the md file of the blog, with the MD file of the blog so other are easy to say. So my approach is to post, hexo things necessary configuration files in the cloud disk, here I choose is open source code of China cloud (not ma oh, yards cloud is like making a remote code based on the Git warehouse, advantage can create private warehouses and free at home can have faster access speed).

5.1 Folder Overview

MyBlogOther ├ ├ ─ theme ├ ─ ─ blog posts │ ├ ─ image │ ├ ─ reference data │ └ ─ article │ ├ ─ about │ └ ─ _posts └ ─ blog config fileCopy the code
  • Blog profiles: Mainly Hexo’s config file _config.yml
  • Blog posts: This is the main “raw material” for blogs, the source of content Hexo generates for HTML
  • Others: Place some other extended functions
  • Theme: Theme used by Hexo

5.2 Blog Management Instructions

  1. Blog posts -> posts are synchronized to the Hexo(D:\MyBlog\Blog) folder via Always Sync and finally deployed to Github in the Hexo folder.
  2. The theme folder is synchronized to the theme of the Hexo folder.
  3. The blog profile is synchronized to the root of the Hexo folder.

5.3 Blog writing workflow

  1. Blog posts -> posts ->_posts.
  2. Do it in the Hexo folderhexo g.hexo sAfter the local check is correcthexo dDeploy.

5.4 Update workflow on multiple machines

  1. Install Node JS, Git.
  2. Install Hexo.
     npm config set registry "https://registry.npm.taobao.org"
     npm install -g hexo-cli  # hexo installation
     npm install hexo-renderer-pandoc --save
     npm install hexo-katex --save 
     npm install hexo-renderer-jade --save #Noise is related to the topic
     npm install hexo-renderer-less --save  #Noise is related to the topic
     npm i -S hexo-generator-search hexo-generator-feed hexo-renderer-less hexo-autoprefixer hexo-generator-json-content #Material is related to the topic
     npm install hexo-deployer-git --save  # Deployment related
Copy the code
  1. Git configuration and Github configuration SSH.
  2. Clone the repo.
  3. In the REPO folderhexo initCreate a new Hexo folder (named Blog) that does not need to be added to the repo version management.
  4. Configure the blog file and theme.
  5. Write blog posts in blog posts -> Posts ->_posts.
  6. Copy the blog posts into the Hexo folderhexo g.hexo sAfter the local check is correcthexo dDeployment.

6. Reference materials

Unity of | builds with Hexo blog