编辑指南

须知

  • 我们使用Jekyll front matterMarkdown编辑器。
  • 大多数时候,您可以将HTML代码直接写到您的文章中。
  • 我们支持原生Liquid标签,还创建了一些有趣的自定义标签! 您可以尝试在文章中嵌入微博内容或GitHub问题。
  • 未发表文章的链接可以共享,以进行反馈/审阅。

我们有两个编辑器版本。您也可以在/settings/misc中切换到V2版的编辑器。

Front Matter

为每篇文章设置自定义变量,该变量位于编辑器中的虚线之间,以下是可用列表:

  • title:您文章的标题
  • published: 布尔值,确定您的文章是否已发布
  • description: 描述
  • tags: 最多四个标签,需要用逗号分隔
  • canonical_url:内容的canonical链接
  • cover_image: 封面图片,接受URL。
    最佳的尺寸是 1000 x 420.
  • series: 系列文章的名称。

✍ Markdown基础知识

以下是一些常用的markdown语法示例。 如果您想进一步深入了解,请查看 语法备忘单

斜体和粗体

斜体: *asterisks* 或 _underscores_

粗体: **double asterisks** 或 __double underscores__

链接

I'm an inline link: [I'm an inline link](链接放在这里)

锚链接 (用于目录之类)

      ## Table Of Contents
        * [Chapter 1](#chapter-1)
        * [Chapter 2](#chapter-2)

      ### Chapter 1 <a name="chapter-1"></a>
    

内嵌图片

        ![图片的替代文字](这里放入图片链接)
    
您甚至可以使用HTML添加标题figcaption 标签!

Headers

使用以下语法将标题添加到您的文章中:

      
# 一个 '#' 对应于h1
## 两个 '#' 对应于h2
...
###### 六个 '#' 对应于h6

一个 '#' 对应h1

两个 '#' 对应h2

六个 '#' 对应h6

作者注释/评论

使用以下语法向您的文章添加一些隐藏的注释/评论:

      <!-- 这不会显示在内容中! -->
    

🌊 Liquid Tags

在我们的编辑器中 ,支持原生的 Liquid tags ,但是创建了一些我们自己的自定义标签:

helplib.cn 文章嵌入

只需要文章的完整链接:

{% link https://www.helplib.cn/kazz/boost-your-productivity-using-markdown-1be %}

您也可以像这样使用缩写:

{% link kazz/boost-your-productivity-using-markdown-1be %}

您也可以使用post别名代替链接:

{% post https://www.helplib.cn/kazz/boost-your-productivity-using-markdown-1be %}}

or this:

{% post kazz/boost-your-productivity-using-markdown-1be %}

helplib.cn 用户嵌入

只需要用户名:

{% user jess %}

helplib.cn 标签嵌入

只需要标签名称:

{% tag git %}

helplib.cn 评论嵌入

需要在评论网址末尾的ID 。要获取评论链接,请单击时间戳或右上角的菜单按钮,然后单击“永久链接”。 这是一个例子:

微博嵌入

使用微博Liquid标签将允许该微博从服务器进行预渲染,从而为读者提供更好的体验。 您只需要网址id

{% twitter 834439977220112384 %}

GitHub Repo 嵌入

只需要GitHub用户名和存储库:

{% github alibaba/fastjson %}
no-readme
您可以在您的GitHub标记中添加一个no-readme选项,以便从预览中隐藏自述文件。
{% github alibaba/fastjson no-readme %}

GitHub Issue,Pull request 或 Comment 嵌入

只需要GitHub issue,PR 或 comment URL:

{% github https://github.com/alibaba/fastjson/issues/2878 %}

GitHub Gist 嵌入

只需要 gist 链接:

{% gist https://gist.github.com/CristinaSolana/1885435 %}
单个文件嵌入

您可以选择嵌入单个gist文件。
{% gist https://gist.github.com/CristinaSolana/1885435 file=gistfile1.md %}

特定版本嵌入

您可以选择嵌入gist文件的特定版本。只需要该版本的链接和提交哈希。
格式为{% gist [gist-link]/[commit-hash] %}
例如
{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 %}

特定版本文件嵌入

您可以选择嵌入gist文件的特定版本。 只需要特定版本的链接,文件名和提交哈希。
格式为{% gist [gist-link]/[commit-hash] file=[filename] %}
例如
{% gist https://gist.github.com/suntong/3a31faf8129d3d7a380122d5a6d48ff6/f77d01e82defbf736ebf4879a812cf9c916a9252 file=Images.tmpl %}

视频嵌入

只需要视频的URLid

  • YouTube: {% youtube dQw4w9WgXcQ %}
  • Vimeo: {% vimeo 193110695 %}

Medium 嵌入

只需输入您要嵌入的Medium文章的完整URL。

{% medium https://medium.com/s/story/boba-science-how-can-i-drink-a-bubble-tea-to-ensure-that-i-dont-finish-the-tea-before-the-bobas-7fc5fd0e442d %}

SlideShare嵌入

只需输入SlideShare的key

{% slideshare rdOzN9kr1yK5eE %}

CodePen 嵌入

只需输入完整的CodePen 链接, 如下所示:

{% codepen https://codepen.io/twhite96/pen/XKqrJX %}
default-tab
将default-tab参数添加到您的CodePen嵌入标签。 默认为 result
{% codepen https://codepen.io/twhite96/pen/XKqrJX default-tab=js,result %}

Kotlin Playground

要创建可运行的Kotlin代码段,请在以下位置创建Kotlin代码段 https://play.kotlinlang.org

Share对话框并复制完整链接。使用方式如下:

{% kotlin https://pl.kotl.in/owreUFFUG?theme=darcula&from=3&to=6&readOnly=true %}

RunKit 嵌入

将可执行代码放入runkit liquid块中,如下所示:

{% runkit
// hidden setup JavaScript code goes in this preamble area
const hiddenVar = 42
%}
// visible, reader-editable JavaScript code goes here
console.log(hiddenVar)
{% endrunkit %}

Stackblitz 嵌入

只需要Stackblitz的ID:

{% stackblitz ball-demo %}
默认视图
您可以更改默认视图,选项是both, preview, editor. 默认是 both
{% stackblitz ball-demo view=preview %}
默认文件
您可以更改要嵌入的默认文件
{% stackblitz ball-demo file=style.css %}

CodeSandbox 嵌入

只需要Sandbox ID:

{% codesandbox ppxnl191zx %}

CodeSandbox有很多 可选属性, 可以通过在标记中使用它们,可以支持以下内容,只需在ID后面添加它们(以空格分隔)即可。

initialpath
地址栏初始化加载网址
{% codesandbox ppxnl191zx initialpath=/initial/load/path %}
module
默认情况下打开哪个模块。
{% codesandbox ppxnl191zx module=/path/to/module %}
runonclick
如果运行代码,则延迟 1
{% codesandbox ppxnl191zx runonclick=1 %}

JSFiddle 嵌入

只需要 JSFiddle 的完整链接,如下所示:

{% jsfiddle https://jsfiddle.net/link2twenty/v2kx9jcd %}
自定义选项卡
您可以向JSFiddle嵌入标记添加自定义选项卡顺序。默认为js,html,css,result
{% jsfiddle https://jsfiddle.net/webdevem/Q8KVC result,html,css %}

repl.it 嵌入

只需要域名后的URL:

{% replit @WigWog/PositiveFineOpensource %}

Speakerdeck Tag

只需要嵌入链接中的data-id代码即可:

      # 嵌入链接:
      < script async class="speakerdeck-embed"
            data-id="7e9f8c0fa0c949bd8025457181913fd0"
            data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js">< /script >
    
      {% speakerdeck 7e9f8c0fa0c949bd8025457181913fd0 %}
    

Soundcloud 嵌入

只需输入要嵌入的Soundcloud曲目的完整URL。

{% soundcloud https://soundcloud.com/user-261265215/dev-to-review-episode-1 %}

Spotify 嵌入

输入要嵌入的Spotify曲目/播放列表/专辑/歌手/播客的Spotify URI。

      {% spotify spotify:episode:5V4XZWqZQJvbddd31n56mf %}
    

Blogcast Tag

只需要嵌入代码中的文章ID代码:

      {% blogcast 1234 %}
    

Parler Tag

输入要嵌入的Parler.io音频文件的完整URL。

      {% parler https://www.parler.io/audio/73240183203/d53cff009eac2ab1bc9dd8821a638823c39cbcea.7dd28611-b7fc-4cf8-9977-b6e3aaf644a1.mp3 %}
        

Stack Exchange / Stack Overflow Tag

使用{% stackoverflow %}标签,该站点将默认为Stack Overflow。 例如:
https://stackoverflow.com/questions/24789130/colors-in-irb-rails-console

  • 问题ID为:24789130
{% stackoverflow 24789130 %}
          

对于其他Stack Exchange站点,需要提供站点名称并使用{% stackexchange %}标签。例如:
https://diy.stackexchange.com/questions/169988/base-for-refrigerator-wine-shelf

  • 问题ID为:169988
  • 站点是diy
{% stackexchange 169988 diy %}
          

对于答案,您可以通过答案的“共享”链接获取答案的ID。例如:
https://diy.stackexchange.com/a/170185

  • 答案ID为:170185
  • 站点是diy
{% stackexchange 170185 diy %}
        

常见的陷阱

与其他Markdown编辑器一样。 如果要在编号列表之间添加图片,请确保选中该图片,否则它将重新启动列表编号。 以下是操作示例: Markdown文字列表的示例图片

这是Markdown备忘单,以供参考。

Happy posting! 📝