0%

快速搭建博客:写作技巧

1. Hexo添加文章时自动打开编辑器

  • 首先在站点目录下的scripts目录中创建一个JavaScript脚本文件。如果没有这个scripts目录,则新建一个。

  • scripts目录新建的JavaScript脚本文件可以任意取名。

通过这个脚本,我们用其来监听hexo new这个动作,并在检测到hexo new之后,执行编辑器打开的命令。

  • 如果你是windows平台的Hexo用户,则将下列内容写入你的脚本:(直接复制,不用改)
1
2
3
4
var spawn = require('child_process').exec;
hexo.on('new', function(data){
spawn('start "markdown编辑器绝对路径.exe" ' + data.path);
});
  • 如果你是Mac平台Hexo用户,则将下列内容写入你的脚本:(直接复制,不用改)
1
2
3
4
var exec = require('child_process').exec;
hexo.on('new', function(data){
exec('open -a "markdown编辑器绝对路径.app" ' + data.path);
});

2. 新建文章时,在相同目录下创建同名文件夹(便于图片管理)

  • 打开站点配置文件_config.yml,搜索post_asset_folder字段,设置其值为true

  • 安装hexo-asset-image:npm install hexo-asset-image --save

  • 此时hexo new "fileName"会在/source/_posts目录下创建同名的文件夹

  • 然后在typora设置:

  • 只需在 md 文件里使用 CTRL+SHIFT+I,可以插入相对路径的图片。不过我是使用图床,存到这只是为了以后图床失效可以找到图片。

3. 新图床(2020/3/7)

请看我的:typora自动上传图片+github图床,目前我使用这个,后面的3和4不用看了。

3. 图床(废除)

我本来是使用阿里云来存储,但是好贵,我换成一个免费的 路过图床。也可以来这里:图床大全,也可以使用码云或者github搭建图床。

图床有很多,比如阿里云,腾讯云又拍云等,这些都是可以用的。

也可以把图床存在CSDN,从CSDN文章copy过去,但是切记要本地保存,别以后CSDN失效找不到图。

阿里云,没注册的先去注册一下。然后如下图:

1

  • 先去购买流量包,不贵,一年40G才9元。我现在才发现,买了流量包还是要钱的,现在收费的图床都是分流量包和存储包。。所以可能需要额外收费,如果是小型网站访问量很小的,那肯定支付得起,几分钱。大型的话就不要了,而且我们得设置防盗链,防止被人恶意刷请求。

2

3

  • 然后去创建一个Bucket,然后如下填入就创建。

4

5

  • 顺便点开右上角我们的头像,如图:点开AccessKey管理

6

  • 点开完,出现下面的这个,如果有用户AccessKey就把它的AccessKey ID和Access Key Secret保存到txt,我记得刚创建会自动下载一个文件,该文件就保存这两个键值对。
  • 如果没有,则创建该用户,然后就会弹出一个下载框下载一个文件。

7

8

  • 然后先放着,下面的自动变图床链接的编译器要用

注意:请开启防盗链,如下:

4. 自动变图床链接的编译器(废除)

我是在网上发现一个typora的插件,可以自动把上传的本地连接。

typora下载,也可以去官网,但是官网加载好慢。。

原作者,我fork到我的github,测试了一下,最新版能够用,下面是我的教程:

  • 先把该项目下载下来,然后里面有window.html和plugins两个文件。然后我在我的github这样写。

8

  • 最后,得去配置好我们的图床,在plugins\image的upload.js文件,该文件就是可以配置我们的图床。把刚刚在阿里云下载的文件中,两个AccessKeyId和AccessKeySecret的值复制进去。

9

  • 而BucketDomain需要去阿里云的OSS中的文件管理,先随便上传一张图片,然后点击看看它的链接,如图:

10

  • 然后把类似http://flunggg.oss-cn-shenzhen.aliyuncs.com/复制到BucketDomain去。
  • 这个upload.js文件可以自定义配置很多东西,比如我上面限制上传文件大小最多为10MB,不过一般不要这么大,最多4MB左右,或者去压缩一下,推荐一个压缩网站:tinyjpg。太大的可以去压缩一下再放到图床。

11

注意:可能有时对于旧文章想上传,鼠标点一下,等候一下就会上传,如果没有上传则重新本地上传就会自动变为图床链接。并且再改变图片样式时不成功,我想把图片缩小点就不成功。但是确实方便很多。

5. note标签的官方文档使用

转载:hexo博客Next主题进阶写作技巧

首先我们需要在Next主题_config.xml中设置一下功能开关,有些默认是开的,有些默认是关的:

1
2
3
4
5
6
7
8
9
10
11
12
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: simple
icons: false
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

note写作方式正如我最上面的样式,我们可以这样使用:

1
2
3
4
5
6
7
{% note [class] [no-icon] %}
这里写你需要写的内容
{% endnote %}

// 注意上面的classno-icon属性是可以选择的
[class] : default | primary | success | info | warning | danger.
[no-icon] : Disable icon in note.

5.1 爬坑

标签开头和结尾在一行的写法是错误的

比如,如果你这样写是错误的:

1
{% note danger %}note text, note text, note text{% endnote %}

或者这样写也是错误的:

1
2
3
4
{% note danger %}note text
note text
note text
{% endnote %}

内容必须要跟note标签不在一行:

1
2
3
4
5
{% note danger %}
note text, note text, note text
note text, note text, note text
note text, note text, note text
{% endnote %}

注意:不用代码块,这里的代码块只是演示源码。

5.2 示例

5.2.1 没有定义样式类别

1
2
3
{% note %}
(没有定义样式类别)
{% endnote %}

效果:

(没有定义样式类别)

5.2.2 默认的类别

1
2
3
{% note default %}
默认形式的类别
{% endnote %}

效果:

默认形式的类别

5.2.3 primary形式的类别

1
2
3
{% note primary %}
首要类型形式
{% endnote %}

效果:

首要类型形式

5.2.4 info形式的类别

1
2
3
{% note info %}
info形式的类别
{% endnote %}

效果:

info形式的类别

5.2.5 success形式的类别

1
2
3
{% note success %}
success形式的类别
{% endnote %}

效果:

success形式的类别

5.2.6 warning形式的类别

5.2.11 note标签中插入表格

1
2
3
4
5
6
7
{% note default %}
| 1 | 2 |
| - | - |
| 3 | 4 |
| 5 | 6 |
| 7 | 8 |
{% endnote %}

效果:

12
34
56
78

6. 代码块内部样式高亮

Next主题其实是自带代码块高亮显示的,但是有另外一种好玩的代码块高亮写法,叫diff语言

1
2
3
4
5
6
highlight:
enable: true
line_number: true
# 代码自动高亮
- auto_detect: false
+ auto_detect: true

只需要在markdown语法代码块的语言选择处写上diff即可,然后在相应代码前面加上-+就行了。不过默认的-是绿色,+是红色,与 GitHub 上相反,也可以自己修改成Github上样式。

1
2
3
4
5
6
7
// 文章```代码块diff样式
pre .addition {
background: #e6ffed;
}
pre .deletion {
background: #ffeef0;
}

7. 文本居中引用

效果:

看我!!

源码:

1
2
3
4
5
{% cq %}

看我!!

{% endcq %}

8. 主题自带label标签

首先需要在Next主题_config.xml中配置:

复制

1
2
# Label tag.
label: true

然后效果如下(@ 前面的是label的名字,后面的是要显示的文字):

  • default
1
{% label default@default %}
  • primary
1
{% label primary@primary %}
  • success
1
{% label success@success %}
  • info
1
{% label info@info %}
  • warning
1
{% label warning@warning %}
  • danger
1
{% label danger@danger %}

注意这个有一个BUG,千万不要把这个放到段首。。。

9. 主题自带tabs标签

效果:

这是选项卡 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 %}

首先还是需要在Next主题配置文件中配置:

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

然后上面源码中,2表示一开始在第二个选项卡,非必须,若数值为-1则隐藏选项卡内容。更多用法请查看这个页面

10. 主题自带样式按钮

效果:

点击下载百度

源码:

1
{% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %}

关于按钮的更多使用可以前往这个页面查看。


参考:

Hexo添加文章时自动打开编辑器

hexo博客Next主题进阶写作技巧

文章作者:flunggg

发布时间:2019年12月27日 - 22:12

原始链接:https://flunggg.cn/archives/6d171bb6.html

许可协议: 转载请保留原文链接及作者。