逗比学长的博客

此人有“亿”点强迫症

hexo命令和markdown语法记录

发表于 更新于 分类于 阅读次数：

​ 因为不是天天都有时间来维护博客，因为比较菜所以要做很多输入才有时间思考才有可能做输出，因此之前很多关于Hexo日常使用的命令都忘得一干二净，所以写下来省得以后又得查，但是以前怎么配置的hexo已经完全忘了hhh，如果有时间再写吧，但是这个东西的迭代还是很快的，所以写了以后也未必有用，就像评论系统的引用，看了很多以前的博文都是要自己手动添加yml代码，但是现在只需要在配置文件进行相关的配置即可。

​ 另外，打算记一点markdown语法，因为以后可能要码公式。

Hexo

常用命令

安装

1
npm install hexo-cli -g

生成静态网页

1
hexo g 或 hexo generate

清除缓存

1
hexo clean

在本地启动服务

1
hexo s 或 hexo server

部属到线上

1
hexo d 或 hexo deploy

创建新的页面

1
hexo new page "pageName"

创建新的博客

1
hexo new post "postName"

创建新的草稿

1
2
3
4
5
6
hexo new draft "draftName"

**发布，部署到github**

​```shell
hexo clean && hexo g && hexo d

bugs

hexo: conmand not found

命令行

1
npm config list --json

找到prefix如下

1
2
3
4
5
{
    ...
    "prefix": "C:\\Users\\[user-name]\\AppData\\Roaming\\npm",
    ...
}

将博客目录下的 /node_modules/hexo-cli/bin加入到系统变量的path路径中

新的配置

Echart的引入

请参照我的另一篇博客

代码块高亮部分

参考了这篇博客

于目录/themes/next/source/css/_custom/custom.styl中加入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// Custom styles.

.highlight {
  margin-bottom: 0;
}

.highlight-wrap[data-rel] {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  padding-top: 15px;
  background-color: #f7f7f7;
  box-shadow: 0 10px 30px 0px rgba(0,0,0,0.4);
  margin: 35px 0;
  ::-webkit-scrollbar {
    height: 10px;
  }

  ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  }
  &::before {
    color: white;
    content: attr(data-rel);
    height: 38px;
    line-height: 38px;
    background: #21252b;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: bold;
    padding: 0px 80px;
    text-indent: 15px;
    float: left;
  }
  &::after {
    content: " ";
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #fc625d;
    width: 12px;
    height: 12px;
    top: 0;
    left: 20px;
    margin-top: 13px;
    -webkit-box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
    box-shadow: 20px 0px #fdbc40, 40px 0px #35cd4b;
    z-index: 3;
  }
}

以及于/themes/next/script/下新建文件codeblock.js加入下述代码，即在hexo的after-post-render过滤器替换了HTML片段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var attributes = [
  'autocomplete="off"',
  'autocorrect="off"',
  'autocapitalize="off"',
  'spellcheck="false"',
  'contenteditable="true"'
];

var attributesStr = attributes.join(' ')

hexo.extend.filter.register('after_post_render', function (data) {

  while (/<figure class="highlight ([a-zA-Z]+)">.*?<\/figure>/.test(data.content)) {

    data.content = data.content.replace(/<figure class="highlight ([a-zA-Z]+)">.*?<\/figure>/, function () {

      var language = RegExp.$1 || 'plain';
      var lastMatch = RegExp.lastMatch;

      lastMatch = lastMatch.replace(/<figure class="highlight /, '<figure class="iseeu highlight /');

      return '<div class="highlight-wrap"' + attributesStr + 'data-rel="' + language.toUpperCase() + '">' + lastMatch + '</div>'
    });
  }
  return data;
});

博客文章加密

使用hexo-blog-encrypt插件，安装如下

1
npm install --save hexo-blog-encrypt

在_config.yml中加入

1
2
encrypt:
    enable: true

在你想要加密的文章中配置

1
2
3
4
5
6
7
---
title: Hello World
date: 2016-03-30 21:18:02
password: mikemessi
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.
---
  • password is the blog password.
  • abstract is the content which will be showed in the blog list page.
  • message is the content which will be showed in the blog detail page.

加密后的sidebar异常，解决方案见：https://yuyuforest.com/2018/10/18/encrypt-toc/

文章置顶

  1. 修改仓库，使其支持置顶功能
1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
  1. 在文章中添加置顶信息
1
2
3
4
title: Hello World！
date: 2018-06-26 10:37:59
tags: 随笔
top: 10

图片懒加载

使用hexo-lazyload-image插件，安装如下

1
npm install hexo-lazyload-image --save

在博客配置_config.yml中添加一下代码，图片放在theme\next\source\images下：

1
2
3
4
lazyload:
  enable: true 
  onlypost: false
  loadingImg: /images/loading.gif

加载进度条

使用theme-next-pace插件

  1. 修改目录到NexT下，要有 layout, source, languages 和其他文件
1
2
3
$ cd themes/next
$ ls
_config.yml  crowdin.yml  docs  gulpfile.js  languages  layout  LICENSE.md  package.json  README.md  scripts  source
  1. 拉取模块到 source/lib 目录下:
1
$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace
  1. 配置主题文件_config.yml
1
2
3
4
5
6
pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

代码块折叠功能

点击显/隐

你需要折叠的内容

参考了这篇的博客

步骤如下：

1.在POST主文件中添加JS判断代码，在/themes/next/source/js/src/post-details.js中添加一下代码，可以在文件开头添加即可：

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
    $(document).on('click', '.fold_hider', function(){
        $('>.fold', this.parentNode).slideToggle();
        $('>:first', this).toggleClass('open');
    });
    // 默认情况下展开
    // $("div.fold").css("display","open");
    // 默认情况下折叠
    $("div.fold").css("display","none");
});

2.定义内建标签，在/themes/next/scripts/中新建文件 tags.js并添加如下代码： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
  @haohuawu
  修复 Nunjucks 的 tag 里写 ```代码块```，最终都会渲染成 undefined 的问题
  https://github.com/hexojs/hexo/issues/2400
*/
const rEscapeContent = /<escape(?:[^>]*)>([\s\S]*?)<\/escape>/g;
const placeholder = '\uFFFD';
const rPlaceholder = /(?:<|&lt;)\!--\uFFFD(\d+)--(?:>|&gt;)/g;
const cache = [];
function escapeContent(str) {
  return '<!--' + placeholder + (cache.push(str) - 1) + '-->';
}
hexo.extend.filter.register('before_post_render', function(data) {
  data.content = data.content.replace(rEscapeContent, function(match, content) {
    return escapeContent(content);
  });
  return data;
});
hexo.extend.filter.register('after_post_render', function(data) {
  data.content = data.content.replace(rPlaceholder, function() {
    return cache[arguments[1]];
  });
  return data;
});

在同一目录下新建文件fold.js添加如下代码： 

1
2
3
4
5
6
7
8
/* global hexo */
// Usage: {% fold ???? %} Something {% endfold %}
function fold (args, content) {
    var text = args[0];
    if(!text) text = "点击显/隐";
    return '<div><div class="fold_hider"><div class="close hider_title">' + text + '</div></div><div class="fold">\n' + hexo.render.renderSync({text: content, engine: 'markdown'}) + '\n</div></div>';
}
hexo.extend.tag.register('fold', fold, {ends: true});

3.添加折叠功能样式，在/themes/next/soure/css/_custom/custom.styl添加如下代码： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
.hider_title{
    font-family: "Microsoft Yahei";
    cursor: pointer;
}
.close:after{
    content: "▼";
}
.open:after{
    content: "▲";
}

.feed-link a {
  display: inline-block;
}

4.使用方法

1
2
3
{% fold 点击显/隐内容 %}
你需要折叠的内容
{% endfold %}

文章字数和阅读时长

安装 hexo-wordcount

1
npm install hexo-wordcount --save

然后在主题的配置文件中，配置如下内容：

1
2
3
4
5
6
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

对于Swig文件需要像如下加入数据

Post Count:

1
<span class="post-count">{{ wordcount(post.content) }}</span>

Post Minutes to Read:

1
<span class="post-count">{{ min2read(post.content) }}</span>

Total Count:

1
<span class="post-count">{{ totalcount(site) }}</span>

其中totalcount是对站点所有字数的统计，我在next/layout/archive.swig中这个位置添加了如下字段。

1
{{ __('cheers.' + cheers) }}! {{ _p("counter.archive_posts", site.posts.length) }} 一共码了{{ totalcount(site)}}字， {{ __('keep_on') }}

在归档页面呈现的效果如下：

2

至于wordcount和min2read，由于是对每个post的统计，所以在next/layout/__macro/post.swig中加入以下字段

1
2
3
4
5
6
7
8
{% if theme.post_wordcount.wordcount %}
            <span class="post-meta-divider">|</span>
            <span class="post-count">{{ __('post.wordcount')  + __('symbol.colon') + wordcount(post.content) }}</span>
{% endif %}
{% if theme.post_wordcount.min2read %}
            <span class="post-meta-divider">|</span>
            <span class="post-count">{{ __('post.min2read') + __('symbol.colon') + min2read(post.content)}}</span>
{% endif %}

其中theme.post_wordcount.wordcount是在主题文件__config.yml中拿的值，所以要在主题文件__config.yml中添加字段

1
2
3
4
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true

而双花括号中的字段是在/language/zh-CN.yml中取的值，所以要在post下面加上wordcount和min2read字段，写上你想要的文字。这里为什么不直接在swig文件中写上中文文字，理解很简单，就是为了语言和html的分离，如果在根目录__config.yml中修改了语言，不需要修改swig文件也能够使展示变得正常，这相当于一种解耦。

LeanCloud配置使用

参考hexo-theme-next，这个文件在themes/next/docs/也有，叫LEANCLOUD-COUNTER-SECURITY.md。

图片弹出效果 - fancybox

fancybox 的特性：

  • 允许我们用鼠标和键盘上的四个方向键切换图片
  • 可以根据当前窗口大小自动调整弹出框的大小，当我们改变浏览器窗口大小时，将会看到弹出框自动缩放了
  • 支持缩略图和按钮帮助导航

设置图片显示，配置见 theme-next-fancybox3

添加gitalk评论功能

在themes/next/_config.yml中有相关gitalk配置

1
2
3
4
5
6
7
8
gitalk:
  enable: true
  github_id:  github
  repo:  543877815.github.io
  client_id:  
  client_secret:  
  admin_user:  543877815
  distraction_free_mode: true # Facebook-like distraction free mode

其中client_id和client_secret在github的setting/Developer settings/OAuth Apps中进行创建与配置。

配置文件下面还有一个gitalk的js和css需要进行填写

1
2
3
4
5
6
# gitalk
# See: https://github.com/gitalk/gitalk
# Example:
gitalk_js: https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js
gitalk_css: https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css

添加音乐

访问 Aplayer 网站：GitHub Aplayer。下载源码到本地，解压后将dist的css文件放置在theme\next\source\css文件中，将js文件放置在themes\next\source\js\src文件中，新建themes\next\source\js\src\music.js文件，添加内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: false,
    audio: [
      {
        name: "灰色头像",
        artist: '许嵩',
        url: 'http://www.ytmp3.cn/down/59697.mp3',
        cover: 'http://img.ytmp3.cn/image/79.jpg',
      },
      {
        name: '多余的解释',
        artist: '许嵩',
        url: 'http://www.ytmp3.cn/down/60447.mp3',
        cover: 'http://img.ytmp3.cn/image/78.jpg',
      }
    ]
});

然后配置theme\next\layout\_layout.swig文件，将下述代码添加到<body></body>之间。然后就能看到左下角的音乐播放器。

1
2
3
4
<link rel="stylesheet" href="/css/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/js/src/APlayer.min.js"></script>
<script type="text/javascript" src="/js/src/music.js"></script>

新增页面

通用操作

这个页面是区别于博文的新页面，通过hexo new page [pageName]在博客的source下生成一个叫[pageName]的目录，里面有一个文件叫index.md，这个markdown文件将被直接用于渲染这个页面，可以写html、css、js代码，目录中还会生成一个叫index的文件夹，里面可以放静态资源。

然后在侧边栏添加页面链接，主题配置文件_config.yml中添加key: value字段，key字段是页面在配置文件中的唯一标识，value字段中||左边的是访资源的路径，||右边是链接的图标，用的是fontawsome的类名。

1
2
3
4
5
6
7
8
menu:
  home: / || home
  top: /top/ || signal
  categories: /categories/ || th
  tags: /tags/ || tags
  archives: /archives/ || archive
  about: /about/ || user
  links: /links || link

为侧边栏链接添加中文描述，在默认情况下，链接默认会显示为_config.yml中配置的key，如果想要修改为中文描述，需要在themes\next\languages\zh-CN.yml中添加menu.[pageName]的描述

1
2
3
4
5
6
7
8
9
menu:
  home: 首页
  top: 热榜
  archives: 归档
  categories: 分类
  links: 友链
  tags: 标签
  about: 关于
  search: 搜索

新增阅读排行页面

参考自小丁的个人博客，需要先配置LeanCloud，然后hexo n page top 新建页面，会生成 top 目录，编辑其中自动生成的 index.md 文件，将其中的代码替换如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="top"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("leancloud_appid", "leancloud_appkey");</script>
<script type="text/javascript">
  var time=0
  var title=""
  var url=""
  var query = new AV.Query('Counter');
  query.notEqualTo('id',0);
  query.descending('time');
  query.limit(1000);
  query.find().then(function (todo) {
    for (var i=0;i<20;i++){  // 20 为显示Top 20热度的文章
      var result=todo[i].attributes;
      time=result.time;
      title=result.title;
      url=result.url;
      var content="<p>"+"<font color='#1C1C1C'>"+"【文章热度:"+time+"℃】"+"</font>"+"<a href='"+"${yourUrl}"+url+"'>"+title+"</a>"+"</p>";
      document.getElementById("top").innerHTML+=content
    }
  }, function (error) {
    console.log("error");
  });
</script>

并将其中的 leancloud_appid、leancloud_appkey 和页面链接替换为你的。

新增友链页面

参考自小丁的个人博客，首先hexo n page links 新建页面，会生成 links 目录，编辑其中自动生成的 index.md 文件，将其中的代码替换如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
---
title: 友链
type: links
---

<style>.links-content{margin-top:1rem}.link-navigation::after{content:" ";display:block;clear:both}.card{width:130px;font-size:1rem;padding:0;border-radius:4px;transition-duration:.15s;margin-bottom:1rem;display:block;float:left;box-shadow:0 2px 6px 0 rgba(0,0,0,.12);background:#f5f5f5}.card{margin-left:16px}@media(max-width:567px){.card{margin-left:16px;width:calc((100% - 16px)/2)}.card:nth-child(2n+1){margin-left:0}.card:not(:nth-child(2n+1)){margin-left:16px}}@media(min-width:567px){.card{margin-left:16px;width:calc((100% - 32px)/3)}.card:nth-child(3n+1){margin-left:0}.card:not(:nth-child(3n+1)){margin-left:16px}}@media(min-width:768px){.card{margin-left:16px;width:calc((100% - 48px)/4)}.card:nth-child(4n+1){margin-left:0}.card:not(:nth-child(4n+1)){margin-left:16px}}@media(min-width:1200px){.card{margin-left:16px;width:calc((100% - 64px)/5)}.card:nth-child(5n+1){margin-left:0}.card:not(:nth-child(5n+1)){margin-left:16px}}.card:hover{transform:scale(1.1);box-shadow:0 2px 6px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.card .thumb{width:100%;height:0;padding-bottom:100%;background-size:100% 100%!important}.posts-expand .post-body img{margin:0;padding:0;border:0}.card .card-header{display:block;text-align:center;padding:1rem .25rem;font-weight:500;color:#333;white-space:normal}.card .card-header a{font-style:normal;color:#2bbc8a;font-weight:700;text-decoration:none;border:0}.card .card-header a:hover{color:#d480aa;text-decoration:none;border:0}</style><div><div class="links-content"><div class="link-navigation" id="links1"></div></div></div>

------

<div style="text-align:center;"><span class="with-love" id="animate1">
    <i class="fa fa-heart"></i>
  </span>留言添加友链<span class="with-love" id="animate2">
    <i class="fa fa-heart"></i>
  </span></div>
  
------

{% note success %}

## 友链格式

- 网站名称：小丁的个人博客
- 网站地址：[https://tding.top](https://tding.top)
- 网站描述：世间所有的相遇，都是久别重逢
- 网站Logo/头像：[https://tding.top/images/avatar.webp](https://tding.top/images/avatar.webp)

{% endnote %}

然后在页面目录 /source/links/ 中添加 linklist.json，示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
```json
[
	{
		"nickname": "三水非冰博客",
		"avatar": "https://www.sanshuifeibing.com/usr/images/avatar2.jpg",
		"site": "https://www.sanshuifeibing.com"
	},
	{
		"nickname": "北宸",
		"avatar": "https://leafjame.github.io/images/beichen.png",
		"site": "https://leafjame.github.io"
	},
	{
		"nickname": "千灵夙赋",
		"avatar": "https://qianling.pw/images/avatar.png",
		"site": "https://qianling.pw/"
	}
]

创建link.js保存在themes\next\source\js\src\下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
link = {
  init: function() {
      var that = this;
      //这里设置的是刚才的 linklist.json 文件路径
      $.getJSON("/links/linklist.json",
      function(data) {
          that.render(data);
      });
  },
  render: function(data) {
      var html, nickname, avatar, site, li = "";
      for (var i = 0; i < data.length; i++) {
          nickname = data[i].nickname;
          avatar = data[i].avatar;
          site = data[i].site;
          li += '<div class="card">' + '<a href="' + site + '" target="_blank">' + '<div class="thumb" style="background: url( ' + avatar + ');">' + '</div>' + '</a>' + '<div class="card-header">' + '<div><a href="' + site + '" target="_blank">' + nickname + '</a></div>' + '</div>' + '</div>';

      }
      $(".link-navigation").append(li);
  }
}
link.init();

最后在/source/links/index.md中引入该js:<script src="/js/src/link.js"></script>，另外可能需要自己添加jquery.js

Tag Plugin语法

参考自小丁的个人博客

文本居中引用

1
{% cq %}世间所有的相遇，都是久别重逢{% endcq %}

世间所有的相遇，都是久别重逢

提示块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
default 提示块标签
{% endnote %}

{% note primary %}
primary 提示块标签
{% endnote %}

{% note success %}
success 提示块标签
{% endnote %}

{% note info %}
info 提示块标签
{% endnote %}

{% note warning %}
warning 提示块标签
{% endnote %}

{% note danger %}
danger 提示块标签
{% endnote %}

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Note tag (bs-callout).
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  # 风格
  style: flat
  # 要不要图标
  icons: true
  # 圆角矩形
  border_radius: 3
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0

标签

1
2
3
4
5
6
7
{% label default@默认 %} 
{% label primary@主要 %}
{% label success@成功 %}
{% label info@信息 %} 
{% label warning@警告 %} 
{% label danger@危险 %} 
{% label success@这是成功的信息%}

默认
主要
成功
信息
警告
危险
这是成功的信息

选项卡

1
2
3
4
5
6
7
8
9
10
11
{% tabs tab,1 %} 名字为tab是唯一标识，默认在第1个选项卡，如果是-1则隐藏
<!-- tab -->
**选项卡 1** 
<!-- endtab -->
<!-- tab -->
**选项卡 2**
<!-- endtab -->
<!-- tab A -->
**选项卡 3** 名字为A
<!-- endtab -->
{% endtabs %}

选项卡 1

选项卡 2

选项卡 3 名字为A

主题_config.yml配置项

1
2
3
4
5
6
7
# Tabs tag
tabs:
  enable: true
  transition:
    tabs: true
    labels: true
  border_radius: 0

按钮

1
{% button url, text, icon [class], [title] %}
  • url : 绝对或相对 URL
  • text : 按钮文字，如果未指定图标则为必须
  • icon : FontAwesome 图标名称（开头没有’fa-‘）。如果未指定文本，则为必需
  • [class] : FontAwesome 类：fa-fw | fa-lg | fa-2x | fa-3x | fa-4x | fa-5X ，可选参数。
  • [title] : 鼠标悬停时的工具提示，可选参数。

注意：最好添加 <div> 标签，测试时没加 div，下面显示不完全，加上非常美观。

1
<div>{% button https://tding.top/ ,首页,home fa-fw,这是小丁的个人博客首页%}</div>
1
2
3
4
5
6
7
<div class="text-center">
    <div>
        {% button https://tding.top/ ,首页,home fa-fw,这是小丁的个人博客首页%}
        {% button https://tding.top/movies/ ,观影,film fa-fw,豆瓣电影%} 
        {% button https://tding.top/books/ ,阅读,book fa-fw,豆瓣读书%}
    </div>
</div>

Markdown

Html

hexo new "博客文章文件名"

1
2
3
4
5
6
7
<table>
    <tr>
        <td bgcolor=#f8d7da>
            <font color=#c7254e>hexo new "博客文章文件名"</font>
        </td>
    </tr>
</table>

Ctrl + , 
1
2
3
4
5
6
7
<table>
    <tr>
        <td bgcolor=#333>
            <font color=#fff>hexo new "博客文章文件名"</font>
        </td>
    </tr>
</table>

H2O

1
H<sub>2</sub>O

X2

1
X<sup>2</sup>

我在中间

1
<center>我在中间</center>

正确引用：

1

1
<img src="2019-09-18-Re-recognizing-machine-learning\5.png" width="75%">

Latex

安装Mathjax插件

1
npm install hexo-math --save

更换Hexo的markdown渲染引擎

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

解决语义冲突

由于LaTeX与markdown语法有语义冲突，在markdown中，斜体和加粗可以用或者表示，在这里我们修改变量，将用于LaTeX，而使用表示markdown中的斜体和加粗，于 node_modules\kramed\lib\rules\inline.js 中

修改11行

1
2
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
 escape: /^\\([`*\[\]()#$+\-.!_>])/,

和20行

1
2
//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

更改配置文件

于 _config.yml配置mathjax

1
2
3
4
5
6
# MathJax Support
mathjax:
  enable: true
  per_page: true
  #cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML
  cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML

hexo下LaTeX无法显示的解决方案

解决方法参考

使用

每次写博客要在前面加上mathjax: true

1
2
3
4
5
6
---
title: index.html
date: 2018-2-8 21:01:30
tags:
mathjax: true
--

  1. 行内公式

    1
    $行内公式$

  2. 行间公式(自动居中)

    1
    $$行间公式$$

公式编辑的bug

对于sum和min需要使用$$进行包裹，如果仅使用$包裹将无法解析

公式编号问题

如果使用align对公式进行包裹

1
2
3
4
5
6
\begin{align}
公式一\\
公式二\\
公式三\\
\end{align}
\tag{1}

在网页上渲染会出现多个公式编号：

正确的写法是

1
2
3
4
5
6
\begin{align*}
公式一\\
公式二\\
公式三\\
\end{align*}
\tag{1}

渲染效果为：

公式引用

可以用\tag{tag}给原公式打Tag。如果在后面需要引用它，就在\tag后面加上\label{tag}，例子如下：

先给原式子打上tag和label

1
a:=x^2-y^3\tag{52}\label{52}

如果需要引用改公式，则需要使用\eqref{tag}

1
$$a+y^3\stackrel{\eqref{52}}=x^2$$

也可以使用\ref{tag}，这样引用没有括号，显示为：