-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.json
1 lines (1 loc) · 30.1 KB
/
index.json
1
[{"categories":["开发"],"content":"无需服务器，适合不懂代码的小白，基于 Hugo + DoIt + GitHub 一键生成个人博客。","date":"2022-11-06","objectID":"/blog/hugo-build/","series":null,"tags":["Hugo","DoIt","GitHub"],"title":"简单易上手！非程序猿带你搭建免费个人博客","uri":"/blog/hugo-build/"},{"categories":["开发"],"content":"有人可能会问，你为什么要自己搭建博客？明明有公众号、简书、知乎那么多的平台，何必折腾呢？ 在回答这个问题之前，我希望你可以回想一下当遇到一些问题时，是不是会下意识地打开百度？然后过了很长一段时间，当你再碰到类似的问题，你是不是又打开百度再搜索？如此循环往复，时间和精力都被浪费掉了。 但是，如果我拥有自己的知识库，将遇到过的问题记录下来，那么下次再遇到的时候，我只要搜索一下，不就能立刻得到我想要的答案了嘛！😋😋😋 所以，我希望的是能够建立自己个人的知识库，它具有我想要的功能，可以最大限度地自定义我的内容，而自建博客网站恰好是实现这一目的的方式。 搭建博客难吗？说难也难，因为你正在接触一件新事物，人们容易对新事物产生不适感。说容易也很容易，不会代码，不是程序员，只要会下载软件和打字，跟着下面的步骤，你就能自己搭建一个静态博客。 ","date":"2022-11-06","objectID":"/blog/hugo-build/:0:0","series":null,"tags":["Hugo","DoIt","GitHub"],"title":"简单易上手！非程序猿带你搭建免费个人博客","uri":"/blog/hugo-build/#"},{"categories":["开发"],"content":" 安装工具静态网站非常适合专注于内容的网站，通过静态网站生成器，你可以很简单地构建一个静态博客。常见的静态网站生成器有 Hexo、Hugo、Jekyll 等，本文以 Hugo 进行操作。 Hugo 是 Go 编写的静态网站生成器，速度快，易用，可配置，只需要几分之一秒就可以渲染一个经典的中型网站，非常适合博客，文档等网站的生成。 在开始搭建网站之前，建议安装 Git 工具，它是一个版本管理控制系统软件，可以记录代码修改的每一个环节，就好比我们玩游戏存档。如果你打不开前面的链接，你还可以下载国内镜像版本。 Hugo 的安装非常简单，只需要前往 Hugo Releases 下载你所使用的操作系统的最新版本的二进制文件即可，推荐下载 Hugo Extended 版本，因为部分主题的一些特性需要将 SCSS 转换为 CSS，使用该版本将获得更好的体验。下面的操作步骤以 Windows 10 64bit 为例。 接着新建一个「 hugo 」文件夹，在它下面再新建「 bin 」文件夹，然后将下载的文件解压到新建的「 bin 」文件夹中。 同时还要将 Hugo 添加到环境变量中，如果缺少这一步，Hugo 将无法运行。 环境变量位于右键单击「 我的电脑 -\u003e 属性 -\u003e 高级 -\u003e 环境变量 」，或者按住 win+R 进入设置，选择「 系统 -\u003e 关于 -\u003e 高级系统设置 -\u003e 高级 -\u003e 环境变量 」。 最后，你可以按住 win+R，输入 cmd ，进入命令提示符页面，输入 hugo version 即可验证是否成功。如果出现版本号，说明环境变量配置成功。 ","date":"2022-11-06","objectID":"/blog/hugo-build/:1:0","series":null,"tags":["Hugo","DoIt","GitHub"],"title":"简单易上手！非程序猿带你搭建免费个人博客","uri":"/blog/hugo-build/#安装工具"},{"categories":["开发"],"content":" 创建网站前一步完成后，我们打开刚刚新建的「 Hugo 」文件夹，然后在空白处右键单击 Git Bash Here ，并输入以下命令： hugo new site blog 以上命令将会创建一个名为「 blog 」的文件夹，该文件夹存储着你的博客站点数据，你可以将 blog 改为其它单词，创建属于自己的站点，这也是 Hugo 的根目录。 ","date":"2022-11-06","objectID":"/blog/hugo-build/:2:0","series":null,"tags":["Hugo","DoIt","GitHub"],"title":"简单易上手！非程序猿带你搭建免费个人博客","uri":"/blog/hugo-build/#创建网站"},{"categories":["开发"],"content":" 主题配置主题是什么？你可以理解为网页的设计，就像我们穿衣服一样，你需要给你的博客打扮打扮，你可以前往 Hugo 主题网站选择你喜欢的主题。下面以 DoIt 主题进行说明。 在 Hugo 根目录，右键单击 Git Bash Here ，依次输入以下命令： git init git submodule add https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt ☕☕☕ 等待几分钟，主题就安装完成啦~ (～￣▽￣)～ 接着将 ...\\themes\\DoIt\\exampleSite内的 config.toml 复制到 Hugo 根目录，覆盖掉原先的 config.toml，并打开复制后的文件，将 themesDir = \"../..\" 更改为 themesDir = \"themes\"。 然后在 Hugo 根目录，右键单击 Git Bash Here ，输入以下任一命令，就可以进入本地服务器预览你的网页了。 hugo server # 本地预览命令 hugo server -D # 支持预览草稿的本地预览命令 hugo serve -e production # 支持启用评论系统和CDN等的本地预览命令 由于 Hugo 支持实时预览修改，即可以一边主题配置文件，一边在网页预览效果，所以你可以开启本地预览命令，参照 DoIt 主题使用文档配置你自己的网页。 配置主题相当于开启和关闭功能，就好像我们日常使用的 APP，里面有很多功能，但并不是所有的功能你都需要，你可以结合自己的需求有选择地在主页面开启和隐藏某些功能，你只要打开刚刚复制的 config.toml修改即可。 ","date":"2022-11-06","objectID":"/blog/hugo-build/:3:0","series":null,"tags":["Hugo","DoIt","GitHub"],"title":"简单易上手！非程序猿带你搭建免费个人博客","uri":"/blog/hugo-build/#主题配置"},{"categories":["开发"],"content":" 发表文章在发表文章之前，我们需要了解一下Front matter ，它最直观的体现为 Markdown 文件最上方以 --- 分隔的区域，用于指定网页页面的属性（变量），如标题、发布时间、分类、标签等。 你可以选取所需要的参数，对 Front matter进行修改，这样当我们创建页面的时候，就不需要逐一增设参数，而只需填写变量内容即可。 打开 Hugo 根目录下的 ...\\archetypes\\default.md，结合自己的需求修改内容，以下是 DoIt 主题的 Front Matter，提供给大家参考： --- title: \"我的第一篇文章\" subtitle: \"\" date: 2020-03-04T15:58:26+08:00 lastmod: 2020-03-04T15:58:26+08:00 draft: true authors: [] description: \"\" license: \"\" images: [] tags: [] categories: [] series: [] series_weight: 1 seriesNavigation: true featuredImage: \"\" featuredImagePreview:: \"\" hiddenFromHomePage: false hiddenFromSearch: false twemoji: false lightgallery: true ruby: true fraction: true fontawesome: true linkToMarkdown: true linkToSource: false linkToEdit: false linkToReport: false rssFullText: false license: '' toc: enable: true auto: true code: copy: true # ... table: sort: true # ... math: enable: true # ... mapbox: accessToken: \"\" # ... share: enable: true # ... comment: enable: true # ... library: css: # someCSS = \"some.css\" # 位于 \"assets/\" # 或者 # someCSS = \"https://cdn.example.com/some.css\" js: # someJS = \"some.js\" # 位于 \"assets/\" # 或者 # someJS = \"https://cdn.example.com/some.js\" seo: images: [] # ... outdatedArticleReminder: enable: false # ... sponsor: enable: false # ... related: enable: false count: 5 --- 然后就可以开始发布文章啦，在 Hugo 根目录右键单击 Git Bash Here ，依次输入以下任一命令： hugo new posts/first/index.md hugo new posts/first.md 这两条命令的区别在于，前者创建了一个页面资源包，通过修改 Typora 图像的偏好设置，可以直接将本地图片复制到该文件夹，并引用其相对路径。后者则是直接创建一个 posts 页面，图片可以根据自己的需求放在「 assets 」或「 static 」文件夹，引用其相对路径，或直接上传到图床，引用其绝对路径。 需要注意的是，图片的命名必须取英文字符，如 pic.png，如果命名为中文字符或有空格，图片将无法正常显示，如图片.png。 ","date":"2022-11-06","objectID":"/blog/hugo-build/:4:0","series":null,"tags":["Hugo","DoIt","GitHub"],"title":"简单易上手！非程序猿带你搭建免费个人博客","uri":"/blog/hugo-build/#发表文章"},{"categories":["开发"],"content":" 部署博客","date":"2022-11-06","objectID":"/blog/hugo-build/:5:0","series":null,"tags":["Hugo","DoIt","GitHub"],"title":"简单易上手！非程序猿带你搭建免费个人博客","uri":"/blog/hugo-build/#部署博客"},{"categories":["开发"],"content":" 注册账号Are you ready？你准备把你做好的网页发给你朋友看了吗？如果你准备好了，就开始吧！ 首先，你需要有一个 GitHub 账号，如果你有，就需要登录并创建一个新的仓库；如果你没有，就跟着下面的步骤来操作吧。 步骤 内容 要点 1 账号注册/登录 未注册：进入官网，点击 Sign up ，根据提示注册账号； 已注册：点击右上角的 Sign in ，登录 GitHub 。 2 创建新仓库 点击头像，选择 Your repositories 进入仓库； 点击绿色按钮 New 新建仓库； 填写 Repository name * ; 勾选 Add a README file ； 点击绿色按钮 Create Repository 创建新仓库。 关于 Repository name *，GitHub 默认提供 .github.io 域名给用户使用，且具有唯一性。如果你想生成的是主域名，如 https://owner.github.io，则填写 owner.github.io，其中 owner 是你注册时的用户名。如果你想生成的是子域名，如 https://owner.github.io/blog，则填写 blog 即可，同时记得修改 Hugo 配置文件。 # 主域名 baseURL = \"https://owner.github.io/\" # 子域名 baseURL = \"https://owner.github.io/blog\" 仓库名可进入仓库的「 Setting -\u003e General -\u003e Repository name -\u003e Rename 」修改。 ","date":"2022-11-06","objectID":"/blog/hugo-build/:5:1","series":null,"tags":["Hugo","DoIt","GitHub"],"title":"简单易上手！非程序猿带你搭建免费个人博客","uri":"/blog/hugo-build/#注册账号"},{"categories":["开发"],"content":" 生成网站一般而言，Hugo 在部署到 GitHub 之前需要先生成静态网站文件，然后再将生成的静态网站文件「 Public 」上传到 GitHub 仓库。 在 Hugo 根目录，右键单击 Git bash here，输入以下任一命令构建网站： hugo hugo -F --cleanDestinationDir hugo 会在 「 public 」文件夹生成静态网站资源，如果下次网站有修改，需要删除该文件夹，再重新执行该命令，因为该命令只会往里面添加内容，不会删除外部已删除而「 public 」仍存在的文件。 hugo -F --cleanDestinationDir 则会从静态目录中找不到的目标中删除文件，表示每次生成的「 public 」都是全新的，会覆盖原来的。 关于部署到 GitHub 的方式，如果你想一劳永逸，可以使用 GitHub 桌面版直接上传本地网站代码到 GitHub 仓库，阅读「 软件部署 」部分即可。如果不想再下载多一个软件占用本地空间，可以拉到「 命令部署 」部分进行操作。 ","date":"2022-11-06","objectID":"/blog/hugo-build/:5:2","series":null,"tags":["Hugo","DoIt","GitHub"],"title":"简单易上手！非程序猿带你搭建免费个人博客","uri":"/blog/hugo-build/#生成网站"},{"categories":["开发"],"content":" 命令部署我们要通过 Git 将本地网站代码传输到 GitHub 仓库，需要利用到 GitHub 仓库的 Git 地址。Git 地址有两种形式，一种是 HTTPS 地址，如 https://github.com/owner/repo.git，另一种是 SSL 地址，如 [email protected]:owner/repo.git。 由于 GitHub 的特性，使用 HTTPS 地址，你每次通过 Git 提交的时候，都需要输入用户名和用户密码，而使用 SSL 地址则无需这样繁琐的操作。如果你使用的是 HTTPS 地址，则在 Hugo 根目录执行以下命令。 cd public git init git add . git commit -m \"message\" git branch -M main git remote add origin https://github.com/owner/repo.git git push -u origin main 如果你使用的是 SSH 地址，则需要按如下步骤获取你的密钥。首先，在桌面右键选择 Git Bash here，执行以下命令，自行替换引号内的相应字段。 git config --global user.name \"注册时的用户名\" git config --global user.email \"注册时的用户邮箱号\" ssh-keygen -t rsa -C \"注册时的用户邮箱号\" 此时会询问是否需要密码，不需要直接继续按三次回车即可，然后可以执行以下命令，获取你生成的密钥。 cd ~/.ssh cat id_rsa.pub 鼠标选中后右键选择 Copy ，回到 GitHub 的页面，点击「 头像 -\u003e Settings -\u003e SSH and GPG keys -\u003e New SSH key 」，将复制的内容粘贴到 Key 位置。 配置完成后，你可以通过 ssh -T [email protected] 测试是否成功配置 SSH Key。然后回到 Hugo 根目录，右键单击 Git bash here，执行以下命令部署网站。 cd public git init git add . git commit -m \"message\" git branch -M main git remote add origin [email protected]:owner/repo.git git push -u origin main 接下来进入仓库，点击「 Settings -\u003e Pages -\u003e GitHub Pages 」，就可以复制你的域名分享给朋友啦！👏👏👏 如果你没有看到 GitHub Pages 有地址，你需要在 Branch 选择 main ，然后点保存，稍等片刻后刷新就会出现。 ","date":"2022-11-06","objectID":"/blog/hugo-build/:5:3","series":null,"tags":["Hugo","DoIt","GitHub"],"title":"简单易上手！非程序猿带你搭建免费个人博客","uri":"/blog/hugo-build/#命令部署"},{"categories":["开发"],"content":" 软件部署GitHub 桌面版的操作很傻瓜式，直接复制粘贴替换即可，不需要记很多命令，也不需要申请 SSH 密钥等一系列操作，缺点就是会占用本地空间。 下载安装后，进入页面登录后选择 Clone a repository，选择刚刚新建的仓库，选择 Local Path 用于放置博客 public 的内容。 接着，将 Hugo 根目录下的「 Public 」中的所有内容复制到刚刚的 Local Path 中，它就会自动出现在 GitHub 桌面版的界面中，然后按照下图指示操作就会自动部署到 GitHub 仓库中。 最后我们回到 GitHub 仓库界面，选择「 Setting -\u003e Pages 」就可以获取我们的域名啦，并且可以发送给朋友看啦！👏👏👏 💡 TIP：每次构建网站前，建议把「 Public 」整个文件夹删掉，然后再执行 Hugo 命令，不然可能会出现 Bug；或直接执行 hugo -F --cleanDestinationDir 命令，无需删除该文件夹。 ","date":"2022-11-06","objectID":"/blog/hugo-build/:5:4","series":null,"tags":["Hugo","DoIt","GitHub"],"title":"简单易上手！非程序猿带你搭建免费个人博客","uri":"/blog/hugo-build/#软件部署"},{"categories":["开发"],"content":" 参考内容 Hugo 文档 DoIt 主题文档 ","date":"2022-11-06","objectID":"/blog/hugo-build/:6:0","series":null,"tags":["Hugo","DoIt","GitHub"],"title":"简单易上手！非程序猿带你搭建免费个人博客","uri":"/blog/hugo-build/#参考内容"},{"categories":["开发"],"content":"短代码是 Hugo 独有的功能，它是内容文件中的一个简单片段，可以生成合理的 HTML 代码，并且符合 Markdown 简洁的设计哲学。","date":"2022-11-06","objectID":"/blog/hugo-shortcode/","series":null,"tags":["Hugo","Shortcodes"],"title":"速查！Hugo Shortcodes 语法手册","uri":"/blog/hugo-shortcode/"},{"categories":["开发"],"content":"Markdown 的内容格式虽然简单，但是有时它也不尽如人意，在很多方面都无法很好地支持，这时内容编辑者就需要使用纯 HTML 来扩展可能性，这与 Markdown 语法的优美简洁相矛盾。 为了尽可能避免使用 HTML 以保持内容简洁，Hugo 创建了 Shortcodes 来规避这些限制。Shortcodes 是内容文件中的一个简单片段，可以生成合理的 HTML 代码，并且符合 Markdown 的设计哲学。在站点生成时，Hugo Shortcodes 将轻松合并到更改中，避免了可能复杂的搜索和替换操作。 通常无需记忆具体的语法，只要知道每个参数所代表的意义即可，你可以借助搜狗拼音输入法的自定义短语功能，将预设好参数的标签插件添加新短语，从而通过缩写实现快捷输入。 ","date":"2022-11-06","objectID":"/blog/hugo-shortcode/:0:0","series":null,"tags":["Hugo","Shortcodes"],"title":"速查！Hugo Shortcodes 语法手册","uri":"/blog/hugo-shortcode/#"},{"categories":["开发"],"content":" 内置简码Hugo 附带了一组预定义的 Shortcodes，实现了一些常见的用法，以保持 Markdown 内容简洁。更具体的内容参数请阅读 Hugo Shortcodes 文档，下表仅为简单使用的短代码简表。 作用 语法 图片 {{\u003c figure src=\"图片地址\" title=\"图片标题\" \u003e}} gist {{\u003c gist 用户名 gist-id \u003e}} 语法高亮 {{\u003c highlight html \u003e}}……{{\u003c /highlight \u003e}} 前置参数 {{\u003c param Front-matter参数名称 \u003e}} 页面链接 用法1：[文章标题]({{\u003c ref \"文章文件的相对路径地址\" \u003e}}) 用法2：[文章标题]({{\u003c relref \"文章标题的碎片链接地址\" \u003e}}) 推特 {{\u003c tweet user=\"用户名\" id=\"文章ID\" \u003e}} YouTube 用法1：{{\u003c vimeo 视频ID \u003e}} 用法2：{{\u003c youtube 视频ID \u003e}} ","date":"2022-11-06","objectID":"/blog/hugo-shortcode/:1:0","series":null,"tags":["Hugo","Shortcodes"],"title":"速查！Hugo Shortcodes 语法手册","uri":"/blog/hugo-shortcode/#内置简码"},{"categories":["开发"],"content":" 扩展简码DoIt 主题在 Hugo 内置的 Shortcodes 的基础上提供多个扩展的 Shortcodes，支持 Markdown 或 HTML 格式。更具体的内容参数请阅读 DoIt 扩展 Shortcodes 使用文档，下表仅为简单使用的短代码简表。 作用 语法 自定义样式 {{\u003c style \"CSS样式\" \u003e}} ……{{\u003c /style \u003e}} 链接 {{\u003c link \"链接地址\" 链接的标题 \"悬停在链接上显示的提示\" \u003e}} 图片 {{\u003c image src=\"图片地址\" caption=\"图片的标题\" title=\"悬停在图片上显示的提示\" \u003e}} 提示横幅 {{\u003c admonition 横幅类型 \"标题\" true或false \u003e}}……{{\u003c /admonition \u003e}} 其中横幅类型可选：note、abstract、info、tip、success、question、warning、failure、danger、bug、example、quote 数据图表 用法1：{{\u003c mermaid \u003e}}……{{\u003c /mermaid \u003e}} 用法2：{{\u003c echarts \u003e}}……{{\u003c /echarts \u003e}} 具体请参考 mermaid 和 Echarts 地图 {{\u003c mapbox 经度值 纬度值 缩放比例 \u003e}} 音乐 用法1：{{\u003c music url=\"本地音乐链接\" name=音乐名字 artist=歌手 cover=\"音乐封面\" \u003e}} 用法2：{{\u003c music \"第三方音乐链接\" \u003e}} 用法3：{{\u003c music 音乐平台 音乐类型 音乐ID \u003e}} 其中音乐平台可选：netease、tecent、kugou、xiami、baidu；音乐类型可选：song、playlist、album、search、artist bilibili {{\u003c bilibili BVid 分P数 \u003e}} 打字动画 简单打字动画：{{\u003c typeit \u003e}}……{{\u003c /typeit \u003e}} 代码打字动画：{{\u003c typeit code=代码语言名称 \u003e}}…… {{\u003c /typeit \u003e}} 段落打字动画：{{\u003c typeit group=paragraph \u003e}}…… {{\u003c /typeit \u003e}} Javascript {{\u003c script \u003e}}……{{\u003c /script \u003e}} 友链 {{\u003c friend \"名字\" \"友链\" \"头像\" \"简介\" \u003e}} 项目展示 {{\u003c showcase \"项目标题\" \"项目简介\" \"项目封面图\" \"项目链接\" \u003e}} 数学公式 {{\u003c math \u003e}}……{{\u003c /math \u003e}} ","date":"2022-11-06","objectID":"/blog/hugo-shortcode/:2:0","series":null,"tags":["Hugo","Shortcodes"],"title":"速查！Hugo Shortcodes 语法手册","uri":"/blog/hugo-shortcode/#扩展简码"},{"categories":["开发"],"content":" 更多简码这部分是我收集的自定义简码，需要在 ~/layouts/shortcodes/ 下创建 name.html 文件后使用，目前仅在 DoIt 主题使用过，不一定适用于全部主题，请视情况使用。 ","date":"2022-11-06","objectID":"/blog/hugo-shortcode/:3:0","series":null,"tags":["Hugo","Shortcodes"],"title":"速查！Hugo Shortcodes 语法手册","uri":"/blog/hugo-shortcode/#更多简码"},{"categories":["开发"],"content":" 文字位置这个简码的功能是设定文字的位置（居左、居中、居右、两端对齐等等），支持的样式基于 CSS 语法。你需要在 ~/layouts/shortcodes/ 下创建 align.html 文件，其内容如下： \u003cp style=\"text-align:{{ index .Params 0 }}\"\u003e{{ index .Params 1 | markdownify }}\u003c/p\u003e 使用时只需要把需要改变位置的文字填在双引号处即可，示例源码如下。 {{\u003c align left \"文字居左\" */\u003e}} {{\u003c align center \"文字居中\" */\u003e}} {{\u003c align right \"文字居右\" */\u003e}} ","date":"2022-11-06","objectID":"/blog/hugo-shortcode/:3:1","series":null,"tags":["Hugo","Shortcodes"],"title":"速查！Hugo Shortcodes 语法手册","uri":"/blog/hugo-shortcode/#文字位置"},{"categories":["开发"],"content":" 参考内容 Hugo Shortcodes DoIt 扩展 Shortcodes 自定义 Hugo Shortcodes 简码 ","date":"2022-11-06","objectID":"/blog/hugo-shortcode/:4:0","series":null,"tags":["Hugo","Shortcodes"],"title":"速查！Hugo Shortcodes 语法手册","uri":"/blog/hugo-shortcode/#参考内容"},{"categories":["开发"],"content":"Markdown 是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。","date":"2022-11-05","objectID":"/blog/markdown/","series":null,"tags":["hexo","markdown"],"title":"超实用！写文章必备的 Markdown 速查手册","uri":"/blog/markdown/"},{"categories":["开发"],"content":" Markdown 格式的首要设计目标是更具可读性，最初的想法是 Markdown 格式的文档应当以纯文本形式发布，而不会看起来像被标签或格式说明所标记。虽然 Markdown 的语法受到几种现有的文本到 HTML 转换工具的影响，但 Markdown 语法的最大灵感来源是纯文本电子邮件的格式。 —— John Gruber Markdown 是一种轻量级标记语言，创始人为约翰 · 格鲁伯（John Gruber）。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML 或者 HTML 文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。 由于 Markdown 的轻量化、易读易写特性，并且对于图片、图表、数学公式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或用于论坛上发表消息。 通俗来讲，Markdown 是一种文本书写方式，通过编辑器将文本生成网页，就好比 Office，你可以通过 Word 将文本排版成文，通过 Excel 将文本构图成表，通过 PPT 将文本演示表达。 ","date":"2022-11-05","objectID":"/blog/markdown/:0:0","series":null,"tags":["hexo","markdown"],"title":"超实用！写文章必备的 Markdown 速查手册","uri":"/blog/markdown/#"},{"categories":["开发"],"content":" 编辑工具 类型 工具 编辑器 1️⃣ OSX：Typora；Byword；iA Writer；Mouapp；TEXTS；Kobito 2️⃣ Windows：Typora；MarkdownPad；TEXTS 3️⃣ iOS：Byword；iA Writer 4️⃣ 通用文字编辑器：Sublime Text；plasticboy/vim-markdown；tpope/vim-markdown 5️⃣ 在线编辑器：markdown；CodeMirror；Dillinger；Markgiu 6️⃣ 浏览器拓展：Markdown Here 扩展 GitHub Flavored Markdown；MultiMarkdown；Pandoc’s markdown；PHP Markdown Extra 引擎 1️⃣ C：Sundown 2️⃣ JavaScript：showdown；pagedown；coreyti/showdown；marked 3️⃣ PHP：PHP Markdown 4️⃣ Ruby：Redcarpet；Maruku ","date":"2022-11-05","objectID":"/blog/markdown/:1:0","series":null,"tags":["hexo","markdown"],"title":"超实用！写文章必备的 Markdown 速查手册","uri":"/blog/markdown/#编辑工具"},{"categories":["开发"],"content":" 学习资源 名称 介绍 John Gruber’s Markdown documentation Markdown 的创建者编写的原始指南 Markdown Tutorial 在线使用 Markdown 的开源网站 Awesome Markdown Markdown 工具和学习资源列表 Typesetting Markdown pandoc 和 ConTeXt 对 Markdown 排版的系列教程 ","date":"2022-11-05","objectID":"/blog/markdown/:2:0","series":null,"tags":["hexo","markdown"],"title":"超实用！写文章必备的 Markdown 速查手册","uri":"/blog/markdown/#学习资源"},{"categories":["开发"],"content":" 常用语法以下列举了 Markdown 文件格式的常用语法，但并非所有的 Markdown 编辑器都支持下面的语法，使用的时候请注意。你可以无需记忆这些 Markdown 语法，现在的 Markdown 编辑器可以做到像 Word 一样，点击功能区或者按击快捷键即可生成效果。 作用 语法 标题 在文本前添加一个 # 和空格，# 表示标题的级别，如 # H1、## H2、### H3。 段落 按照纯文本的方式书写段落即可。 换行 行末添加两个或多个空格，然后按回车键即可，或者直接键入 HTML 语法 \u003cbr\u003e。 强调 1️⃣ 粗体：在文本前后各添加两个 *，如 **加粗**。 2️⃣ 斜体：在文本前后各添加一个 *，如 *倾斜*。 3️⃣ 粗斜体：在文本前后各添加三个 *，如 ***加粗和倾斜***。 4️⃣ 删除线：在文本前后各添加两个 ~，如 ~~删除文本~~。 引用 1️⃣ 块引用：在段落前添加一个 \u003e 符号和空格，如 \u003e 块引用。 2️⃣ 嵌套引用：在要嵌套的段落前添加两个 \u003e 符号和空格，示例如下。 \u003e 块引用 \u003e \u003e\u003e 嵌套引用 ⚡⚡⚡ 注意：块引用可以包含 Markdown 格式的其他元素，如标题、强调、列表等，但并非所有元素都可以使用，使用时请注意。 列表 1️⃣ 有序列表：在文本前添加数字并紧跟一个英文句点，注意英语句点和文本之间要有一个空格，若要创建二级有序列表，则在数字前面添加两个空格即可，示例如下。 1. 第一项 2. 第二项 3. 第三项 2️⃣ 无序列表：在文本前添加一个 -和空格，若要创建二级无序列表，则在-前面添加两个空格即可，示例如下。 - 第一项 - 第二项 - 第三项 3️⃣ 任务列表：在文本前添加 - + 空格 + [ ]，注意方括号和文本之间也要有一个空格，若方括号内不是空格，而是 x，则表示已勾选的任务，示例如下。 - [x] 第一项任务 - [ ] 第二项任务 - [ ] 第三项任务 表格 1️⃣ 基本方法：使用三个或多个 --- 创建每列的标题，并使用 | 分隔每列，示例如下。 | 姓名 | 成绩 | | :-------- | :---------: | | 小明 | 88 | | 小红 | 99 | 2️⃣ 文本对齐：在---的左侧，右侧或两侧添加:，即可实现单列左对齐、右对齐或居中。 3️⃣ 文本格式：表格内支持超链接、行内代码、强调等语法，不支持添加标题、块引用、列表等语法。 代码 1️⃣ 行内代码：在文本前后各添加一个反引号( `)，如 `code`。 2️⃣ 代码块：文本的每一行缩进至少四个空格或一个制表符。 3️⃣ 围栏式代码块：无需缩进的代码块，在段落前后各添加三个反引号( `)，若在第一组的三个反引号后面有标注代码语言，渲染时则会高亮文本，突出显示，示例如下。 ```json { \"firstName\": \"John\", \"lastName\": \"Smith\", \"age\": 25 } ``` 分割线 在单独的一行内使用是三个或多个 ---，并且不能包含其它内容。 链接 1️⃣ 链接文本：[超链接显示名](超链接地址 \"超链接标题\")，超链接标题可有可无，如[title](https://www.example.com)。 2️⃣ 可点击的链接：\u003c超链接地址\u003e，如 \[email protected]\u003e。 3️⃣ 强调链接：在基本链接语法前后增加 * 来加粗或倾斜。 4️⃣ 引用样式链接：可作为尾注或脚注，由两部分组成： 第一部分：[超链接显示名][超链接标签]，超链接标签不区分大小写，可以包含字母、数字、空格或标点符号，如 [hobbit-hole][1]。 第二部分：[超链接标签]: 超链接的地址 \"超链接标题\"，超链接标题可有可无，如 [1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle。 脚注 脚注的作用在于添加注释和参考，由两部分组成： 第一部分：文本内容[^标识符]，标识符支持数字和单词，不支持空格或制表符，如 文本内容[^1]。 第二部分：[^标识符]: 脚注内容 ，如 [^1]: My footnote. 。 图片 1️⃣ 普通图片：![图片描述](图片链接 \"图片标题\")，图片标题可有可无，如 。 2️⃣ 图片超链接：[![图片描述](图片链接 \"图片标题\")](超链接地址)，图片标题可有可无，如 [](https://www.example.com)。⚡⚡⚡ 注意：如果网站存在 lazysizes 和 lightgallery.js 两个依赖库，图片超链接可能不会生效。 转义字符 在具有特殊含义的字符前加上 \\ 后，Markdown 编辑器在渲染排版效果时将展现其原始的含义，主要目的是避免语法冲突。 内嵌 HTML 标签 1️⃣ 行内标签：直接在 Markdown 文件中使用 HTML 行内语法，如 \u003cspan\u003e、\u003ccite\u003e、\u003cdel\u003e 、\u003cem\u003e等。 2️⃣ 区块标签：直接在 Markdown 文件中使用 HTML 区块语法，如 \u003cdiv\u003e、\u003ctable\u003e、\u003cpre\u003e、\u003cp\u003e 等，必须在前后加上空行，以便于内容区分，但注意Markdown 语法在 HTML 区块标签中将不会被进行处理。 Emoji 从 Emojipedia 等来源复制并粘贴表情符号到 Markdown 格式的文本中，或者键入 emoji 简码，如 😂。Windows 系统用户可以按住 win+. 获取微软的 emoji 表情。 ","date":"2022-11-05","objectID":"/blog/markdown/:3:0","series":null,"tags":["hexo","markdown"],"title":"超实用！写文章必备的 Markdown 速查手册","uri":"/blog/markdown/#常用语法"},{"categories":["开发"],"content":" 参考内容Markdown 官方教程 ","date":"2022-11-05","objectID":"/blog/markdown/:4:0","series":null,"tags":["hexo","markdown"],"title":"超实用！写文章必备的 Markdown 速查手册","uri":"/blog/markdown/#参考内容"}]