使用Hexo搭建属于自己的博客

准备工作：
1.安装node.js(查看Node.js的版本node -v)
2.查看npm的版本（npm -v）
3.切换成国内的打包工具(使用淘宝的)

npm install -g cnpm --registry=https://registry.npm.taobao.org

4.查看cnpm的版本(cnpm -v)
5.安装git(具体步骤省略)

1、Hexo博客的搭建总共分为四个步骤

1.Hexo框架搭建

2.Hexo修改默认主题

3.Hexo实现文章置顶,标签以及显示更多

4.Hexo显示本地图片

Hexo框架搭建

1.安装博客的框架(hexo)
打开控制台（快捷键：window+r,输入cmd输入命令，安装框架）

cnpm install -g hexo-cli

2.查看hexo框架的版本，如果看到以下信息，恭喜你，说明你已经安装成功，下面有我的node，node-cli的版本号

hexo -v

3.这是时候我们就可以创建一个本地目录(最好不要放到c盘)，可以在盘里直接右击，创建一个文件，来存放，初始化hexo生成的文件，

4.初始化hexo，点进刚创建的文件里，然后在url上cmd,进入控制台，输入命令初始化hexo.等待下载完（网络不好，会下的比较久，用心等待）

hexo init

5.启动hexo服务（就可以本地访问初始的博客的框架）

hexo s
s:start server

6.访问，搭建

http://localhost:4000/

7.创建一个自己的博客，可以在这里查看创建的博客

hexo n "hello-world"

8.去创建git的仓库（这里是去gitee）
9.安装git的部署工具

cnpm install --save hexo-deployer-git

10.修改myblog根目录下的_config.yml

deploy:
  type: 'git'
  repo: https://gitee.com/AngeGit/TestBlog.git
  branch: master

11.发布项目到码云

hexo d

12.使用Gitee Pages 服务发布项目成一个网站

13.这时你会发现博客的样式是崩掉的，需要添加样式，修改blog根目录下的_config.yml
注意：url: http://angegit.gitee.io，这个路径是以下在这里插入图片描述

root ：仓库的文件夹的名字

url: http://angegit.gitee.io
root: /testblog/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html

2、 Hexo修改默认主题

注：默认使用的是landscape,稍微有点点丑,让我们来变美!
1.使用yilia-plus主题，直接去mybolgd的temes文件夹下打开cmd,输入命令，这样就可以看到主题已更换

git clone https://github.com/JoeyBling/hexo-theme-yilia-plus.git

2.打开_config.yml文件，修改下面的theme。

theme: hexo-theme-yilia-plus

3.然后cmd，输入hexo clean，再输入hexo g,最后输入，hexo d，如果没有错误，就去gitee去更新一下（注意，这个操作，每次修改以后想看效果，就要重复操作一遍，才能看得看）


4.显示侧边栏，去myolg根目录，cmd,再运行以下的命令

cnpm i hexo-generator-json-content --save

5.在myolg根目录的_config.yml的最后添加以下代码，这样侧边栏就完成了，想查看效果，就重复，hexo clean。。。这些操作

jsonContent:
 meta: false
 pages: false
 posts:
  title: true
  date: true
  path: true
  text: false
  raw: false
  content: false
  slug: false
  updated: false
  comments: false
  link: false
  permalink: false
  excerpt: false
  categories: false
  tags: true

3、 Hexo实现文章置顶

博主使用的是hexo-theme-yilia-plus主题
接下来我们要实现如何置顶,设置文章标签以及如何实现实现显示更多的效果

title: "使用Hexo搭建属于自己的博客"
date: 2020-01-02 15:50:30
tags: Linux
comments: true
top: 1
description: "使用Hexo搭建属于自己的博客"

把这段放到文章的开头，修改Hexo文件夹下的node_modules/hexo-generator-index/lib/generator.js
需要添加的代码：

posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) {
        if(a.top == b.top) return b.date - a.date;
        else return b.top - a.top;
    }
    else if(a.top && !b.top) {
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date;
});

以下是最终的generator.js内容：

'use strict';

var pagination = require('hexo-pagination');

module.exports = function(locals) {
    var config = this.config;
    var posts = locals.posts.sort(config.index_generator.order_by);

    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) {
            if(a.top == b.top) return b.date - a.date;
            else return b.top - a.top;
        }
        else if(a.top && !b.top) {
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date;
    });

    var paginationDir = config.pagination_dir || 'page';
    var path = config.index_generator.path || '';

    return pagination(path, posts, {
        perPage: config.index_generator.per_page,
        layout: ['index', 'archive'],
        format: paginationDir + '/%d/',
        data: {
            __index: true
        }
    });
};

如何使用：在需要置顶的文章添加top属性即可，排序从小到大

4、Hexo显示本地图片

1.插件安装与配置
首先我们需要安装一个图片路径转换的插件，这个插件名字是hexo-asset-image

cnpm install https://github.com/CodeFalling/hexo-asset-image --save

2.但是这个插件的内容需要修改【不然可能会出Bug】

打开/node_modules/hexo-asset-image/index.js，将内容更换为下面的代码

'use strict';
var cheerio = require('cheerio');

function getPosition(str, m, i) {
  return str.split(m, i).join(m).length;
}

var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){
  var config = hexo.config;
  if(config.post_asset_folder){
    	var link = data.permalink;
	if(version.length > 0 && Number(version[0]) == 3)
	   var beginPos = getPosition(link, '/', 1) + 1;
	else
	   var beginPos = getPosition(link, '/', 3) + 1;
	// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".
	var endPos = link.lastIndexOf('/') + 1;
    link = link.substring(beginPos, endPos);

    var toprocess = ['excerpt', 'more', 'content'];
    for(var i = 0; i < toprocess.length; i++){
      var key = toprocess[i];
 
      var $ = cheerio.load(data[key], {
        ignoreWhitespace: false,
        xmlMode: false,
        lowerCaseTags: false,
        decodeEntities: false
      });

      $('img').each(function(){
		if ($(this).attr('src')){
			// For windows style path, we replace '\' to '/'.
			var src = $(this).attr('src').replace('\\', '/');
			if(!/http[s]*.*|\/\/.*/.test(src) &&
			   !/^\s*\//.test(src)) {
			  // For "about" page, the first part of "src" can't be removed.
			  // In addition, to support multi-level local directory.
			  var linkArray = link.split('/').filter(function(elem){
				return elem != '';
			  });
			  var srcArray = src.split('/').filter(function(elem){
				return elem != '' && elem != '.';
			  });
			  if(srcArray.length > 1)
				srcArray.shift();
			  src = srcArray.join('/');
			  $(this).attr('src', config.root + link + src);
			  console.info&&console.info("update link as:-->"+config.root + link + src);
			}
		}else{
			console.info&&console.info("no src attr, skipped...");
			console.info&&console.info($(this));
		}
      });
      data[key] = $.html();
    }
  }
});

3.打开myolg根目录下的_config.yml文件，修改下述内容:

post_asset_folder: true

4.然后把要上传的图片copy到和hello-word的文件夹中，在hello-worl.md文件中添加一下图片现实得代码

注意:

1.md文件中使用的图片路径斜杠一定要写"/"
2.md的文件名一定要和存放图片的文件名一致
3.md文件和文件夹都放到_posts文件夹下,自然会进行解析的