基于 Hexo 学习搭建个人BLOG

发表于 | 更新于 | 分类于

Hexo

个人博客搭建源码以及配置文件、资源文件等

产考

Hexo+NexT 打造一个炫酷博客

基于Hexo搭建个人博客——进阶篇(从入门到入土)

打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化

如何搭建基于 Hexo 的独立博客

使用gh-pages+Hexo搭建个人网页教程

API

hexo

material-x

next

使用手册

添加注脚

这是一个基本的脚注[1]

1
2
// 用的时候把/去掉
这是一个基本的脚注[/^1]

文字增加背景色块

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

1
<span id="inline-blue">站点配置文件</span>，<span id="inline-purple">主题配置文件</span>

引用边框变色

如果没有安装成功，那可能就是墙的原因。建议下载 Node.js 直接安装。


关于更多基本操作和基础知识，请查阅 Hexo 与 NexT 官方文档.

1
2
<p id="div-border-left-red">如果没有安装成功，那可能就是墙的原因。建议下载 `Node.js` 直接安装。</p>
<p id="div-border-top-blue">关于更多基本操作和基础知识，请查阅 [Hexo](https://hexo.io/zh-cn/) 与 [NexT](http://theme-next.iissnan.com/) 官方文档.</p>

主题自带样式 note 标签

default

primary

success

info

warning

danger

danger no-icon

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="note default"><p>default</p></div>

<div class="note primary"><p>primary</p></div>

<div class="note success"><p>success</p></div>

<div class="note info"><p>info</p></div>

<div class="note warning"><p>warning</p></div>

<div class="note danger"><p>danger</p></div>

<div class="note danger no-icon"><p>danger no-icon</p></div>

主题自带样式 label 标签

default 
1
{% label default@default %}

主题自带样式 按钮

点击下载百度

Download Now

1
2
3
{% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %}
<a id="download" href="https://git-scm.com/download/win"><i class="fa fa-download"></i><span> Download Now</span>
</a>

自定义样式引用

内容
1
<blockquote class="question">内容</blockquote>

自定义样式数字块

1.

1
<span id="inline-toc">1.</span>

在文档中增加图标

  • 支持Markdown
  • 一件部署
  • 丰富的插件
1
2
3
- <i class="fa fa-pencil"></i>支持Markdown
- <i class="fa fa-cloud-upload"></i>一件部署
- <i class="fa fa-cog"></i>丰富的插件

引用块

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake
1
2
3
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

1
2
3
{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

选项卡

这是选项卡 1 呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈……

这是选项卡 2

这是选项卡 3 哇，你找到我了！φ(≧ω≦*)♪～

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡, 2 %}
<!-- tab -->
**这是选项卡 1** 呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈……
<!-- endtab -->
<!-- tab -->
**这是选项卡 2**
<!-- endtab -->
<!-- tab -->
**这是选项卡 3** 哇，你找到我了！φ(≧ω≦*)♪～
<!-- endtab -->
{% endtabs %}

文本居中引用

人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！

1
2
3
4
5
6
{% cq %}
人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！
{% endcq %}

主题自带样式

NexT 主题自带的标签样式，请点击：http://theme-next.iissnan.com/tag-plugins.html

使用Markdown

Markdown 对程序员实在是太友好了，用了这个语言都喜欢写文档了，基本放弃了鼠标操作。实现了易读易写，刚接触也许会记不住命令，相信我，写上两三篇博文就熟练了。Markdown 教程

  1. 1.脚注内容 ↩
本文结束啦感谢您的阅读
0%