0%

Hexo Markdown

Hexo指令

新建文章

1
2
3
4
5
6
7
8
$ hexo new 布局 "文章名"
$ hexo clean //清除静态页面缓存(清除 public 文件夹)
$ hexo g //在本地生成静态页面(生成 public 文件夹)
$ hexo s //启动本地服务 http://localhost:4000,进行预览调试
$ hexo d //远程部署,同步到 GitHub

$ npm install hexo-deployer-git --save //自动部署
$ hexo clean && hexo g && hexo d //发布

Markdown格式

首行缩进

  //相当于1个空格  
  //相当于2个空格,1个汉字  

分段: 两个回车
换行: 两个空格 + 回车
标题: # ~ ######,#号的个数表示几级标题,即表示一级标题到六级标题

强调

1
2
3
*斜体* | **加粗** | ***斜体加粗***  
_斜体_ | __加粗__ | ___斜体加粗___
~~删除线~~

引用: > 注意后面紧跟个空格

1
2
3
> 以下为引用效果
继续引用
> >二级引用

以下为引用效果
继续引用

二级引用

表格: - 和 | 分割行和列 , : 控制对齐方式

1
2
3
4
5
| 0 | 1 | 2|
| :- | -: | :-: |
| 0 | 1 | 2 |
| 0 | 1 | 2 |
| 0 | 1 | 2 |
0 1 2
0 1 2
0 1 2
0 1 2

代码块: 四个空格开头或三个链接:文字 邮件链接:xxx`
图片: ![图片说明](图片地址),地址可以是本地路径,也可以是网络地址
列表: * , + , - , 1. ,选其中之一,注意后面紧跟个空格

设置字体段落格式

1
2
3
4
<center>居中</center>
<font color="#FF0000"> 设置颜色 </font>
<font size=6> 设置大小 </font>
<font size=5 color="#FF0000"> 设置颜色和大小</font>
居中

设置颜色
设置大小
设置颜色和大小

引用站内文章

在写文章的过程中,有时候需要引用站内的其他文章。可以通过内置的标签插件的语法post_link来实现引用。
{% post_link 文章文件名(不要后缀) 文章标题(可选) %}

Hexo主题设计

头像

头像配置文件位于:主题配置文件中的 avatar下

版权信息

版权信息的配置文件位于:next\layout\_macro\my-copyright中

添加文章密码

方法一(测试可用)

安装hexo-blog-encrypt

根目录的package.json文件夹中添加:

1
"hexo-blog-encrypt": "2.0.*"

然后在命令行输入:

1
npm install

根目录下的_config.yml文件中添加:

1
2
3
# Security
encrypt:
enable: true
使用

在需要加密的文章头部写入password:

1
2
3
password: abc123
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.

方法二

在 themes->next->layout->\_partials->head.swig 中添加下面内容

1
2
3
4
5
6
7
8
9
10
<script>
(function(){
if('{{ page.password }}'){
if (prompt('请输入文章密码') !== '{{ page.password }}'){
alert('密码错误,交钱还是跑路?');
history.back();
}
}
})();
</script>

然后在文章头部加入password。

添加边栏背景图

在 themes\next\source\css\_custom\custom.styl文件中
添加

1
2
3
4
5
6
7
8
9
.sidebar {
background: url([https://ws2.sinaimg.cn/large/006tKfTcly1fq2wrm6g3cj309i0hq749.jpg](https://ws2.sinaimg.cn/large/006tKfTcly1fq2wrm6g3cj309i0hq749.jpg "https://ws2.sinaimg.cn/large/006tKfTcly1fq2wrm6g3cj309i0hq749.jpg")) no-repeat !important;
background-size: cover !important;
position: fixed !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
}

网易云音乐插件

主题文件夹
layout\\\_custom\\sidebar.swig

Warning: LF will be replaced by CRLF

git config --global core.autocrlf false //禁用自动转换

更改文章全局属性(标题)

D:\GitProject\FirstHexo\themes\next\source\css\_common\components\post\post.styl

文章模板

在新建文章时,Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件,例如:hexo new photo “My Gallery”,在执行这行指令时,Hexo 会尝试在 scaffolds 文件夹中寻找 photo.md模板,并根据其内容建立文章,默认使用_config.yml 中的 default_layout 参数post代替

网页折叠

更改post-details.js

文件目录:themes/next/source/js/src/post-details.js

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

更改tags.js

文件目录: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;
});

scripts中增加fold.js

1
2
3
4
5
6
7
8
/* global hexo */
// Usage: {% fold ???? %} Something
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});

添加样式custom.styl

1
2
3
4
5
6
7
8
9
10
.hider_title{
font-family: "Microsoft Yahei";
cursor: pointer;
}
.close:after{
content: "▼";
}
.open:after{
content: "▲";
}

测试

1
2
3

something you want to fold, include code block.

添加Git公钥SSH

1
2
3
4
5
6
cd ~/.ssh

ssh-keygen -t rsa -C "XXX@XXX.com" #没公钥生成公钥
#一直回车后公钥生成在id_rsa.pub中
#Git中进入个人设置中添加即可
ssh -T git@github.com #验证是否成功