hexo博客文章卷写技巧,包括MarkDown,hexo技巧,html插入,美化方法,写作方法,写作工具,知识储备方法,开发工具,等一系列全介绍!终极攻略篇。

当然,这些写作技巧也可以用在hexo , hugo, next.js, wordpress上面,或者还是其它类型博客。

在任何类型的写作上面,这些都是用得着的写作技巧!

使用草稿

新建文章

一般我们都会使用 hexo new <title> 来建立文章,这种建立方法会将新文章建立在 source/_posts 目录下,当使用 hexo generate 编译 markdown 文件时,会将其 HTML 结果编译在 public 目录下,之后 hexo deploy 将会把 public 目录下所有文章部署到 GitHub,这是我们熟悉的 Hexo 流程。

这种建立文章方式的缺点是:若我们同时编辑多篇文章,只要其中一篇文章尚未编辑完成,也会随着 hexo deploy 一起部署到 GitHub,也就是 GitHub 可能会看到我们尚未完成的文章。

新建草稿

hexo new draft <title>

Hexo 另外提供 draft 机制,它的原理是新文章将建立在 source/_drafts 目录下,因此 hexo generate 并不会将其编译到 public 目录下,所以 hexo deploy 也不会将其部署到 GitHub。

hexo S --draft

虽然 hexo generate 不会编译 source/_drafts 目录下的文章,但 Hexo 的 Hexo server 另外提供 --draft 参数,这让我们只要搭配 hexo-browsersync plugins,就可以达到一边编辑 markdown 文章,一边使用浏览器预览的目的。

将草稿发布为正式文章

hexo P <filename>

其中 <filename> 为不包含 md 后缀的文章名称。它的原理只是将文章从 source/_drafts 移动到 source/_posts 而已。

之后的 hexo generatehexo deploy 的用法就完全一样了。

若日后想将正式文章转为为草稿,只需手动将文章从 source/_posts 目录移动到 source/_drafts 目录即可。

新建普通页面

这种形式类似是“关于”,“了解我们”之类的文章。

hexo new page c

创建一个标题为c的page

和前两种不同,这个命令会在source文件夹内创建出c文件夹,与_posts,_drafts并列。文件夹里面有一个index.md文件。

注意:刷新页面后,c并没有出现在页面中,而是需要访问http://localhost:4000/c/才可以看到。

hexo命令速记

# 开启服务
hexo server

# 新建文章
hexo new a

# 新建草稿
hexo new draft b

# 发布草稿成为文章
hexo publish b

# 普通页面
hexo new page c

# 清空缓存
hexo clean
# 生成静态文章
hexo generate 或者是 hexo g
# 部署文章
hexo deploy 或者是 hexo d

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域,用于指定个别文件的变量,举例来说:

---
title: Hello World
date: 2013/7/13 20:46:25
---

以下是预先定义的参数,您可在模板中使用这些参数值并加以利用。

参数描述默认值
layout布局config.default_layout
title标题文章的文件名
date建立日期文件建立日期
updated更新日期文件更新日期
comments开启文章的评论功能true
tags标签(不适用于分页)
categories分类(不适用于分页)
permalink覆盖文章网址
excerptPage excerpt in plain text. Use this plugin to format the text
disableNunjucksDisable rendering of Nunjucks tag {{ }}/{% %} and tag plugins when enabled
langSet the language to override auto-detectionInherited from _config.yml

布局

The default layout is post, in accordance to the value of default_layout setting in _config.yml. When the layout is disabled (layout: false) in an article, it will not be processed with a theme. However, it will still be rendered by any available renderer: if an article is written in Markdown and a Markdown renderer (like the default hexo-renderer-marked) is installed, it will be rendered to HTML.

Tag plugins are always processed regardless of layout, unless disabled by the disableNunjucks setting or renderer.

分类和标签

只有文章支持分类和标签,您可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar, Foo;而标签没有顺序和层次。

categories:
- Diary
tags:
- PS3
- Games

warn 分类方法的分歧

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

categories:
  - Diary
  - Life

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

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

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

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

JSON Front-matter

除了 YAML 外,你也可以使用 JSON 来编写 Front-matter,只要将 --- 代换成 ;;; 即可。

"title": "Hello World",
"date": "2013/7/13 20:46:25"
;;;

主题Front-matter

不同主题还有自己定义的Front-matter,以提供不同的特殊功能

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 titledate 的值。

配置选项默认值描述
titleMarkdown 的文件标题文章标题,强烈建议填写此选项
date文件创建时的日期时间发布时间,强烈建议填写此选项,且最好保证全局唯一
author_config.yml 中的 author文章作者
imgfeatureImages 中的某个值文章特征图,推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
toptrue推荐文章(文章是否置顶),如果 top 值为 true,则会作为首页推荐文章
hidefalse隐藏文章,如果hide值为true,则文章不会在首页显示
coverfalsev1.0.2版本新增,表示该文章是否需要加入到首页轮播封面中
coverImgv1.0.2版本新增,表示该文章在首页轮播封面需要显示的图片路径,如果没有,则默认使用文章的特色图片
password文章阅读密码,如果要对文章设置阅读验证密码的话,就可以设置 password 的值,该值必须是用 SHA256 加密后的密码,防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toctrue是否开启 TOC,可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjaxfalse是否开启数学公式支持 ,本文章是否开启 mathjax,且需要在主题的 _config.yml 文件中也需要开启才行
summary文章摘要,自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要
categories文章分类,本主题的分类表示宏观上大的分类,只建议一篇文章一个分类
tags文章标签,一篇文章可以多个标签
keywords文章标题文章关键字,SEO 时需要
reprintPolicycc_by文章转载规则, 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

注意:

  1. 如果 img 属性不填写的话,文章特色图会根据文章标题的 hashcode 的值取余,然后选取主题中对应的特色图片,从而达到让所有文章的特色图各有特色
  2. date 的值尽量保证每篇文章是唯一的,因为本主题中 GitalkGitment 识别 id 是通过 date 的值来作为唯一标识的。
  3. 如果要对文章设置阅读验证密码的功能,不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值,还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址,可供你使用:开源中国在线工具chahuo站长工具
  4. 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

以下为文章的 Front-matter 示例。

最简示例

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---

使用模板

hexo new使用的模板,最好自己定制修改

下面是博主使用的

scaffolds/post.md

---
layout: post
title: {{ title }}
date: {{ date }}
author: 夜法之书
categories: [web]	# 文章分类 建议只写一个
tags: # 文章标签 文章卡片显示用
    - EncryptedTag
    - web
    - http
keywords: web, http	# seo标签
summary: 简介,这里修改
img: /medias_webp/cover/write.webp
top: false      # 首页推荐文件
hide: false
cover: false    # 首页轮播
coverImg: /medias_webp/cover/write.webp
toc: true       # 是否开启目录
tochide: false   # 默认是否隐藏目录
mathjax: false
mermaid: false
echarts: false
comments: true
# password: false 	# SHA256 string  matery主题自带加密
reprintPolicy: cc_by_nc_sa
# password: ""    # hexo-blog-encrypt 插件需要的
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.
---

> 简介
> 

<!-- more -->
图片

正文

参考

hexo内置标签

所有hexo主题都支持的标签

quote

{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

没有提供参数,则只输出普通的 blockquote

{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

引用书上的句子

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

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

David LevithanWide Awake

引用 Twitter

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

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

引用网络上的文章

{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

Every interaction is both precious and an opportunity to delight.

代码块

在文章中插入代码。

markdown支持行内代码和区块代码

`行代码`

```
代码块
```

别名: code

{% codeblock [title] [lang:language] [url] [link text] [additional options] %}
code snippet
{% endcodeblock %}

Specify additional options in option:value format, e.g. line_number:false first_line:5.

Extra OptionsDescriptionDefault
line_numberShow line numbertrue
line_thresholdOnly show line numbers as long as the numbers of lines of the code block exceed such threshold.0
highlightEnable code highlightingtrue
first_lineSpecify the first line number1
markLine highlight specific line(s), each value separated by a comma. Specify number range using a dash Example: mark:1,4-7,10 will mark line 1, 4 to 7 and 10.
wrapWrap the code block in ``true

样例

普通的代码块

{% codeblock %}
alert('Hello World!');
{% endcodeblock %}
alert('Hello World!');

指定语言

{% codeblock lang:objc %}
[rectangle setX: 10 y: 10 width: 20 height: 20];
{% endcodeblock %}
[rectangle setX: 10 y: 10 width: 20 height: 20];

附加说明

{% codeblock Array.map %}
array.map(callback[, thisArg])
{% endcodeblock %}
Array.map
array.map(callback[, thisArg])

附加说明和网址

{% codeblock _.compact http://underscorejs.org/#compact Underscore.js %}
_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]
{% endcodeblock %}
_.compactUnderscore.js
_.compact([0, 1, false, 2, '', 3]); => [1, 2, 3]

Include Code

插入 source/downloads/code 文件夹内的代码文件。source/downloads/code 不是固定的,取决于你在配置文件中 code_dir 的配置。

{% include_code [title] [lang:language] [from:line] [to:line] path/to/file %}

样例

嵌入 test.js 文件全文

{% include_code lang:javascript test.js %}

只嵌入第 3 行

{% include_code lang:javascript from:3 to:3 test.js %}

嵌入第 5 行至第 8 行

{% include_code lang:javascript from:5 to:8 test.js %}

嵌入第 5 行至文件结束

{% include_code lang:javascript from:5 test.js %}

嵌入第 1 行至第 8 行

{% include_code lang:javascript to:8 test.js %}

Pull Quote

在文章中插入 Pull quote。

{% pullquote [class] %}
content
{% endpullquote %}

jsFiddle

在文章中嵌入 jsFiddle。

{% jsfiddle shorttag [tabs] [skin] [width] [height] %}

Gist

在文章中嵌入 Gist。

{% gist gist_id [filename] %}

iframe

在文章中插入 iframe。

{% iframe url [width] [height] %}

Image

在文章中插入指定大小的图片。

{% img [class names] /path/to/image [width] [height] '"title text" "alt text"' %}

在文章中插入链接,并自动给外部链接添加 target="_blank" 属性。

{% link text url [external] [title] %}

Youtube

在文章中插入 Youtube 视频。

{% youtube video_id [type] [cookie] %}

Examples

视频

{% youtube lJIrF4YjHfQ %}

播放列表

{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' %}

隐私模式

禁止 YouTube cookie

{% youtube lJIrF4YjHfQ false %}
{% youtube PL9hW1uS6HUfscJ9DHkOSoOX45MjXduUxo 'playlist' false %}

Vimeo

在文章中插入 Vimeo 视频。

{% vimeo video_id %}

Raw

如果您想在文章中插入 Swig 标签,可以尝试使用 Raw 标签,以免发生解析异常。

{% raw %}
content
{% endraw %}

引用文章

引用其他文章的链接。

{% post_path filename %}
{% post_link filename [title] [escape] %}

在使用此标签时可以忽略文章文件所在的路径或者文章的永久链接信息、如语言、日期。

例如,在文章中使用 {% post_link how-to-bake-a-cake %} 时,只需有一个名为 how-to-bake-a-cake.md 的文章文件即可。即使这个文件位于站点文件夹的 source/posts/2015-02-my-family-holiday 目录下、或者文章的永久链接是 2018/en/how-to-bake-a-cake,都没有影响。

默认链接文字是文章的标题,你也可以自定义要显示的文本。

默认对文章的标题和自定义标题里的特殊字符进行转义。可以使用escape选项,禁止对特殊字符进行转义。

链接使用文章的标题

{% post_link hexo-3-8-released %}

链接使用自定义文字

{% post_link hexo-3-8-released '通往文章的链接' %}

对标题的特殊字符进行转义

{% post_link hexo-4-released 'How to use <b> tag in title' %}

禁止对标题的特殊字符进行转义

{% post_link hexo-4-released '<b>bold</b> custom title' false %}

引用资源

引用文章的资源。

{% asset_path filename %}
{% asset_img [class names] slug [width] [height] [title text [alt text]] %}
{% asset_link filename [title] [escape] %}

资源(Asset)代表 source 文件夹中除了文章以外的所有文件,例如图片、CSS、JS 文件等。比方说,如果你的Hexo项目中只有少量图片,那最简单的方法就是将它们放在 source/images 文件夹中。然后通过类似于 ![](/images/image.jpg) 的方法访问它们。

对于那些想要更有规律地提供图片和其他资源以及想要将他们的资源分布在各个文章上的人来说,Hexo也提供了更组织化的方式来管理资源。这个稍微有些复杂但是管理资源非常方便的功能可以通过将 config.yml 文件中的 post_asset_folder 选项设为 true 来打开。

_config.ymlpost_asset_folder: true

当资源文件管理功能打开后,Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后,你可以通过相对路径来引用它们,这样你就得到了一个更简单而且方便得多的工作流。

相对路径引用的标签插件

通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo 2时代,社区创建了很多插件来解决这个问题。但是,随着Hexo 3 的发布,许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

比如说:当你打开文章资源文件夹功能后,你把一个 example.jpg 图片放在了你的资源文件夹中,如果通过使用相对路径的常规 markdown 语法 ![](example.jpg) ,它将 不会 出现在首页上。(但是它会在文章中按你期待的方式工作)

正确的引用图片方式是使用下列的标签插件而不是 markdown :

{% asset_img example.jpg This is an example image %}

通过这种方式,图片将会同时出现在文章和主页以及归档页中。

Embedding an image using markdown

hexo-renderer-marked 3.1.0 introduced a new option that allows you to embed an image in markdown without using asset_img tag plugin.

To enable:

_config.ymlpost_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

Once enabled, an asset image will be automatically resolved to its corresponding post’s path. For example, “image.jpg” is located at “/2020/01/02/foo/image.jpg”, meaning it is an asset image of “/2020/01/02/foo/“ post, ![](image.jpg) will be rendered as <img src="/2020/01/02/foo/image.jpg">.

Embed image

hexo-renderer-marked 3.1.0+ can (optionally) resolves the post’s path of an image automatically, refer to this section on how to enable it.

“foo.jpg” is located at http://example.com/2020/01/02/hello/foo.jpg.

Default (no option)

{% asset_img foo.jpg %}
<img src="/2020/01/02/hello/foo.jpg">

Custom class

{% asset_img post-image foo.jpg %}
<img src="/2020/01/02/hello/foo.jpg" class="post-image">

Display size

{% asset_img foo.jpg 500 400 %}
<img src="/2020/01/02/hello/foo.jpg" width="500" height="400">

Title & Alt

{% asset_img logo.svg "lorem ipsum'dolor'" %}
<img src="/2020/01/02/hello/foo.jpg" title="lorem ipsum" alt="dolor">

文章摘要和截断

在文章中使用 <!-- more -->,那么 <!-- more --> 之前的文字将会被视为摘要。首页中将只出现这部分文字,同时这部分文字也会出现在正文之中。

例如:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<!-- more -->
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

首页中将只会出现

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

正文中则会出现

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

注意,摘要可能会被 Front Matter 中的 excerpt 覆盖。

引用数据

有时您可能需要在主题中使用某些资料,而这些资料并不在文章内,并且是需要重复使用的,那么您可以考虑使用 Hexo 3.0 新增的「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件,如此一来您便能在网站中复用这些文件了。

举例来说,在 source/_data 文件夹中新建 menu.yml 文件:

Home: /
Gallery: /gallery/
Archives: /archives/

您就能在模板中使用这些资料:

<% for (var link in site.data.menu) { %>
  <a href="<%= site.data.menu[link] %>"> <%= link %> </a>
<% } %>

渲染结果如下 :

<a href="/"> Home </a>
<a href="/gallery/"> Gallery </a>
<a href="/archives/"> Archives </a>

Markdown写作

下文着重介绍了MarkDown语法

Joplin 插件以及其Markdown语法。All in One!
Joplin 实用插件介绍,以及Markdown语法说明。All in One! 强烈推荐,绝对是替代各种商业等笔记工具的第一选择。

中文技术文档的写作规范

直接访问 中文技术文档的写作规范

hexo插件强化写作

下文介绍了一些Markdown语法,和一些常用的有用的Hexo插件

Hexo Markdown以及各种插件功能测试
hexo matery hexo博客的一些功能测试,新插件的靶场。数学公式,Mermaid,plantuml图表绘制,音乐视频插入,bilibilid、豆瓣卡片等等。

主题插件

很多主题内置很多tag语法,可以大大美化最终呈现效果

使用fontawesome图标

醒目度提升一大个等级!

更多图标,这里查找 fontawesome

  • 支持Markdown
    Hexo 支持 GitHub Flavored Markdown 的所有功能, 甚至可以整合 Octopress 的大多数插件.
  • 一件部署
    只需一条指令即可部署到Github Pages, 或其他网站
  • 丰富的插件
    Hexo 拥有强大的插件系统, 安装插件可以让 Hexo 支持 Jade, CoffeeScript.
- <i class="fa fa-pencil"></i>支持Markdown
<i>Hexo 支持 GitHub Flavored Markdown 的所有功能, 甚至可以整合 Octopress 的大多数插件. </i>
- <i class="fa fa-cloud-upload"></i>一件部署
<i>只需一条指令即可部署到Github Pages, 或其他网站</i>
- <i class="fa fa-cog"></i>丰富的插件
<i>Hexo 拥有强大的插件系统, 安装插件可以让 Hexo 支持 Jade, CoffeeScript. </i>



`<i class="fab fa-github"></i>`
`<i class="fab fa-github fa-lg"></i>`
`<i class="fab fa-github fa-2x"></i>`

使用emoji

⭕✅☑✔✖❌❎🌓🌔🌕🌖🌗🌘🌙🌚🌛🌜☀🌝🌞⭐🌟💉💊

😀😁😂😃😎😍😘😗😙😚☺😇😐😑😶😏😣😥😮😯😪😫😴😭

更多 emoji 参考 ( 👁️︠ ‿‿ ︡👁️)✊

插入html

跳转位置演示(跳转位置设置点)

我们可以在 Markdown 中插入一些简单的 HTML 代码或 CSS 片段来获得更多扩展,使得文章内容更具有多样性。以下演示几个简单功能。

文字颜色

#519D9E颜色演示

<p><span  style="color: #519D9E; ">#519D9E颜色演示</span></p>

文字大小

0.7em 文字大小演示

<p><span  style="font-size:0.7em;">0.7em 文字大小演示</span></p>

文字位置

内容居中演示

<p style="text-align:center">内容居中演示</p> # 可以修改 text-align 参数来设置文字位置。

页内跳转

点击到达跳转位置演示

<a ignore-external-link href="#demo">点击到达跳转位置演示</a> # 在需要跳转的地方添加此代码。
<a ignore-external-link id="demo">跳转位置演示(跳转位置设置点)</a> # 在跳转位置添加次代码。

综合演示

综合演示
优雅使用 Hexo 写文章

<p style="text-align:center;color:#8EC0E4;font-size:1.5em;font-weight: bold;">
综合演示
<br>
优雅使用 Hexo 写文章
</p>

iframe 页面镶套

iframe 页面镶套可以帮助我们更好的展示一个页面。比如以下演示页面。

iframe自动加载

<iframe src="https://blog.17lai.site/galleries/" width="100%" height="500" name="topFrame" scrolling="yes"  noresize="noresize" frameborder="0" id="topFrame" loading="lazy"></iframe>

iframe鼠标点击加载

  <ul>
    <li> <a id="download" onclick="frameA.src='https://blog.17lai.site'"  aria-label="iframe测试">点击加载主页</a> </li>
    <li> <a id="download" onclick="frameB.location='https://blog.17lai.site/galleries/'" >点击加载相册</a> </li>
  </ul>
  <iframe id="frameA" src="" style="width:100%;height:500px;background-image:url(https://blog.17lai.site/medias_webp/loading.webp);background-size: 100% 100%;" frameborder="0"></iframe>  
<iframe name="frameB" src="" style="width:100%;height:500px;background-image:url(https://blog.17lai.site/medias_webp/loading.webp);background-size: 100% 100%;"  frameborder="2"></iframe>

details 标签

用于展示代码较多需要折叠或折叠相关内容,以下为演示。summary 填写显示名称。

Demo

夜法之书

欢迎光临

wechat
<details>
<summary>Demo</summary>
<p><a href="https://blog.17lai.site" target="_blank"><b>夜法之书</b></a></p>
<p><b>欢迎光临</b></p>
<img width="200" src="https://blog.17lai.site/favicon.webp" alt="wechat">
</details>

配图

众所周知,博客好不好看,配图占一半。这里给大家推荐几个我常用找配图的地方。另外,请遵循相关网站的版权协议。

Google Image是你的好搭档

Wallpaper Hub

Wallpaper Hub

点击跳转到 Wallpaper Hub

Wallhaven

Wallhaven

点击跳转到 Wallhaven

Unsplash

Unsplash

点击跳转到 Unsplash

内容为王

前面提到了那么多的方法和工具,但是内容才是最重要的

内容好,前面提到的写作技巧和工具都可以忽略;内容不好,再多的方法和工具都是白费!谨记!

文学技巧

对于技术文章,是不需要什么文学技巧的,有足够的行业积累,才能够写的深入浅出!

如果你写的是头条账号,瓜田李下,下里巴人才能够吸引眼球,一些写作技巧,如适当的疑问,引用,递进,顶珠,等方法可以大大提高流量。但是,不要做标题党,广大读者包括笔者都痛恨标题党!

关于谣言

造谣一张嘴,辟谣跑断腿!

社交平台通过故意制造谣言,引起社会对立,可以极大提高平台活跃度与曝光量!

Facebook 内部员工就爆料 Facebook 故意挑起种族仇恨言论(具体详情请自行搜索新闻来源)。

微博为什么是女权发源地,这与微博的故意放纵,背后资本都是相关的。

另外,有不少收钱发帖的账号!

国家应该对接受资本资助的平台账号备案,并严令禁止社交平台账号接受国外资本资助!

这种账号日常就发一些没有时间,地点,人物等详细细节的文章,引导舆论,或者文化打压,渗透!

关键这种你很难举报,博主举报了很多次,平台都说举报不成立,不算谣言!即使举报成功了,谣言也已经传播开了,对于造谣者来说也没多大损失!顶多删除一条就是,这种应该严惩的行为目前没看到什么法律法规的约束!

但是,国家早晚会对这一块政治,法律会严惩这些造谣者的!别看这些造谣者一时收黑钱一时爽,会有清算的一天的。各位读者遇到这类文章也多点击一下举报吧,举报间谍成功奖励50W哦!

写作工具

工欲善其事,必先利其器

私有笔记云

平时不积累,用时方嫌少!

建立自己的知识库,就显得那么重要了

经历了很长时间,使用了各种各样的方案,最终选择了一种相对完美的方式。docker私有部署运行的joplin,使用markdown语法,github作为图床,picgo作为图像自动上传后端,pypora作为MD编辑器,Snipaste作为截图工具。后备gitlab ee selfhost备份,自建图床VPS多线负载均衡。cloudflare partner cdn加速,jsdelivr加速。

  • pigo图床搭建与配置
  • Joplin教程
  • Snipaste截图工具
  • Typora 作为Markdown编辑器最强
完美笔记进化论
wiznote docker版作为笔记管理搜索工具,typora作为markdown编辑器,只使用markdown格式笔记,Picgo作为图上上传工具,github作为图像图床,Snippaste作为截屏工具。一起组成笔记工具链。整体免费,满足selfhost, 富文本,多平台,版本管理,目录管理,可搜索,对图像友好的苛刻要求,超越市面所有产品,wiznote 还可以对外网提供服务。
  • Joplin和使用
  • Joplin同步与备份
  • Joplin导入与导出
  • Joplin安装使用,调用外部编辑器,网盘同步等等
  • Joplin简明教程
  • markdown语法简明教程
  • 教你用各种插件打造一个强大的笔记工具。
  • 如何部署自己私有的为知笔记。
  • 其实博主更推荐私有部署joplin

私有Nas

丰富自己的知识图谱!

数据最值钱,自己的数据真正属于自己的,所以你需要一个私有Nas

使用jeckett,sonarr,iyuu,qt,emby打造全自动追剧流程

使用jeckett,sonarr,iyuu,qt,emby打造全自动追剧流程
jackett 作为种子源,sonarr剧集管理,bt下载,qbittorrent主力下载,使用iyuu转移辅种,emby,jellyfin做海报墙,sunfinder自动下载字幕。基本算是完美打通全流程自动追剧。bt种子文件命名规则SxxExx的自动识别下载,国内的资源手动查找下载,自动推送到emby刮削好

结构化自己的图书,音乐,和视频!

丰富自己的见识,知识储备

如何建立自己的私人电子图书馆
图书管理员似乎是个非常有前途的职业,远的有孔子,游学之前当图书管理员,近的有本朝开国毛教员,也当了很长时间图书管理员。我们也可以自己做个私人电子图书馆,当个图书管理员,说不定很有前途?
如何使用media Go,MusicBrainz,Mp3tag工具刮削音乐 整理音乐资料库
音乐文件则是将歌名、歌手、专辑、发行时间、歌词、封面图等信息写入文件标签,称为ID3 Tag 。它能够在MP3中附加曲子的演出者、作者以及其它类别资讯,方便众多乐曲的管理。
如何使用tinyMediaManager刮削电影和电视剧,动画,并自动下载字幕
tinyMediaManager是最好用的视频刮削工具,可以刮削电影,动画,电视剧。使用TinyMediaManager生成nfo元数据文件,多媒体软件解析生成海报墙展示丰富的影片信息,配合Emby,Plex使用体验绝佳

RSS订阅

一直输出知识怎么能行?身体被掏空,急需补充能量!

那么,你就需要一个好用的RSS订阅工具,TTRSS是一个好选择

RSS的使用与Tiny Tiny RSS Selfhost自建
RSS是一种消息来源的格式规范,网站可以按照这种格式规范提供文章的标题、摘要、全文等信息给订阅用户,用户可以通过订阅不同网站 RSS 链接的方式将不同的信息源进行聚合,在一个工具里阅读这些内容

博客搭建

私有博客,你值得拥有!

[三万字教程]基于Hexo的matery主题搭建博客并深度优化

[三万字教程]基于Hexo的matery主题搭建博客并深度优化
一文介绍了Hexo利用github page搭建博客全过程,还附带一个博主自己定制过的`hexo Docker`,使用docker 配合博文将引导你搭建一个功能完善的blog,并指导全程免费seo优化,性能极致优化过程和工具。并附带几个常见问题的解决方案在文章最后。

hexo博客博文撰写篇之完美笔记大攻略终极完全版

hexo博客博文撰写篇之完美笔记大攻略终极完全版
hexo博客文章卷写技巧,包括MarkDown,hexo技巧,html插入,美化方法,写作方法,知识储备方法,开发工具,等一系列全介绍!终极攻略篇

系列文章

  • markdown 各种其它语法插件,latex公式支持,mermaid图表,plant uml图表,URL卡片,bilibili卡片,github卡片,豆瓣卡片,插入音乐和视频,插入脑图,插入PDF,嵌入iframe

Gitbook使用

长篇专业电子书制作工具

当你的文章写的长了,就可以考虑用Gitbook来制作电子书了

开发工具

上面都是说的写作工具,该说说开发工具了。私有建立一个完善的DevOps将极大的提高你的开发效率和能力!

自建全套开源Devops开发系统
目标:单节点,以最低成本,最低消耗,使用开源软件实现一个可用的DevOps!满足中小企业的研发、测试、运维需求。

Docker使用

博客美观性

博客美观性增强方法

  • 使用标准Markdown语法

  • 使用hexo tag

  • 使用 hexo 主题 tag

  • 使用hexo 插件

  • 特殊符号

  • CSS自定义

博文可迁移性

博客文章可迁移性评价

  • 使用标准Markdown语法

  • 少用hexo tag

  • 少用 hexo 主题 tag

  • 少用hexo 插件

可以说,美观和可迁移性是不可兼得的。

疑难杂陈

问答 1:hexo g出错怎么办?

  1. npm包升级到最新试试?
  2. npm modules 模流删除,重新安装
  3. 先移除所有文章,编译看看是否文章中出现了语法错误!
  4. 可以用二分法定位语法错误
  5. 特别注意插件tag语法是否有误
  6. hexo或者npm包先删除编译试试
  7. hexo,theme主题功能先零时关闭试试

问答2:笔记丢失怎么办?

  1. 使用 Git 保存 + Gitlab 服务器
  2. 使用 Joplin,没有任何限制的批量导入导出 Markdown!
  3. 不要使用任何私有格式的笔记工具,例如X知笔记

问答3:修改不生效怎么办?

  1. 本地 Docker 或者直接本地测试时,重启 hexo docker,hexo 一些修改需要下一次启动才能生效
  2. 重启电脑
  3. 如果插件问题,试着删除插件,重新安装插件测试
  4. 如果使用了 CDN 服务,在线测试时,修改不生效怎么办?清除 CDN 缓存,暂时停用 CDN(如Cloudflare),CTRL + F5 来刷新网页试试!或者检查CDN版本是否正确,如 Jsdelivr

后记

写到这篇文章,基本把博客很大部分文章都串起来了,串成了一个圆环,一颗颗珍珠终于连成一串美丽的珍珠项链。一篇篇博文不再是孤岛,而是开始连成一片大陆了。

参考

系列教程

全部文章RSS订阅

Hexo系列

HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

  • markdown 各种其它语法插件,latex公式支持,mermaid图表,plant uml图表,URL卡片,bilibili卡片,github卡片,豆瓣卡片,插入音乐和视频,插入脑图,插入PDF,嵌入iframe

文章作者: 夜法之书
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 夜法之书 !
评论
 上一篇

阅读全文

Vercel部署高级用法教程
Vercel部署高级用法教程 Vercel部署高级用法教程
Vercel使用有不少需要仔细配置的地方,可惜的是,自定义Vercel缓存时间,Vercel重定向等使用方法略复杂,不是开箱即用,有一定使用门槛,故这里单独列一篇文章详细说明Vercel的一些高级使用方法!
2022-09-04
下一篇 

阅读全文

使用nodeppt给hexo博客嵌入PPT演示
使用nodeppt给hexo博客嵌入PPT演示 使用nodeppt给hexo博客嵌入PPT演示
给网页添加PPT演示功能,一定会炫酷到你的小伙伴,这里介绍nodeppt给hexo博客添加PPT演示功能,当然PPT演示也可以独立域名访问
2022-08-11
  目录