Hexo

参考网站：https://yafine-blog.cn/posts/4ab2.html

部署到码云：https://yafine-blog.cn/posts/51fb.html

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

上传步骤：

  1. hexo clean
  2. hexo g -d

本地运行测试

  • hexo g -s

1、Hexo环境搭建

1.1、安装前提

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
  • Git
  • 以上两部分可以在docsify文档中进行查看

1.2、快速开始

  1. 所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

    npm install -g hexo-cli

  2. 安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件

    hexo init <folder>
cd <folder>
npm install

    新建完成后，指定文件夹的目录如下：

    .
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

文件夹信息

1、_config.yml

网站的 配置 信息，您可以在此配置大部分的参数。

网站

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。支援多个关键词。
autho 您的名字
language 网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

网址

参数 描述 默认值
url 网址
root 网站根目录
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值
pretty_urls 改写 permalink 的值来美化 URL
pretty_urls.trailing_index 是否在永久链接中保留尾部的 index.html，设置为 false 时去除 true
pretty_urls.trailing_html 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.htm无效) true

网站存放在子目录

如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

2、package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

package.json{ 
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": { 
    "version": ""
  } ,
  "dependencies": { 
    "hexo": "^3.8.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-renderer-marked": "^0.3.2",
    "hexo-server": "^0.3.3"
  } 
}

3、scaffolds

模版 文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果您修改scaffold/post.md中的Front-matter内容，那么每次新建一篇文章时都会包含这个修改。

4、source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

5、themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

2、更换主题

主题一：https://github.com/blinkfox/hexo-theme-matery

image-20200804214326337

主题二：https://github.com/YunYouJun/hexo-theme-yun

image-20200804214454948

  1. 在themes文件夹下导入想要的主题
  2. 然后在跟目录下的config.yml中修改主题为导入文件的名称

3、评论功能

本次使用的是Valine加LeanCloud评论功能

Valine文档：https://valine.js.org/quickstart.html

  1. 进入LeanCloud网站：https://leancloud.cn/dashboard/login.html#/signin

  2. 注册并登录Leancloud应用管理。

  3. 创建应用

    image-20200804190934186

  4. 获取APP ID 和 APP Key

    image-20200804191011266

  5. 不需要安装，因为yun主题默认使用 CDN。模版也已经内置。

  6. 在配置文件中进行修改，官方推荐写在 yun.yml 中

    valine:
  enable: false
  appId: # your leancloud application appid
  appKey: # your leancloud application appkey
  placeholder: Just go go # comment box placeholder
  avatar: # gravatar style
  meta:
    - nick
    - mail
    - link
  pageSize: 10 # pagination size
  # lang: zh-CN
  # visitor: false
  # highlight: true
  # recordIP: false
  # serverURLs:
  # Emoji See: https://valine.js.org/emoji.html
  # emojiCDN: //i0.hdslb.com/bfs/emote/
  # emojiMaps:
  #   tv_doge: 6ea59c827c414b4a2955fe79e0f6fd3dcd515e24.png
  #   more...
  # enableQQ: false
  # requiredFields:
  #   - nick
  #   - mail

  7. 登录后台可进行数据的处理

    image-20200804195023799

4、页面卡片的设置

使用方法

title: SpringCloud
date: 2020-08-02 20:47:30
top: 3
categories: 微服务
tags:
  - 微服务
  - java
  - spring
description: 快速构建分布式系统中的某些常见模式，开发人员可以快速站起来实现这些样板的服务和应用程序。Spring Cloud专注于为典型的用例和扩展机制（包括其他用例）提供良好的开箱即用体验。

image-20200808171421237

效果展示

image-20200808171521514

5、显示图片

  1. 安装插件

    npm install hexo-asset-image --save

  2. 打开hexo的配置文件_config.yml，找到 post_asset_folder，把这个选项从false改成true

  3. 打开以下目录/node_modules/hexo-asset-image/index.js

    将内容更换为下面的代码

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

// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
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();
        } 
    } 
} );

  4. 新建文件

    hexo new post "XXX"

    因为安装了插件之后会生成"XXX.md"和“XXX”文件夹

    image-20200809201955061

  5. 将要展示的内容复制到XXX.md文件中，然后将XXX.assets文件夹改名为XXX即可

  6. 然后将md文件中的图片路径去除，只保留图片名称和后缀

    image-20200809202028345

6、代码高亮

  1. 将hexo版本升级到5.0以上的版本，在博客目录下运行

    npm install hexo@latest

  2. 在 Hexo （须升级至 5.0 以上版本）工作目录下的 _config.yml 中配置：

    # 关闭 highlight
highlight:
  enable: false
# 启用 prism
prismjs:
  enable: true
  preprocess: true
  line_number: false
  tab_replace: ""

  3. 在主题配置文件中配置

    codeblock:
  prismjs:
    light: default
    dark: tomorrow

7、播放音乐

  1. 安装插件

    npm install hexo-tag-aplayer

8、字数统计

  1. 安装插件

    npm install hexo-wordcount

9、代码高亮2

使用插件：https://www.npmjs.com/package/hexo-prism-plugin-chlandscape

  1. 下载插件

    npm i -S hexo-prism-plugin

  2. 修改配置文件

    highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess 
  theme: 'default'
  line_number: false    # default false

  3. 使用Hbuild或其他编译器打开博客文件，在node_modules下搜索，使用多文件搜索

    replace(/{ /g, '&#123;').replace(/} /g, '&#125;');

    image-20200812121154851

  4. 将内容替换，记得加空格，不然可能报错

    replace(/{ /g, '{  ').replace(/} /g, '}  ');

    image-20200812121236969

10、hexo中对{{}}的解析

image-20200911000018266

11、编写文件

  1. 新建文件

    hexo new post "XXX"

  2. 设置以下标签

    title: XXX
date: 2020-08-02 21:31:22

# 一般只需要从这里复制
description: 简介
categories: 分类
tags:
  - 标签1
  - 标签2
email: 1256240778@qq.com
author: 晓江

  3. 将要上传的md文件内容复制过来

  4. 如果含有图片的话，将图片文件夹命名的后缀去掉

    image-20200910233243127

  5. 只保留图片的名称即可

    image-20200910233459539