进阶篇

一、Emoji表情包

Emoji表情英文名的前后加上冒号 :

:smirk:
:kiss:
:smile_cat::see_no_evil::horse:
:smirk::blush::smiley::smile: :sunny:

😏 💋 😸🙈🐴 😏😊😃😄 ☀️

更多表情名称请查看：

• 表情包清单 (opens new window)
• Emoji百科 (opens new window)

二、徽章

徽章是一种小巧精美的小图标，一般配有相关文字进行辅助说明，可对数据进行监控，链接跳转等，富有表现力。

常见于 github 项目主页，但其不仅出现于 github 项目主页，凡是能够表现图片的地方都可以出现徽章。

徽章的使用

徽章是一种 svg 实现的矢量图标，markdown 中通过超链接内部嵌套图片来展示

格式:
[![图片文字说明](图片源地址)](超链接地址) 

语法：
`vue` 在github上的forks数跟start数：
[![GitHub forks](https://img.shields.io/github/forks/vuejs/vue)](https://github.com/vuejs/vue/network)
[![GitHub stars](https://img.shields.io/github/stars/vuejs/vue)](https://github.com/vuejs/vue/stargazers)

vue 在github上的forks数跟start数：

(opens new window) (opens new window)

直接使用html展示

<a href="https://github.com/vuejs/vue/network"><img alt="GitHub forks" src="https://img.shields.io/github/forks/vuejs/vue"></a>
<a href="https://github.com/vuejs/vue/stargazers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vuejs/vue"></a>

居中展示

<div align="center">
<a href="https://github.com/vuejs/vue/network"><img alt="GitHub forks" src="https://img.shields.io/github/forks/vuejs/vue"></a>
<a href="https://github.com/vuejs/vue/stargazers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vuejs/vue"></a>
</div>

徽章链接

有很多提供在线生成徽章的网站：

• https://shields.io/ (opens new window)
• https://badgen.net/ (opens new window)
• https://forthebadge.com/ (opens new window)
• https://badge.fury.io/ (opens new window)
• https://github.com/boennemann/badges (opens new window)

推荐使用: https://shields.io/ (opens new window) shields 默认按照徽章内容分类, Build,Code Coverage,Analysis 等多主题,同时支持自定义徽章和动态徽章, 适用于绝大多数情况.

1、主题

打开shields (opens new window)网站，按照分类选择其中一个主题，点击进去后填写目标信息，即可在线生成徽章.

比如：选择 License 主题

选择 NPM 许可证

填写好正确的 npm 包信息并实时预览, 然后点击按钮右边倒三角，选择并复制特定格式的徽章链接

生成的markdown格式和html格式如下：

![NPM](https://img.shields.io/npm/l/vuepress)

<img alt="NPM" src="https://img.shields.io/npm/l/vuepress">

想要控制显示的位置就使用html，通过CSS来控制。比如居中显示:

<div align="center">
  <img alt="NPM" src="https://img.shields.io/npm/l/vuepress" class="no-zoom">
</div>

2、搜索

输入关键字搜索，比如：github
会搜索出来很多，往下拉选择 Social 下的 GitHub followers

输入你自己的github用户名
这里借用阮一峰大佬的github ruanyf

![GitHub followers](https://img.shields.io/github/followers/ruanyf?style=social)

也可以输入项目路径搜索，比如 https://github.com/vuejs/vue 然后点击下面的 Suggest badges 按钮，会推荐一些徽章，点击过去直接复制即可使用

vue 在github上的forks数跟start数：

(opens new window) (opens new window)

3、自定义

首页往下拉，找到 Your Badge 区域，通过自定义制作专属徽章。

看说明有两种方式

• Using dash "-" separator https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>
• Using query string parameters https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>

使用第一种，比如输入：
LABEL：GitHub
MESSAGE：ruanyf
COLOR：blue

点击 Make Badge，会生成并跳转到该链接，查看ok直接浏览器地址栏复制链接即可

https://img.shields.io/badge/github-ruanyf-blue 点击查看效果 (opens new window)

然后可以通过 超链接内部嵌套图片来展示并跳转到GitHub

[![github](https://img.shields.io/badge/github-ruanyf-blue)](https://github.com/ruanyf/)

(opens new window)

更多介绍

徽章更详细的介绍请看 这里 (opens new window)

三、设置目录

使用 [TOC] 来设置，设置之后会根据分级标题来自动生成目录。

[TOC]

注： github 暂未支持，可以使用工具直接生成目录放在文章开头

四、数学公式

五、流程图