diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index b6046cb..6698131 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -1,27 +1,27 @@ var nav = require('./config/nav.js'); -var sidebar = require('./config/sidebar.json'); +var sidebar = require('./config/sidebar.js'); module.exports = { - title: 'Evan 博客', // 标题 + title: 'Evan Blog', // 标题 description: 'Evan Blog 个人博客,基于vuepress构建,专注前端学习与总结', // 描述,以 标签渲染到当前页面的 HTML 中 // process.env.VUEPRESS_BASE 在package.json生成 base: process.env.VUEPRESS_BASE || '/', // 基础路径,默认'/',如果放到github pages要改成仓库名 head: [ // 注入到当前页面 中的标签,格式[tagName, { attrName: attrValue }, innerHTML?] - ['link', { rel: 'icon', href: '/img/logo.jpg' }] //favicons,资源放在public文件夹 + ['link', { rel: 'icon', href: '/img/logo.png' }] //favicons,资源放在public文件夹 ], markdown: { lineNumbers: true // 代码行号 }, plugins: ['@vuepress/back-to-top','@vuepress/medium-zoom'], // 插件 themeConfig: { // 主题配置 - logo: '/img/logo.jpg', // 导航栏logo + logo: '/img/logo.png', // 导航栏logo nav: nav, repo: 'xugaoyi/evanblog', // 导航栏生成Github链接 - editLinks: true, // 编辑链接 - editLinkText: '在 Github 上编辑此页', + // editLinks: true, // 编辑链接 + // editLinkText: '在 Github 上编辑此页', lastUpdated: '上次更新', // 上次更新时间,及前缀文字 string | boolean // displayAllHeaders: true // 默认值:false - // sidebar: 'auto', //自动侧边栏 - sidebar: sidebar, + sidebar: 'auto', //自动侧边栏 + //sidebar: sidebar, }, // locales: { // // 键名是该语言所属的子路径 diff --git a/docs/.vuepress/config/nav.js b/docs/.vuepress/config/nav.js index 15836e2..149a323 100644 --- a/docs/.vuepress/config/nav.js +++ b/docs/.vuepress/config/nav.js @@ -14,11 +14,9 @@ module.exports = [ {text: 'python', link: '/python/'} ] }, - {text: '其他', items: [ - {text: 'git使用文档', link: '/other/'}, - {text: 'github使用技巧', link: '/other/'}, - {text: 'markdown使用教程', link: '/other/'}, - {text: '学习网站分享', link: '/other/'} - ]}, + {text: 'git使用文档', link: '/other/git'}, + {text: 'github使用技巧', link: '/other/github'}, + {text: 'markdown使用教程', link: '/other/markdown'}, + {text: '学习网站分享', link: '/other/study'}, {text: '关于我',link: '/about/'} ] \ No newline at end of file diff --git a/docs/.vuepress/config/sidebar.js b/docs/.vuepress/config/sidebar.js new file mode 100644 index 0000000..7c6d6c7 --- /dev/null +++ b/docs/.vuepress/config/sidebar.js @@ -0,0 +1 @@ +module.exports = {} \ No newline at end of file diff --git a/docs/.vuepress/config/sidebar.json b/docs/.vuepress/config/sidebar.json deleted file mode 100644 index ed58075..0000000 --- a/docs/.vuepress/config/sidebar.json +++ /dev/null @@ -1 +0,0 @@ -{"/article_child/":["","rules","shizi","star"],"/article_tech/":[""],"/article_self/":[""],"/child/":["","code"],"/code/":["","other"],"/about/":[""],"/":[""]} \ No newline at end of file diff --git a/docs/.vuepress/public/img/about - 副本.jpg b/docs/.vuepress/public/img/about - 副本.jpg new file mode 100644 index 0000000..384ca7a Binary files /dev/null and b/docs/.vuepress/public/img/about - 副本.jpg differ diff --git a/docs/.vuepress/public/img/about.jpg b/docs/.vuepress/public/img/about.jpg new file mode 100644 index 0000000..d8443be Binary files /dev/null and b/docs/.vuepress/public/img/about.jpg differ diff --git a/docs/.vuepress/public/img/article.jpg b/docs/.vuepress/public/img/article.jpg index baa5da1..c9396bf 100644 Binary files a/docs/.vuepress/public/img/article.jpg and b/docs/.vuepress/public/img/article.jpg differ diff --git a/docs/.vuepress/public/img/child.jpg b/docs/.vuepress/public/img/child.jpg deleted file mode 100644 index 6363d92..0000000 Binary files a/docs/.vuepress/public/img/child.jpg and /dev/null differ diff --git a/docs/.vuepress/public/img/code.jpg b/docs/.vuepress/public/img/code.jpg deleted file mode 100644 index 6b6038f..0000000 Binary files a/docs/.vuepress/public/img/code.jpg and /dev/null differ diff --git a/docs/.vuepress/public/img/logo.jpg b/docs/.vuepress/public/img/logo.jpg deleted file mode 100644 index 832fd24..0000000 Binary files a/docs/.vuepress/public/img/logo.jpg and /dev/null differ diff --git a/docs/.vuepress/public/img/logo.png b/docs/.vuepress/public/img/logo.png new file mode 100644 index 0000000..9cbd695 Binary files /dev/null and b/docs/.vuepress/public/img/logo.png differ diff --git a/docs/.vuepress/public/img/python.jpg b/docs/.vuepress/public/img/python.jpg new file mode 100644 index 0000000..ea52723 Binary files /dev/null and b/docs/.vuepress/public/img/python.jpg differ diff --git a/docs/.vuepress/public/img/web.jpg b/docs/.vuepress/public/img/web.jpg new file mode 100644 index 0000000..5bc0321 Binary files /dev/null and b/docs/.vuepress/public/img/web.jpg differ diff --git a/docs/.vuepress/theme/components/Home.vue b/docs/.vuepress/theme/components/Home.vue index 5248603..7200c2b 100644 --- a/docs/.vuepress/theme/components/Home.vue +++ b/docs/.vuepress/theme/components/Home.vue @@ -117,6 +117,7 @@ export default { .image_title { width: 14rem; height: 10rem; + border-radius: 15px; } h2 { diff --git a/docs/about/readme.md b/docs/about/readme.md index e69de29..4e64ee8 100644 --- a/docs/about/readme.md +++ b/docs/about/readme.md @@ -0,0 +1,11 @@ +## 关于我 + +男程序员,喜欢唱、跳、rap、篮球,写程序。 + + + +## :email: 联系 + +- **Github**: +- **Email**: 894072666@qq.com +- **QQ**: 8940726696 \ No newline at end of file diff --git a/docs/other/git.md b/docs/other/git.md new file mode 100644 index 0000000..1783e6f --- /dev/null +++ b/docs/other/git.md @@ -0,0 +1,401 @@ + + +## Git使用文档 + +### 安装 + +官网下载: 下载完成后使用默认进行安装。 + +安装完成后,在开始菜单里找到 `Git` -> `Git Bash`,蹦出一个类似命令行窗口的东西,就说明Git安装成功! +还需要最后一步设置,在命令行输入: + +```bash +git config --global user.name "Your Name" +git config --global user.email "email@example.com" +``` + +因为Git是分布式版本控制系统,所以,每个机器都必须自报家门:你的名字和Email地址。 + + + +### 创建版本库(仓库) + +```bash +# 创建仓库 +mkdir <仓库name> + +# 进入仓库 +cd <仓库name> + +# 此命令用于显示当前目录 +pwd + +# 把当前目录初始化成Git仓库 +git init +``` + +> 也不一定必须在空目录下创建Git仓库,选择一个已经有东西的目录直接`git init`也是可以的。 + + + +### 添加文件到仓库 + +在仓库目录下放入文件,如新建一个`test.txt`文件,然后使用`git add test.txt`命令告诉Git,把文件添加到缓存区,然后使用`git commit -m "提交描述"`告诉Git,把文件提交到仓库。 + +```bash +# 添加指定文件或文件夹到缓存区,文件需添加后缀 +git add <文件或文件夹name> # 单个文件 +git add <文件或文件夹name> <文件或文件夹name> # 多个文件 + +# 或 全部文件同时添加到缓存区 +git add . + +# 把文件从缓存区提交至仓库 +git commit -m "提交描述" +``` + + + +##### 提交描述规范 + +在提交代码时输入清晰的说明有利于版本管理,建议搭配如下关键字编写提交描述 + +```bash +# 新建(add) +# 删除(rm) +# 更新(update) +# 改动(change) +# 实现 +# 发布 +# 修复 +... +``` + + + + + +### 版本管理 + +##### 提交修改 + +如修改`test.txt`的内容后,运行`git status`命令看看被修改的文件,然后再使用`git add test.txt`、 +`git commit -m "修改描述"`把修改后的文件提交到仓库,提交后可再次使用`git status`查看当前状态。 + +```bash +# 显示 新增/删除/被改动等 的文件 +git status +``` + + + +##### 查看版本记录 + +```bash +# 查看版本记录 +git log # 显示版本号、提交时间等信息 +``` + +> 也可使用可视化工具查看Git版本历史: +> 在仓库目录右键 > `Git BUI Here` + + + +##### 回退版本 + +首先,Git必须知道当前版本是哪个版本,在Git中,用`HEAD`表示当前版本,也就是最新的提交1094adb...(注意我的提交ID和你的肯定不一样),上一个版本就是`HEAD^`,上上一个版本就是`HEAD^^`,当然往上100个版本写100个^比较容易数不过来,所以写成`HEAD~100`。 + +```bash +# 回退到上一个版本 +$ git reset --hard HEAD^ +``` + +此时查看`git log`记录发现,原来最新的版本已经没有了,想回到原来最新的版本怎么办?这就需要知道最新的版本的版本号 + +``` bash +# 跳转到指定版本 +git reset --hard <版本号前几位> +``` + +但是不知道版本号怎么办?Git提供了一个命令`git reflog`用来记录你的每一次命令 + +```bash +git reflog +``` + +##### 撤销修改 + + + +##### 删除文件 + +https://www.liaoxuefeng.com/wiki/896043488029600/900002180232448 + + + +### 远程仓库 + +##### SSH验证 + +使本机能关联远程仓库,首次需要SSH验证 + +* 第1步:创建`SSH Key`。在用户主(C:\Users\dell)目录下,看看有没有.ssh目录, + 如果有,再看看这个目录下有没有`id_rsa`和`id_rsa.pub`这两个文件,如果已经有了,可直接跳到下一步。 + 如果没有,打开Shell(Windows下打开Git Bash),创建`SSH Key`: + +```bash +# 创建SSH Key +ssh-keygen -t rsa -C "邮件地址" +``` + +* 第2步:登陆GitHub,右上角头像 > settings > SSH and GPG keys >Add SSH Key,在key的文本框里粘贴`id_rsa.pub`文件的内容 + + + +##### 关联远程仓库 + +SSH验证完成后,在github创建仓库,创建仓库时记得取消 `Initialize this repository with a README`的勾选,然后在本地命令: + +```bash +# 关联远程仓库,仓库名一般使用origin +git remote add <仓库名> <远程仓库地址> + +# 示例 +git remote add origin git@github.com:xugaoyi/test.git +``` + +下一步,就可以把本地库的所有内容推送到远程库上 + +```bash +# 把文件推送到远程仓库 +git push -u <仓库名> <分支名> + +# 示例 +git push -u origin master +``` + +由于远程库是空的,我们第一次推送`master`分支时,加上了`-u`参数,Git不但会把本地的`master`分支内容推送的远程新的`master`分支,还会把本地的`master`分支和远程的`master`分支关联起来,在以后的推送或者拉取时就可以简化命令。 + +> 前提是目录已经`git init`初始化成仓库,并且`git status`状态是没有改动的,如果有改动则先`git add .`添加至缓存区,`git commit -m '提交描述'`提交至仓库,然后执行上面命令。 +> +> 如创建仓库时勾选了 `Initialize this repository with a README` 则需先拉取`README.md`文件到本地仓库`git pull` +> +> 可关联多个远程仓库,注意给不同的远程仓库取不一样的名称,提交是分别按名称提交到不一样的远程仓库。 + + + +```bash +# 简化的推送命令 +git push +``` + + + +##### 查看远程仓库 + +```bash +# 查看远程仓库 +git remote -v +``` + + + +##### 删除远程仓库 + +```bash +# 删除远程仓库 +git remote rm <仓库名> +``` + + + +##### 从远程库克隆项目 + +```bash +# 从远程库克隆项目 +git clone <仓库地址> +``` + +###### 克隆指定分支 + +```bash +# 克隆指定分支 +git clone -b <分支名> <仓库地址> +``` + + + +### 分支管理 + +##### 创建分支 + +```bash +# 创建分支 +git checkout -b <分支名> +``` + + + +##### 查看分支 + +```bash +# 查看分支 +git branch +``` + +> 查看分支时,在分支前带 * 号的表示当前的分支 + + + +##### 切换分支 + +```bash +# 切换分支 +git checkout <分支名> +``` + + + +##### 合并分支 + +```bash +# 合并分支 +git merge <分支名> +``` + +> 用于合并指定分支到当前分支。 + + + +##### 删除分支 + +```bash +# 删除分支 +git branch -d <分支名> +``` + + + +##### 修改分支名 + +```bash +# 修改分支名 +git branch -m <原分支名> <新分支名> +``` + + + + + +### 帮助命令 + +如对命令不清楚时,可使用`git help`命令显示出git命令介绍。 + +```bash +# 帮助命令 +git help +``` + + + +```bash +$ git help +usage: git [--version] [--help] [-C ] [-c =] + [--exec-path[=]] [--html-path] [--man-path] [--info-path] + [-p | --paginate | -P | --no-pager] [--no-replace-objects] [--bare] + [--git-dir=] [--work-tree=] [--namespace=] + [] + +These are common Git commands used in various situations: + +start a working area (see also: git help tutorial) + clone Clone a repository into a new directory + init Create an empty Git repository or reinitialize an existing one + +work on the current change (see also: git help everyday) + add Add file contents to the index + mv Move or rename a file, a directory, or a symlink + reset Reset current HEAD to the specified state + rm Remove files from the working tree and from the index + +examine the history and state (see also: git help revisions) + bisect Use binary search to find the commit that introduced a bug + grep Print lines matching a pattern + log Show commit logs + show Show various types of objects + status Show the working tree status + +grow, mark and tweak your common history + branch List, create, or delete branches + checkout Switch branches or restore working tree files + commit Record changes to the repository + diff Show changes between commits, commit and working tree, etc + merge Join two or more development histories together + rebase Reapply commits on top of another base tip + tag Create, list, delete or verify a tag object signed with GPG + +collaborate (see also: git help workflows) + fetch Download objects and refs from another repository + pull Fetch from and integrate with another repository or a local branch + push Update remote refs along with associated objects + +'git help -a' and 'git help -g' list available subcommands and some +concept guides. See 'git help ' or 'git help ' +to read about a specific subcommand or concept. +``` + + + +翻译工具翻译中文 + +```bash +$ git help +使用:git [--version] [--help] [-C ] [-c =] + [--exec-path[=]] [--html-path] [--man-path] [--info-path] + [-p | --paginate | -P | --no-pager] [--no-replace-objects] [--bare] + [--git-dir=] [--work-tree=] [--namespace=] + [] + +这些是在各种情况下使用的通用Git命令: + +start a working area (参见命令: git help tutorial) + clone 将存储库克隆到新目录中 + init 创建一个空的Git存储库或重新初始化一个现有的存储库 + +work on the current change (参见命令: git help everyday) + add 将文件内容添加到索引中 + mv 移动或重命名文件、目录或符号链接 + reset 将当前磁头重置为指定状态 + rm 从工作树和索引中删除文件 + +examine the history and state (参见命令: git help revisions) + bisect 使用二分查找查找引入错误的提交 + grep 打印与模式匹配的行 + log 显示提交日志 + show 显示各种类型的对象 + status 显示工作树状态 + +grow, mark and tweak your common history + branch 列出、创建或删除分支 + checkout 切换分支或还原工作树文件 + commit 记录对存储库的更改 + diff 显示提交、提交和工作树等之间的更改 + merge 将两个或多个开发历史连接在一起 + rebase 在另一个基本提示之上重新应用提交 + tag 创建、列表、删除或验证用GPG签名的标记对象 + +collaborate (参见命令: git help workflows) + fetch 从另一个存储库下载对象和引用 + pull 从另一个存储库或本地分支获取并与之集成 + push 更新远程引用和相关对象 + +'git help -a' 和 'git help -g' 列出可用的子命令和一些概念指导。 +命令'git help ' 或 'git help ' 查看特定子命令或概念. +``` + + + +### 参考文档 + + + diff --git a/docs/other/github.md b/docs/other/github.md new file mode 100644 index 0000000..b369c3c --- /dev/null +++ b/docs/other/github.md @@ -0,0 +1,56 @@ +## Github高级搜索技巧 + +`in:name <关键字>` + 仓库名称带关键字查询 + +`in:description <关键字>` + 仓库描述带关键字查询 + +`in:readme <关键字>` + README文件带关键字查询 + + + +`stars(fork): >(=) <数字> <关键字>` + star或fork数大于(或等于)指定数字的带关键字查询 + +`stars(fork): 10..20 <关键词>` + star或fork数在10到20之间的带关键字查询 + + + +`size:>=5000 <关键词>` + 限定仓库大于等于5000K的带关键字查询 + +`pushed(created):>2019-11-15 <关键字>` + 更新 或 创建 日期在2019年11月16日之后的带关键字查询 + +`license:apache-2.0 <关键字>` + LICENSE为apache-2.0的带关键字查询 + +`language:java <关键词>` + 仓库语言为Java的带关键字查询 + + + +`user:<用户名>` + 查询某个用户的项目 + +`org:<组织名>` + 查询某个组织的项目 + +***以上查询条件可组合使用,空格隔开** + +```sh +# 示例1:搜索仓库名包含javascript,并且stars数大于1000的项目 +in:name javascript stars:>1000 + +# 示例2:搜索描述中包含"小程序",并且fork大于100,并且最近更新时间在2019-11-15之后的,并且使用开发语言为vue的项目 +in:description 小程序 fork:>100 pushed:>2019-11-15 language:vue +``` + + + +***或使用高级搜索页搜索:** + + \ No newline at end of file diff --git a/docs/other/markdown.md b/docs/other/markdown.md new file mode 100644 index 0000000..f284310 --- /dev/null +++ b/docs/other/markdown.md @@ -0,0 +1,1025 @@ +## 一、Markdown + +### 简介 + + + +`Markdown` 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档。 + +### 应用 + +当前许多网站都广泛使用 `Markdown` 来撰写帮助文档或是用于论坛上发表消息。例如:GitHub、简书、知乎等 + +### 编辑器 + +推荐使用`Typora`,官网: + + + + + +## 二、徽章 + +#### 什么是徽章 + +徽章是一种小巧精美的小图标,一般配有相关文字进行辅助说明,可对数据进行监控,链接跳转等,富有表现力。 + +常见于`github`项目主页,但其不仅出现于 `github` 项目主页,凡是能够表现图片的地方都可以出现徽章。 + + + +#### 徽章的使用 + +* 在`markdown`中使用 + +``` +格式: [![图片文字说明](图片源地址)](超链接地址) 即超链接内部嵌套图片 +语法: +[![github](https://img.shields.io/badge/github-xugaoyi-brightgreen.svg)](https://github.com/xugaoyi) +``` +[![github](https://img.shields.io/badge/github-xugaoyi-brightgreen.svg)](https://github.com/xugaoyi) + + + +徽章生成网站: + +本文档主要介绍markdown,不对徽章做过多介绍,详细介绍请 [ 戳我 ](https://segmentfault.com/a/1190000019552597) 访问。 + + + + + +## 三、设置目录 + +设置之后会根据分级标题来自动生成目录。 + +``` +语法: +[TOC] +``` + +> 注:github暂未支持。 + +[TOC] + +在github生成TOC的方法: + +windows系统需要基于golang实现的工具:https://github.com/ekalinin/github-markdown-toc.go + +> 如果你有GO语言的编译环境,可以尝试自己编译,如果没有,可以直接下载编译好的二进制文件。 +> +> 如windows系统64位 下载:gh-md-toc.windows.amd64.tgz (386 是32位,amd64是64位) +> +> 下载解压后,发现没有后缀名无法识别,实际上这是个exe文件,所以只需要暴力地在后面加上.exe就可以开始愉快使用了。 +> +> 使用方法: +> +> 1. 首先将.md文档复制到gh-md-toc.exe的根目录下 +> 2. 在该目录下打开系统命令行,输入命令:gh-md-toc.exe README.MD 生成目录 +> 3. 把生成的目录复制到.md文件即可。 + + + +**这是gh-md-toc生成的目录:** + + + + * [一、Markdown](#%E4%B8%80markdown) + * [简介](#%E7%AE%80%E4%BB%8B) + * [应用](#%E5%BA%94%E7%94%A8) + * [编辑器](#%E7%BC%96%E8%BE%91%E5%99%A8) + * [二、徽章](#%E4%BA%8C%E5%BE%BD%E7%AB%A0) + * [什么是徽章](#%E4%BB%80%E4%B9%88%E6%98%AF%E5%BE%BD%E7%AB%A0) + * [徽章的使用](#%E5%BE%BD%E7%AB%A0%E7%9A%84%E4%BD%BF%E7%94%A8) + * [三、设置目录](#%E4%B8%89%E8%AE%BE%E7%BD%AE%E7%9B%AE%E5%BD%95) + * [四、标题](#%E5%9B%9B%E6%A0%87%E9%A2%98) +* [一级标题](#%E4%B8%80%E7%BA%A7%E6%A0%87%E9%A2%98) + * [二级标题](#%E4%BA%8C%E7%BA%A7%E6%A0%87%E9%A2%98) + * [三级标题](#%E4%B8%89%E7%BA%A7%E6%A0%87%E9%A2%98) + * [四级标题](#%E5%9B%9B%E7%BA%A7%E6%A0%87%E9%A2%98) + * [五级标题](#%E4%BA%94%E7%BA%A7%E6%A0%87%E9%A2%98) + * [六级标题](#%E5%85%AD%E7%BA%A7%E6%A0%87%E9%A2%98) + * [五、文本](#%E4%BA%94%E6%96%87%E6%9C%AC) + * [段落](#%E6%AE%B5%E8%90%BD) + * [字体](#%E5%AD%97%E4%BD%93) + * [删除线](#%E5%88%A0%E9%99%A4%E7%BA%BF) + * [下划线](#%E4%B8%8B%E5%88%92%E7%BA%BF) + * [文字高亮](#%E6%96%87%E5%AD%97%E9%AB%98%E4%BA%AE) + * [分隔线](#%E5%88%86%E9%9A%94%E7%BA%BF) + * [脚注](#%E8%84%9A%E6%B3%A8) + * [六、列表](#%E5%85%AD%E5%88%97%E8%A1%A8) + * [无序列表](#%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8) + * [有序列表](#%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8) + * [折叠列表](#%E6%8A%98%E5%8F%A0%E5%88%97%E8%A1%A8) + * [带复选框列表](#%E5%B8%A6%E5%A4%8D%E9%80%89%E6%A1%86%E5%88%97%E8%A1%A8) + * [列表嵌套](#%E5%88%97%E8%A1%A8%E5%B5%8C%E5%A5%97) + * [七、区块引用](#%E4%B8%83%E5%8C%BA%E5%9D%97%E5%BC%95%E7%94%A8) + * [区块嵌套](#%E5%8C%BA%E5%9D%97%E5%B5%8C%E5%A5%97) + * [区块中使用列表](#%E5%8C%BA%E5%9D%97%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%88%97%E8%A1%A8) + * [列表中使用区块](#%E5%88%97%E8%A1%A8%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%8C%BA%E5%9D%97) + * [八、代码](#%E5%85%AB%E4%BB%A3%E7%A0%81) + * [代码区块](#%E4%BB%A3%E7%A0%81%E5%8C%BA%E5%9D%97) + * [九、链接](#%E4%B9%9D%E9%93%BE%E6%8E%A5) + * [变量链接](#%E5%8F%98%E9%87%8F%E9%93%BE%E6%8E%A5) + * [Github中使用内部链接](#github%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%86%85%E9%83%A8%E9%93%BE%E6%8E%A5) + * [锚点链接](#%E9%94%9A%E7%82%B9%E9%93%BE%E6%8E%A5) + * [十、图片](#%E5%8D%81%E5%9B%BE%E7%89%87) + * [图片宽高](#%E5%9B%BE%E7%89%87%E5%AE%BD%E9%AB%98) + * [相对路径以及Github中使用图片](#%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E4%BB%A5%E5%8F%8Agithub%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%9B%BE%E7%89%87) + * [十一、表格](#%E5%8D%81%E4%B8%80%E8%A1%A8%E6%A0%BC) + * [十二、Emoji表情包](#%E5%8D%81%E4%BA%8Cemoji%E8%A1%A8%E6%83%85%E5%8C%85) + * [十三、其他技巧](#%E5%8D%81%E4%B8%89%E5%85%B6%E4%BB%96%E6%8A%80%E5%B7%A7) + * [支持的 HTML 元素](#%E6%94%AF%E6%8C%81%E7%9A%84-html-%E5%85%83%E7%B4%A0) + * [转义](#%E8%BD%AC%E4%B9%89) + * [数学公式](#%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F) + * [图表](#%E5%9B%BE%E8%A1%A8) + * [流程图](#%E6%B5%81%E7%A8%8B%E5%9B%BE) + * [时序图](#%E6%97%B6%E5%BA%8F%E5%9B%BE) + * [甘特图](#%E7%94%98%E7%89%B9%E5%9B%BE) + + +## 四、标题 + +``` +语法: +# 一级标题 +## 二级标题 +### 三级标题 +#### 四级标题 +##### 五级标题 +###### 六级标题 +``` + +# 一级标题 + +## 二级标题 + +### 三级标题 + +#### 四级标题 + +##### 五级标题 + +###### 六级标题 + + + +## 五、文本 + +### 段落 + +Markdown 段落没有特殊的格式,直接编写文字,**需要段落缩进时使用2个Tab** + + + +### 字体 + +``` +语法: +*斜体文本* +或 _斜体文本_ +**粗体文本** +或 __粗体文本__ +***粗斜体文本*** +或 ___粗斜体文本___ +``` + +*斜体文本* + +_斜体文本_ + +**粗体文本** + +__粗体文本__ + +***粗斜体文本*** + +___粗斜体文本___ + + + +### 删除线 + +如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 **~~** 即可,实例如下: + +``` +语法: +~~BAIDU.COM~~ +``` + + + +~~BAIDU.COM~~ + + + +### 下划线 + + + +``` +语法: +带下划线的文本 +``` + +> 注:github暂未支持。 + +带下划线的文本 + + + +### 文字高亮 + +文字高亮功能能使行内部分文字高亮,使用一对反引号。 + +``` +语法: +`html` `css` `javascript` +``` + +`html` `css` `javascript` + + + +### 分隔线 + +你可以在一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线: + +``` +语法: +*** + +***** + +- - - + +---------- +``` + + + + + +*** + + + +### 脚注 + +脚注是对文本的补充说明。 + +``` +语法: +[^变量] +在文档结尾或其他位置給变量赋值: +[^变量]: 注明框内显示的内容 + +鼠标移到这里> [^哈喽] +[^哈喽]: 注明框内显示的内容 +``` + +> 注:github暂未支持。 + +鼠标移到这里> [^哈喽] + +[^哈喽]: 注明框内显示的内容 + + + +## 六、列表 + +### 无序列表 + +使用星号(*****)、加号(**+**)或是减号(**-**)作为列表标记: + +``` +语法: +* 第一项 +* 第二项 + ++ 第一项 ++ 第二项 + +- 第一项 +- 第二项 +``` + + + +* 第一项 +* 第二项 + +### 有序列表 + +使用数字并加上 **.** 号来表示 + +``` +语法: +1. 第一项 +2. 第二项 +``` + + + +1. 第一项 +2. 第二项 + + + +### 折叠列表 + +``` +语法: +
+点我打开关闭折叠 + 折叠内容 +
    +
  • 1
  • +
  • 2
  • +
  • 3
  • +
+
+``` + +> 注意:\ 标签内写markdown代码无效,可写html代码,如ul>li、table等 + +
+点我打开关闭折叠 + 折叠内容 +
    +
  • 1
  • +
  • 2
  • +
  • 3
  • +
+
+ +
+包含table的折叠 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
分类例词
人称代词-主格I我,you你,he他,she她,they他们, we我们
人称代词-宾格me我, you你, him他, her她, them他们, us我们
物主代词my我的, his他的, your你的(your你们的), their他们的, hers她的
指示代词this这, that那, these这些, those 那些
反身代词myself我自己, himself他自己, themselves他们自己, yourself你(们)自己,herself她自己
疑问代词who谁, what什么, which哪个
不定代词some一些, many许多, both两个、两个都, any许多
关系代词which……的物, who……的人, that……的人或物, who谁, that引导定语从句
相互代词each other 互相, one another互相
连接代词who,whom,whose,what,which,whatever,whichever,whoever,whomever
替代词one(单数),ones(复数)
+
+ + + +### 带复选框列表 + +``` +语法: +* [x] 第一项 +* [ ] 第二项 +* [ ] 第三项 +``` + + + +- [ ] 第一项 + +- [ ] 第二项 + +- [x] 第三项 + + + +### 列表嵌套 + +``` +语法: +1. 第一项: + - 第一项嵌套的第一个元素 + - 第一项嵌套的第二个元素 +2. 第二项: + - 第二项嵌套的第一个元素 + - 第二项嵌套的第一个元素 +``` + + + +1. 第一项 + - 嵌套1 + - 嵌套2 +2. 第二项 + - 嵌套1 + - 嵌套2 + + + +## 七、区块引用 + + + +区块引用是在段落开头使用 **>** 符号 ,然后后面紧跟一个**空格**符号: + +``` +语法: +> 区块引用 +``` + + + +> 区块引用 +> +> 回车键自动延伸区块 + + + +#### 区块嵌套 + +``` +语法: +> 第一层 +> > 第二层 +> > > 第三层 +``` + +> 第一层 +> +> > 第二层 +> > +> > > 第三层 + + + +#### 区块中使用列表 + +``` +语法: +> 区块中使用列表 +> 1. 第一项 +> 2. 第二项 +> * 111 +> * 222 +``` + +> 区块中使用列表 +> +> 1. 第一项 +> 2. 第二项 +> * 111 +> * 222 + + + +#### 列表中使用区块 + +``` +语法: +* 第一项 + > 区块 +* 第二项 +``` + +* 第一项 + + > 区块 + > + > 区块 + +* 第二项 + + + + + +## 八、代码 + +如果是段落上的一个函数或片段的代码可以用反引号把它包起来(**`**): + +``` +语法: +`function()` 函数 +``` + +`function()`函数 + + + +### 代码区块 + +用 **```** 包裹一段代码,并指定一种语言(也可以不指定): + +本代码区块为说明: + +``` +语法: +​```javascript +function test() { + alert('test') +} +​``` +``` + +效果: + +```javascript +function test() { + alert('test') +} +``` + + + +## 九、链接 + +``` +语法: +[链接名称](链接地址) + +[链接名称](链接地址,可选的alt) + +或 + +<链接地址> +``` + +例如: + +``` +语法: +[百度](http://www.baidu.com,'百度') +``` + +[百度](http://www.baidu.com,'百度') + +直接显示链接地址: + +``` +语法: + +``` + + + + + +### 变量链接 + +``` +语法: +链接可以用变量来代替,文档末尾或其他位置附带变量地址: +这个链接用 1 作为网址变量 [Google][1] +这个链接用 baidu 作为网址变量 [Baidu][baidu] +然后在文档的结尾为变量赋值(网址) + + [1]: http://www.google.com/ + [baidu]: http://www.baidu.com/ +``` + + + +[Google][1] + +[Baidu][baidu] + +[1]:http://www.google.com +[baidu]: http://www.baidu.com/ + + + +### Github中使用内部链接 + +``` +语法: +可使用相对路径(前提是有该路径下的文件) +[test](test.md) +``` +[test](./md-img/test.md) + + + +### 锚点链接 + +本文件中每一个标题都是一个锚点,和HTML的锚点(`#`)类似 + +``` +语法: +[Markdown](#Markdown) +``` + +> 注: github对含有标点符号的标题进行锚点时会忽略掉标点符号, +> 本页中,如果这样写则无法跳转:\[链接](#九、链接) +> 正确写法:\[链接](#九链接) + +[Markdown](#一Markdown) + +[链接](#九链接) + +[流程图](#流程图) + + + +## 十、图片 + +``` +语法: +![alt替代文本](图片地址) + +![alt替代文本](图片地址 "title标题") +``` + + + +- 开头一个感叹号 ! + +- 接着一个方括号,里面放上图片的替代文字 + +- 接着一个普通括号,里面放上图片的地址,最后还可以用引号包住并加上选择性的 'title' 属性的文字。 + + + + + +``` +语法: +![logo](./md-img/logo.png "logo") +``` + +![logo](./md-img/logo.png "logo") + + + +当然,你也可以像链接那样对图片地址使用变量: + +``` +这里链接用 img 作为图片地址变量 +然后在文档的结尾或其他位置给变量赋值(图片地址) +语法: +![RUNOOB][img] +[img]: ./md-img/logo.png +``` + + ![RUNOOB][img] + +[img]: ./md-img/logo.png + + + +### 图片宽高 + +如下想设置图片宽高,可以使用 标签。 + +``` +语法: + +``` + + + + + + + +### 相对路径以及Github中使用图片 + +不管是在本地还是在github同一个仓库中,如果图片存在,可以使用**相对路径**。github上如果引用其他github仓库中的图片则要注意地址格式,即:`仓库地址/raw/分支名/图片路径` + +相对路径图片: + +``` +语法: +![头像图片](./md-img/test.jpg) +``` + + + +![头像图片](./md-img/test.jpg) + +其他仓库的图片: + +``` +语法: +![其他仓库的图片](https://github.com/xugaoyi/vue-music/raw/master/src/common/image/default.png) +``` + + + +![其他仓库的图片](https://github.com/xugaoyi/vue-music/raw/master/src/common/image/default.png) + + + + + +## 十一、表格 + +制作表格使用 (**|**) 来分隔不同的单元格,使用( **-**) 来分隔表头和其他行。 + +``` +语法: +| 表头 | 表头 | +| ---- | ---- | +| 单元格 | 单元格 | +| 单元格 | 单元格 | +``` + + + +| 表头 | 表头 | +| :----: | :----: | +| 单元格 | 单元格 | +| 单元格 | 单元格 | + + + +**对齐方式** + +- **-:** 设置内容和标题栏居右对齐 +- **:-** 设置内容和标题栏居左对齐 +- **:-:** 设置内容和标题栏居中对齐 + +``` +语法: +| 左对齐 | 右对齐 | 居中对齐 | +| :-----| ----: | :----: | +| 单元格 | 单元格 | 单元格 | +| 单元格 | 单元格 | 单元格 | +``` + +| 左对齐 | 右对齐 | 居中对齐 | +| :----- | -----: | :------: | +| 单元格 | 单元格 | 单元格 | +| 单元格 | 单元格 | 单元格 | + + + +## 十二、Emoji表情包 + +``` +语法: Emoji表情英文名的前后加冒号,Typore上先输入冒号再输入首字母有表情提示 +如: +:smirk: +``` +:kiss: +:smile_cat::see_no_evil::horse: +:smirk::blush::smiley::smile: :sunny: + + + +更多表情名称请查看:[表情包清单](https://www.webfx.com/tools/emoji-cheat-sheet/) + + + +## 十三、其他技巧 + +### 支持的 HTML 元素 + +不在 Markdown 语法涵盖范围之内的标签,都可以直接在文档里面用 HTML 撰写。 + +目前支持的 HTML 元素有:`
`等 ,如: + +``` +语法: +使用 Ctrl+Alt+Del 重启电脑 +``` + +使用 Ctrl+Alt+Del 重启电脑 + + + +使用b标签的加粗字体 + + + +### 转义 + +Markdown 使用了很多特殊符号来表示特定的意义,如果需要显示特定的符号则需要使用反斜杠转义字符: + +``` +语法: +**未转义星号显示加粗** +\*\* 转义显示星号 \*\* +``` + + + +**未转义星号显示加粗** +\*\* 转义显示星号 \*\* + +Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号: + +``` +\ 反斜线 +` 反引号 +* 星号 +_ 下划线 +{} 花括号 +[] 方括号 +() 小括号 +# 井字号 ++ 加号 +- 减号 +. 英文句点 +! 感叹号 +``` + + + +*** + +*\*\* **以下部分在Github暂未支持** \*\*\* + +*** + + + +### 数学公式 + +当你需要在编辑器中插入数学公式时,可以使用两个美元符 $$ 包裹 TeX 或 LaTeX 格式的数学公式来实现。提交后,问答和文章页会根据需要加载 Mathjax 对数学公式进行渲染。如: + +``` +语法: +$$ +\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} +\mathbf{i} & \mathbf{j} & \mathbf{k} \\ +\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ +\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ +\end{vmatrix} +$$tep1}{\style{visibility:hidden}{(x+1)(x+1)}} +$$ +``` + + +$$ +\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} +\mathbf{i} & \mathbf{j} & \mathbf{k} \\ +\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ +\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ +\end{vmatrix} +$$ + +### 图表 + +``` +语法: +​```chart +,Budget,Income,Expenses,Debt +June,5000,8000,4000,6000 +July,3000,1000,4000,3000 +Aug,5000,7000,6000,3000 +Sep,7000,2000,3000,1000 +Oct,6000,5000,4000,2000 +Nov,4000,3000,5000, + +type: pie +title: Monthly Revenue +x.title: Amount +y.title: Month +y.suffix: $ +​``` +​```mermaid +sequenceDiagram +A->>B: 是否已收到消息? +B-->>A: 已收到消息 +​``` +``` + +> 注:在Typora中未支持 + +```chart +,Budget,Income,Expenses,Debt +June,5000,8000,4000,6000 +July,3000,1000,4000,3000 +Aug,5000,7000,6000,3000 +Sep,7000,2000,3000,1000 +Oct,6000,5000,4000,2000 +Nov,4000,3000,5000, + +type: pie +title: Monthly Revenue +x.title: Amount +y.title: Month +y.suffix: $ +``` + + + +### 流程图 + +``` +语法: +​```mermaid +graph TD +A[模块A] -->|A1| B(模块B) +B --> C{判断条件C} +C -->|条件C1| D[模块D] +C -->|条件C2| E[模块E] +C -->|条件C3| F[模块F] +​``` +``` + +流程图相关文章: + + + +```mermaid +graph TD +A[模块A] -->|A1| B(模块B) +B --> C{判断条件C} +C -->|条件C1| D[模块D] +C -->|条件C2| E[模块E] +C -->|条件C3| F[模块F] +``` + + + +### 时序图 + +``` +语法: +​```mermaid +sequenceDiagram +A->>B: 是否已收到消息? +B-->>A: 已收到消息 +​``` +``` + + + +```mermaid +sequenceDiagram +A->>B: 是否已收到消息? +B-->>A: 已收到消息 +``` + + + +### 甘特图 + +``` ··· +语法: +​```mermaid +gantt +title 甘特图 +dateFormat YYYY-MM-DD +section 项目A +任务1 :a1, 2018-06-06, 30d +任务2 :after a1 , 20d +section 项目B +任务3 :2018-06-12 , 12d +任务4 : 24d +​``` +``` + +```mermaid +gantt +title 甘特图 +dateFormat YYYY-MM-DD +section 项目A +任务1 :a1, 2018-06-06, 30d +任务2 :after a1 , 20d +section 项目B +任务3 :2018-06-12 , 12d +任务4 : 24d +``` + +​ [回到顶部](#一、markdown) \ No newline at end of file diff --git a/docs/other/md-img/logo.png b/docs/other/md-img/logo.png new file mode 100644 index 0000000..85f1a6d Binary files /dev/null and b/docs/other/md-img/logo.png differ diff --git a/docs/other/md-img/test.jpg b/docs/other/md-img/test.jpg new file mode 100644 index 0000000..63a0ac0 Binary files /dev/null and b/docs/other/md-img/test.jpg differ diff --git a/docs/other/md-img/test.md b/docs/other/md-img/test.md new file mode 100644 index 0000000..576c717 --- /dev/null +++ b/docs/other/md-img/test.md @@ -0,0 +1,2 @@ +# test + diff --git a/docs/other/study.md b/docs/other/study.md new file mode 100644 index 0000000..3e9eea3 --- /dev/null +++ b/docs/other/study.md @@ -0,0 +1,33 @@ +## 文档类 + +| 名称 | 网址 | 描述 | +| ----------------- | ---------------------------------------------------- | ---------- | +| MDN | 中文: | | +| 菜鸟教程 | | | +| JavaScript教程 | | 阮一峰编写 | +| ECMAScript 6 入门 | | 阮一峰编写 | +| ECMA官网 | | | + +## 视频类 + +| 名称 | 网址 | 描述 | +| ------------ | ----------------------------- | ------------------------------------------------------- | +| 慕课网 | | | +| 妙味课堂 | | | +| 中国大学MOOC | | 涵盖计算机、外语、心理学等专业**免费**课程 | +| bilibili | | 你没看错,正是B站,上面也有一些可供学习的**免费**视频哦 | +| youtube | | 外网 | +| egghead | | 外网 | + + + +## 社区类 + +| 名称 | 网址 | 描述 | +| -------------- | ---------------------------- | ---------------------------- | +| Github | | 大名鼎鼎的程序员同性交友社区 | +| 掘金 | | | +| 简书 | | | +| 思否 | | | +| stack overflow | | 外网 | + diff --git a/docs/readme.md b/docs/readme.md index 949a7f0..1a2f7e0 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -1,21 +1,31 @@ --- home: true -# heroImage: /img/logo.jpg -heroText: Evan博客 -tagline: web前端工程师,热衷于学习与总结。 +heroImage: /img/logo.png +heroText: Evan Blog +tagline: web前端工程师,热衷于学习与总结 features: - title: 前端 - details: 前端技术。 + details: web前端开发相关技术 url: /web/ - imgname: /img/article.jpg + imgname: /img/web.jpg - title: python - details: 人生苦短,我学python。 + details: 人生苦短,我学python url: /python/ - imgname: /img/code.jpg + imgname: /img/python.jpg - title: 关于我 - details: 前端界的小学生。 + details: 前端界的小学生 url: /about/ - imgname: /img/code.jpg + imgname: /img/about.jpg footer: Copyright © 2019-present evanblog --- + + + +## :email: 联系 + +- **Github**: +- **Email**: 894072666@qq.com +- **QQ**: 8940726696 + +