Hexo搭建个人博客

安装

  • 安装Hexo

    # Hexo
    npm install hexo-cli -g
    hexo init hexo
    cd hexo
    npm install
    hexo server
    # Next theme
    cd hexo
    git clone https://github.com/theme-next/hexo-theme-next themes/next

转移至新设备:

  1. 打包Blog文件夹到新设备
  2. 配置 Git及NodeJS
  3. npm install hexo-cli -g

新建文章

  1. 创建文章:
    使用 Hexo 命令 hexo new [layout] <title> 可以新建一篇文章。

    • layout 是文章的布局,默认为 post,通常可以省略。
    • title 是文章的标题,同时也是文件的名称,文章文件将会保存在 source/_posts 目录下。
    hexo new "如何在hexo上创建一篇文章"

    这条命令会在 source/_posts 目录下生成一个名为 “如何在hexo上创建一篇文章.md” 的 Markdown 文件。

  2. 编辑 Front-matter:
    Front-matter 是位于文章最上方,用 --- 分隔的区域。它用于指定文章的变量设置。例如:

    title: 如何在hexo上创建一篇文章
    date: 2020-09-16 19:33:46
    tags:
    ---

    可以在 Front-matter 中设置其他变量如 categoriestags

    categories:
    - 博客
    tags:
    - 创建文章
  3. 编写内容:
    在 Front-matter 设置好后,你可以继续编写文章的内容。如果文章较长,可以在文章中间插入 <!-- more -->,这样可以在首页显示部分内容,并添加一个 “阅读更多” 的提示。

  4. 发布文章:
    写完文章后,运行以下命令生成和部署网站:

    hexo g && hexo d
  5. 版权声明:
    文章末尾通常可以附上版权声明,示例:

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    原文链接:https://liuaoao.top/archives/ec7d7221.html

Next主题博客个性化

主题配置文件站点配置文件

/hexo/_config.yml
/hexo/themes/next/_config.yml
  1. hexo\source新建 \_data文件夹

  2. 复制\hexo\themes\next\_config.yml\_data文件夹并重命名为 next.yml

  3. 个性化配置+域名设置文件开箱即用:

    链接:https://pan.baidu.com/s/1FS_w7nfsuilyRjwAFKV2WA
    提取码:gy9r

文章分类层级

  1. 分类一般用法

    Hexo 中分类和标签有着明显的差别:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。

    categories:
    - Diary
    tags:
    - PS3
    - Games
  2. 父子分类

    如果您有过使用 WordPress 的经验,就很容易误解 Hexo 的分类方式。WordPress 支持对一篇文章设置多个分类,而且这些分类可以是同级的,也可以是父子分类。但是 Hexo 不支持指定多个同级分类。下面的指定方法:

    categories:
    - Diary
    - Life

    会使分类Life成为Diary的子分类,而不是并列分类。因此,有必要为您的文章选择尽可能准确的分类。

  3. 并列+子分类

    如果你需要为文章添加多个分类,可以尝试以下 list 中的方法。

    categories:
    - [Diary, PlayStation]
    - [Diary, Games]
    - [Life]

    此时这篇文章同时包括三个分类: PlayStation 和 Games 分别都是父分类 Diary 的子分类,同时 Life 是一个没有子分类的分类。

标签大小写

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]
tags: [123, 456]

实现上述分类,需要把git config忽略大小写关闭

# E:\Work\Hexo-hexo\.deploy_git\.git
[core]
repositoryformatversion = 0
filemode = false
bare = false
logallrefupdates = true
symlinks = false
- ignorecase = true
+ ignorecase = false

提示块

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

  • 使用方法

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

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

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

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

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

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

选项卡

选项卡 1

选项卡 2

选项卡 3

  • 使用方法

{% tabs tab,1 %} 名字为tab,默认在第1个选项卡,如果是-1则隐藏
<!-- tab -->
**选项卡 1**
<!-- endtab -->
<!-- tab -->
**选项卡 2**
<!-- endtab -->
<!-- tab A -->
**选项卡 3** 名字为A
<!-- endtab -->
{% endtabs %}

升级Hexo及全部插件

先安装 npm-checknpm-upgrade

npm install -g npm-check npm-upgrade

安装完后,执行 npm-check 即可检查本地各插件版本情况。

执行 npm-upgrade 可根据当前版本和最新版本比较,让用户确认和选择是否升级。若用户确认升级,则会自动把 package-lock.jsonpackage.json 文件内容进行更新后保存,然后执行:

npm update -g --save 

上述命令执行完毕,则所有通过 npm-upgrade 确认的插件全部都升级到最新(包括 Hexo)。

Markdown语法注意

  • Hexo 使用 Nunjucks 来解析文章(旧版本使用 Swig,两者语法类似),内容若包含 {{ }} 或 {% %} 可能导致解析错误,您可以用 raw 标签包裹来避免潜在问题发生。详情见[官方文档问答部分](https://hexo.io/docs/troubleshooting.html#Escape-Contents)。代码如下:
    {% raw %}
    Hello {% trans %}
    {% endraw %}
  • == ** 等左侧开始侧加空格

  • \转义(网址不要带最好/)

  • 图片不显示名称,删掉[]里的值

Reference

[1] 超详细Hexo+Github博客搭建小白教程: https://zhuanlan.zhihu.com/p/35668237

[2] hexo theme next7.8 主题美化: https://blog.csdn.net/tuckEnough/article/details/107383201

[3] Github+Hexo搭建个人博客(图文详解): https://blog.csdn.net/weixin_45377770/article/details/105228938?spm=1001.2014.3001.5506

[4] 在hexo-NexT中插入note提示块: https://jinnsjj.github.io/uncategorized/hexo-next-note/

------------------------------- 本文结束啦❤感谢您阅读-------------------------------
赞赏一杯咖啡