他乡之客

Excellence is an art won by training and habituation.

0%

hexo入门

发表于 更新于 分类于
本文字数： 9.7k 阅读时长 ≈ 9 分钟

hexo使用记录

[TOC]

hexo常用命令

1
2
3
4
5
6
7
8
9
10
11
12
 hexo n "博客名称"  => hexo new "博客名称"   #这两个都是创建新文章，前者是简写模式
 hexo new paper "文章名称"    #其中paper表示自己x模板
$ hexo p  => hexo publish
$ hexo g  => hexo generate  #生成
$ hexo s  => hexo server  #启动服务预览
$ hexo d  => hexo deploy  #部署

$ hexo server   #Hexo 会监视文件变动并自动更新，无须重启服务器。
$ hexo server -s   #静态模式
$ hexo server -p 5000   #更改端口
$ hexo server -i 192.168.1.1   #自定义IP
$ hexo clean   #清除缓存，网页正常情况下可以忽略此条命令

hexo删除文章

目前未找到删除文章的指令，可以到目录/source/_posts下删除相应的文章，然后重新生成部署即可

1
2
3
#到目录/source/_posts下删除相应的文章
hexo g
hexo d

hexo生成文章

1
hexo new [layout] <title>

您可以在命令中指定文章的布局（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

Hexo 有三种默认布局：post、page 和 draft。在创建这三种不同类型的文件时，它们将会被保存到不同的路径；而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

1
<center>要居中的文字</center>

html标题

1
<h1 align = "center">hexo入门</h1>

hexo部署

  1. 本地预览和同时发布到远程的浏览结果不一致

这是由缓存造成的,需要先hexo clean,再hexo g -d部署到远程

hexo创建页面

  1. 创建一般的文章：hexo new “文章名称”

  2. 创建"关于我"等页面：hexo new page "about"这里的about要和在主题的_config.yml文件中的menu中进行匹配
    如：menu:
    Home: /
    Archives: /archives
    About: /about
    那创建关于我的页面：hexo new page “about” 在编辑创建出来的md文件，然后部署就能看到

  3. 创建友情链接：在主题的配置中：
    links_title: 友情链接
    links:
    CSDN: http://blog.csdn.net/u012900536

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    menu:
      home: / || fa fa-home
      about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
      archives: /archives/ || fa fa-archive
      books: /books/ || fa fa-book
      schedule: /schedule/ || fa fa-calendar
      sitemap: /sitemap.xml || fa fa-sitemap
      commonweal: /404/ || fa fa-heartbeat

    如上，在里面添加了books

    菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题。

    若你的站点运行在子目录中，请将链接前缀的 / 去掉

    开始使用 - NexT 使用文档

    https://fontawesome.com/

hexo代码块高亮

首先需要动的地方有：

1
2
3
主题的_config.yml文件
站点的_config.yml文件
代码块的语言标注

站点配置文件

在站点的配置文件中，搜索hightlight:

1
2
3
4
5
highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

文字自动检测默认不启动，所以改成true使其起作用。

主题配置文件

再到主题的配置文件：

找到：

highlight_theme: normal，注释显示有五种显示主题可用，分别是：

1
2
3
4
5
normal
night
night eighties
night blue
night bright

选择的是night bright

还可以选择mac风格

_config.yml 配置一下 codeblock.copy_button.style: mac

hexo next 代码块高亮

Hexo+NexT美化🍕Mac Panel风格代码块配置

配置markdown渲染器

主要是为了数学公式，

Next 主题可以使用 mathjax 和 katex 两种渲染 latex 的方式。

  • katex 渲染速度更快，但仅支持 latex 的子集。
  • mathjax 渲染速度稍慢，但对 latex 的支持较好。

Next 主题的配置文件 _config.yml 中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Math Formulas Render Support
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

mathjax 和 katex 是互斥的两个选项，enable 不能同时 true或 false。

如果设置 mathjax : true ，就需要更换渲染引擎， hexo-renderer-pandoc 或 hexo-renderer-kramed（这个不推荐）

hexo-renderer-marked：hexo默认的渲染器不支持复杂的数学公式
hexo-renderer-kramed：支持复杂的数学公式，mathjax的渲染方式
hexo-renderer-markdown-it：取代第一个的渲染器，渲染更快，更符合CommonMark规则。
hexo-renderer-markdown-it-katex：跟上一个差不多，但是不用设置就支持katex
hexo-renderer-markdown-it-plus：好用，可以自己决定是否要渲染katex公式。此外能渲染的东西多，但是已经不维护了。
@upupming/hexo-renderer-markdown-it-plus ：上一个的升级版。好用。支持的功能多

虽然next不推荐katlex这里选用的是katex

步骤：

  1. 更换渲染器

    1. 卸载原来的
      如果你没换过hexo的渲染器，那你就这样卸载：

      1
      npm uni hexo-renderer-marked --save

      如果你换过了，那你就想想你用的是什么渲染器，然后卸载

      1
      npm uni 你的渲染器 --save

    2. 下载新的渲染器

    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
       npm i @upupming/hexo-renderer-markdown-it-plus --save

    2. 修改 _config.yml文件

       1. 介绍文件
          先一下完整代码，把这段代码完整的放到你博客的 _config.yml里边。下边详细解释一下每行代表什么。

          ```yaml
          # Markdown config
          markdown_it_plus:
            render:
              html: true						
              xhtmlOut: false
              breaks: true
              linkify: true
              typographer: true
              quotes: '“”‘’'
            plugins:
            anchors:	
              level: 2
              collisionSuffix: 'v'
              permalink: true
              permalinkClass: header-anchor
              permalinkSide: 'left'
              permalinkSymbol: ¶

    render
    html：
    true 支持HTML内嵌
    xhtmlOut：
    true 解析器markdown为完全符合XHTML的代码。例如：一个换行符将是
    ，否则会转换为

    breaks：
    true 每当.md文件的换行符都会解析器都会生成
    标签。
    其实讲真的这个设置true还是false，我页面上没看出区别。
    linkify：
    true 返回文本链接作为与段落内联的适当链接。例如，如果你写的一段文本看起来像一个链接，它将被呈现为http://example.com，否则会解析为文本，比如http://example.com
    typographer：替换常见的排版元素。
    quotes：在 typographer为true的时候才好使，用于替换英文单双引号。
    如果quotes：’“”‘’’ 那么"hello" ‘hello’会变成“hello” ‘hello’
    如果quotes：’«»“”'那么"hello" 'hello’会变成«hello» “hello”
    我用着不好使

    plugins

    添加插件，这就是我为什么选了这个渲染器，这个默认支持的比较多，不用自己下载。
    markdown markdown-it-toc-and-anchor支持@[toc]生成目录
    anchors: 这个按照我上边的默认值写就行

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    # Minimum level for ID creation. (Ex. h2 to h6)
    level: 2
    # A suffix that is prepended to the number given if the ID is repeated.
    collisionSuffix: ''           
    # If `true`, creates an anchor tag with a permalink besides the heading.
    permalink: false              
    # Class used for the permalink anchor tag.
    permalinkClass: header-anchor
    # Set to 'right' to add permalink after heading
    permalinkSide: 'left'
    # The symbol used to make the permalink
    permalinkSymbol: 
    # Transform anchor to (1) lower case; (2) upper case
    case: 0
    # Replace space with a character
    separator: '-'

    1. 修改文件

      添加插件你可以

      1
      2
      3
      4
      plugins:
        - markdown-it-sub
        - markdown-it-sup
        - ...

      也可以

      1
      2
      3
      4
      5
      6
      7
      8
      9
      plugins:
      - plugin:
      	 name: markdown-it-sub
      	 enable: false	#false就是不开启这个插件
      - plugin:
      	 name: markdown-it-sup
      	 enable: false	#false就是不开启这个插件
        - ...
            
      1
      2
      3
      4
      5
      6
      7
      8
      plugins:
        - markdown-it-sub
        - markdown-it-sup
        - markdown-it-footnote
        - markdown-it-ins
        - markdown-it-mark
        - markdown-it-katex
        - markdown-it-toc-and-anchor

    2. 增加插件
      如果你想用其他的插件，你可以自己下载
      npm install markdown-it-... --save

支持katex公式

  1. 修改_config.yml的 plugins，增加katex插件

plugins:

  • markdown-it-katex

  1. 给你主题的中引入一个css，一般路径主题/source/css，找到对应的文件，加上https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css

  2. 这个地方是在next的_config.yml里面填写的

    1
    2
    3
    katex:
    copy_tex_js:
    copy_tex_css: https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css

最后一定要记得hexo clean 之后再hexo g hexo s

hexo markdown渲染器 @upupming/hexo-renderer-markdown-it-plus

Hexo Next主题渲染 Latex 公式的配置方法

让 Hexo Next (v8.0.0) 支持 LaTeX 数学公式

hexo博客站点sitemap

hexo博客站点sitemap的使用

Hexo博客站点地图配置（Google）

Baidu/Google站点地图

hexo的next主题美化设置

Hexo的Next主题美化设置

Hexo next主题博客搭建及美化

在 Hexo 中添加豆瓣个人主页

Hexo 加入豆瓣读书页面

hexo同步管理以及迁移

将hexo部署环境上传到GitHub方法

  • github上切换到hexo分支，git clone仓库到本地。
  • 此时本地会多出一个username.github.io文件夹，命令行cd进去，删除除.git文件夹（如果你看不到这个文件夹，说明是隐藏了。windows下需要右击文件夹内空白处，点选’显示/隐藏 异常文件’，Mac下我就不知道了）外的其他文件夹。
  • 命令行git add -A把工作区的变化（包括已删除的文件）提交到暂存区（ps:git add .提交的变化不包括已删除的文件）。
  • 命令行git commint -m "some description"提交。
  • 命令行git push origin hexo推送到远程hexo分支。此时刷下github，如果正常操作，hexo分支应该已经被清空了。
  • 复制本地username.github.io文件夹中的.git文件夹到hexo项目根目录下。此时，hexo项目已经变成了和远程hexo分支关联的本地仓库了。而username.github.io文件夹的使命到此为止，你可以把它删掉，因为我们只是把它作为一个“中转站”的角色。以后每次发布新文章或修改网站样式文件时，git add . ; git commit -m "some description" ; git push origin hexo即可把环境文件推送到hexo分支。然后再hexo g -d发布网站并推送静态文件到master分支。

至此，hexo的环境文件已经全部托管在github的hexo分支了

在新的电脑部署原hexo博客

首先是git有ssh key密钥之类的 ，这一部分略去，后续有时间专门介绍

1
2
3
4
5
6
7
8
9
git clone git@github.com:Josephucas/Josephucas.github.io.git
#有些库下载不了，得用国内源，我后面就直接cpm了
npm config set registry https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install hexo-cli -g
#在根目录下cnpm install
#然后直接hexo g hexo s 试一下

关于next自定义主题的有些问题

一般我们在下载主题的时候都是在themes文件夹下直接git clone某仓库的，这样的话，仓库的文件夹下会直接留下.git文件这个文件在这里的时候，会导致你在博客根目录的时候，会发现这里还有一个.git文件，就会直接作为第三方的仓库，这样的坏处是，我们往往会对next主题进行一些魔改的地方就不能被同步的

所以我这边就直接把.git和gitignore删掉

并且，如果在github上还是以第三方仓库的形式，需要先git删除掉自己当初上传的themes

如在根目录下

1
git rm -r --cached D:\github\Josephucas.github.io\themes\hexo-theme-next

这样取消对next之前的追踪记录

然后再重新上传，就ok了

1
git add -A ；git commit -m "some description" ; git push origin hexo

​ 但是这样还是会有一个问题，我们的next主题的_config.yml里面往往会有一些私人信息，比如一些插件的账号和密码，这些往往是我们不想让别人知道的，我第一次的时候就直接泄露了gitalk的密码，

​ 后面我搜索了很多关于git删除记录的方法，其他的都很麻烦，用bfg还算是比较方便的

1
java -jar bfg-VERSION .jar YOUR-REPOSITORY/ .git --delete-files "config.py"

​ 但是最后还是直接到github里面的gitalk里面把原来的密钥删掉，生成新的密钥，是最方便的，然后到博客根目录的gitignore里面直接把 config文件加入忽略上传，并且删掉原来的config文件，我自己通过第三方（网盘或者U盘或者微信）同步config文件

1
2
git rm -r --cached "D:\github\Josephucas.github.io\themes\hexo-theme-next\_config.yml"
git commit -m "some discription";git push origin hexo

hexo博客同步管理及迁移

十分鐘超詳細替 Hexo Next 開啟 Gitalk 留言版

在GitHub上公开秘密：泄露凭证和API密钥后该怎么办

增加友链

本人采用这个：hexo next 自定义友链页面

我觉得这个也不错：Hexo NexT 添加友链页面

Hexo个人博客自定义友链页面

添加背景图片和虚化

next主题美化——背景图片、动画我用的好像是这个

hexo-blog配置cdn

加速常见的通用前端文件

主要是一些比较常见的前端文件，像是jquery这种，next主题里面提供了十分便捷的修改方式，打开主题配置文件_config.yml，搜索关键词Script Vendors然后就直接把哪些注释掉的重新启用即可

加速项目自己的前端文件

除了上面常用的一些前端资源的cdn之外，我们还可以通过jsdelivr来对我们项目自己的前端文件进行加速。

从此处可以看到，jsdelivr将GitHub上的文件都cdn起来了（当然前提是你的仓库是公开的），那么我们就可以使用这个cdn来加载我们项目里的前端文件了，同样是修改next主题配置文件_config,yml，搜索Assets，下面是修改前后的对比（注释掉的内容是修改前）

1
2
3
4
5
6
7
# Assets
# css: css
# js: js
# images: images
css: //cdn.jsdelivr.net/gh/user/repo@master/css
js: //cdn.jsdelivr.net/gh/user/repo@master/js
images: //cdn.jsdelivr.net/gh/user/repo@master/images
  • 注意将user和repo修改为自己对应的用户名和仓库名称
  • 可以先自己尝试着看能不能访问到对应的js文件来进行验证

https://wuweizhao.com/2020/05/13/hexo-blog配置cdn/

hexo字体配置

https://spartazhc.github.io/2020/06/03/Next主题字体配置/

hexo支持pdf

1
npm install --save hexo-pdf

这一步在国内有两种可行办法，一种是使用本地的文件，让hexo从博客中加载，一种就是放在云端的存储仓库进行加载。这里两种方法都做演示，但是推荐使用后者。

另外需要在next的主题下面的config设置里面查找pdf，并且把pdf的功能打开

如下所示：

1
2
3
4
5
6
7
8
# PDF tag
# NexT will try to load pdf files natively, if failed, pdf.js will be used.
# So, you have to install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
# See: https://github.com/theme-next/theme-next-pdf
pdf:
  enable: true
  # Default height
  height: 500px

本地文件

  1. 这个方法比较简单，但是效果较差，可能会造成较大的卡顿，首先在本地的根目录下打开source在这个文件夹下直接将你的pdf放进去即可。

在你的本地的博客根目录下新建一篇文章命令行

1
hexo new "文章名称"

到你的根目录里的source/_posts文件夹中找到新建的文章，在完成了文章的头部编辑之后，在正文部分只用加一句

回到博客的根目录运行,生成hexo部署文档

1
hexo g
  1. 新建一个英文名称的公共仓库。
  2. 在本地文件夹clone或者是通过任何方法使本地文件夹和仓库相连通
  3. 将你要发布的pdf放在本地的文件夹中
  4. 使用git push命令将文件推到远端仓库
  5. 使用jsDelivr的cdn服务实现国内的加速访问，访问方法如下：
    在文档中加入pdf嵌入语句
1
{% pdf https://cdn.jsdelivr.net/gh/你的GitHub账户名/你的新建的仓库名/你的文件路径/你的pdf文件.pdf %}

到这里应该就已经全部结束了，但是在实际访问过程中，我发现我的一些下载插件经常会自动抓取到pdf并提示下载，遇到这种情况就可以通过白名单，或者是忽略解决。

刚刚自己试了以下，刚开始和上面一样的话，宽度太窄了，现在用了下面的试了一下，感觉高度又太窄了

最后发现需要调整height为877px，而不是单纯设置为100%

1
2
<object data="https://cdn.jsdelivr.net/gh/Josephucas/Josephucas.github.io/pdf/中式英文书写错误习惯勘误.pdf" type="application/pdf" width="100%" height="877px">
</object>