笔记技巧笔记技巧

# 博客技巧

你的知识笔记枯燥无味没有重点？基于 vuepress 和 Markdown 的基本语法，配合各种骚操作，让知识笔记表现力爆棚~~

# 1. 文本高亮

使用<mark>标签让文本高亮

这就是 &amp;lt;mark>文本&amp;amp;高亮&amp;lt;/mark> 效果

这就是 <mark>文本&高亮</mark> 效果

# 2. 标记

# 内置标记

主题内置的Badge组件 (opens new window) (opens new window)，直接在 Markdown 文件中使用

Props:
- text - string
- type - string, 可选值： "tip"|"warning"|"error"，默认值是： "tip"
- vertical - string, 可选值： "top"|"middle"，默认值是： "top"

<Badge text="beta" type="warning"/>
<Badge text="内置标记"/>

1
2

beta 内置标记

# 外部标记

使用 shields (opens new window) (opens new window)生成标记，在Markdown中使用

![npm](https://https://img.shields.io/badge/%E6%96%87%E7%AB%A0-%E6%A0%87%E8%AE%B0-green)

这类标记图标可以生成动态统计数据。

# 3.自定义容器默认主题

输入

::: tip
这是一个提示
:::

::: warning
这是一个警告
:::

::: danger
这是一个危险警告
:::

::: details
这是一个详情块，在 IE / Edge 中不生效
:::

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

输出

提示

这是一个提示

注意

这是一个警告

警告

这是一个危险警告

点击查看

这是一个详情块，在 IE / Edge 中不生效

你也可以自定义块中的标题：

::: danger STOP
危险区域，禁止通行
:::

::: details 点击查看代码
```js
console.log('你好，VuePress！')
```
:::

1
2
3
4
5
6
7
8
9

STOP

危险区域，禁止通行

点击查看代码

console.log('你好，VuePress！')

# 4. 思维导图 & 流程图

# 方法一：

使用Markmap (opens new window) (opens new window)生成思维导图html文件
将html文件放在docs/.vuepress/public/markmap/
通过<iframe>插入到Markdown

 <iframe :src="$withBase('/markmap/01.html')" width="100%" height="400" frameborder="0" scrolling="No" leftmargin="0" topmargin="0"></iframe>

或者通过 markmap 生成的思维导图html文件通过文件转化工具（freeconvert (opens new window)）转化为图片

# 方法二：

通过<iframe>标签引入processon (opens new window) (opens new window)或其他在线作图工具生成的链接。

<iframe src="https://www.processon.com/view/link/5e718942e4b015182028682c" width="100%" height="500" frameborder="0" scrolling="No" leftmargin="0" topmargin="0"></iframe>

# 方法三：

使用流程图插件：

# 5.Demo演示框

# 方法一：

安装 vuepress-plugin-demo-block (opens new window) (opens new window)或其他同类插件，使用方法看插件文档
在.vuepress/config.js配置插件
Markdown中使用

同类插件：vuepress-plugin-demo-container(opens new window) (opens new window)

VanillaJs Demo:
::: demo [vanilla]
	// ...
:::
React Demo:
::: demo [react]
	// ...
:::
Vue Demo:
::: demo
	// ...
:::

1
2
3
4
5
6
7
8
9
10
11
12

<html>
  <div class="animationBox">
    <div class="rotate">旋转动画1</div>
    <div class="play">
      <div class="img">旋转动画2</div>
      <span><p class="p2"></p></span>
      <span><p></p></span>
      <span><p></p></span>
      <span><p class="p2"></p></span>
    </div>
    <div class="elasticity">弹性动画</div>
    <div class="elasticity2">曲线弹性</div>
  </div>
</html>

<style>
  .animationBox{overflow: hidden;}
  .animationBox>div{
    width: 100px;height: 100px;background: #eee;border-radius: 50%;text-align: center;line-height: 100px;margin: 30px;float:left;
  }
  .rotate{
    animation: rotate 5s linear infinite
  }
  .rotate:hover{ animation-play-state: paused}
  @keyframes rotate {
    0%{transform: rotate(0);}
  100%{transform: rotate(360deg);}
  }
  .animationBox>.play {
    position: relative;
    margin: 50px 30px;
    background:none;
  }
  .play .img{
    position: absolute;
    top: 0;
    left:0;
    z-index: 1;
    width: 100px;height: 100px; background: #eee;
    border-radius: 50%;

    animation: rotate 5s linear infinite
  }
  .play span {
    position: absolute;
    top: 1px;
    left:1px;
    z-index: 0;
    display: block;
    width: 96px;
    height: 96px;
    border: 1px solid #999;
    border-radius: 50%;
  }
  .play span p{display: block;width: 4px;height: 4px;background: #000;margin: -2px 0 0 50%;border-radius: 50%;opacity: 0.5;}
  .play span .p2{margin: 50% 0 0 -2px;}
  .play span{
    animation: wave 5s linear infinite
  }
  .play>span:nth-child(3){
    /* 延迟时间 */
    animation-delay:1s; 
  }
  .play>span:nth-child(4){
    animation-delay:2.2s;
  }
  .play>span:nth-child(5){
    animation-delay:3.8s;
  }
  
  @keyframes wave {
    0%
    {
      transform:scale(1) rotate(360deg);
      opacity: 0.8;
    }
  100%
    {
      transform:scale(1.8) rotate(0deg);
      opacity: 0;
    }
  }


  .elasticity{
    /* 参数说明
      动画名称 花费时间 贝塞尔曲线 延迟开始时间 播放次数n|infinite  是否反向播放动画
    */
    animation: elasticity 1s linear 2s infinite
  }
  
  @keyframes elasticity{
    0%{
      transform: scale(0);
    }
    60%{
      transform: scale(1.1);
    }
    90%{
      transform: scale(1);
    }
  }
  

  .elasticity2{
    /**
    贝塞尔曲线 cubic-bezier(x1,y1,x2,y2)

    通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等
    X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大
    直线：linear，即cubic-bezier(0,0,1,1)

    贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67
      */
    animation: elasticity2 1s cubic-bezier(.39,.62,.74,1.39) 2s infinite
  }
  @keyframes elasticity2{
    0%{
      transform: scale(0);
    }
    90%{
      transform: scale(1);
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

# 方法二：

嵌入codepen(opens new window) (opens new window)

此外，<iframe>标签还可以嵌入其他任何外部网页，如视频、地图等

# 6.其他

# 添加摘要

在合适的位置添加一个注释，前面的内容将会作为摘要在卡片中显示。

# 在线编辑文章

配置好 Github Actions 后，在 Github 源码中修改内容，或新增 .md 文件添加新文章，完成后提交就会自动触发GitHub Actions自动部署。

# 代码块选项卡

<code-group>
  <code-block title="YARN" active>
  ```bash
  yarn add vue -D
  ```
  </code-block>

  <code-block title="NPM">
  ```bash
  npm install vue -D
  ```
  </code-block>
</code-group>

1
2
3
4
5
6
7
8
9
10
11
12
13

yarn add vue -D

npm install vue -D

// Make sure to add code blocks to your code group

# front matter配置

front matter 是文章头部的描述信息，基于特点的规则生成博客。

---
title: 标题
date: 2020-02-21 14:40:19
permalink: /pages/a1bc87
categories:
  - 分类1
  - 分类2
tags:
  - 标签1
sidebar: false
article: false
comment: false
editLink: false
author:
 name: 作者
 link: https://xxx.com
sticky: 1
---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

配置项描述：

# idebar

false 不显示侧边栏
auto 显示自动侧边栏（只包含本文标题和子标题）

# article

false 判定当前页面为非文章页

对于非文章页，如目录页、关于、友情链接等自定义页面，需要设置此项。设置之后这个页面将被认定为非文章页，不显示面包屑和作者、时间，不显示最近更新栏，不会参与到最近更新文章的数据计算中。

# comment

false 不显示评论区，这是评论插件 (opens new window) (opens new window)的一个配置

# editLink

false 不显示编辑链接

# author

author.name 作者名称
author.link 作者链接

指定当前页面的作者信息，如没有作者链接时可以这样：author: 作者名称

# sticky (置顶)

类型： number
排序：允许有多个置顶文章，按照 1, 2, 3, ... 来降低置顶文章的排列优先级

文章置顶，设置了此项将在首页详细版文章列表中处于置顶位置。

# 目录页配置

注意

目录页数据需要依赖于结构化的侧边栏数据，就是说你需要在config.js配置 sidebar: 'structuring' 或 sidebar: { mode: 'structuring', collapsable: false} 才能实现目录页数据的获取。

目录页(.md文件)可以放置在二级目录、三级目录和四级目录。
如果你不想在侧边栏显示目录页，你可以在一级目录中单独创建一个文件夹放置你的目录页(.md文件)，并在front matter中设置sidebar: false。
如果你想让目录页和其他页面一起出现在侧边栏，你可以和其他页面共同放置在相应的文件夹。(不要设置sidebar: false)
参照下面的示例配置好front matter，然后就可以在导航栏或首页添加目录页链接了。

---
pageComponent: # 使用页面组件
  name: Catalogue # 组件名：Catalogue => 目录页组件
  data: # 组件所需数据
    path:  01.学习笔记/01.前端 # 设置为`docs/`下面的某个文件夹相对路径，如‘01.学习笔记/01.前端’ 或 ’01.学习笔记‘ (有序号的要带序号)
    imgUrl: /img/web.png # 目录页内的图片
    description: JavaScript、ES6、Vue框架等前端技术 # 目录描述（可加入a标签）

title: 前端 # 页面标题
date: 2020-01-12 11:51:53 # 创建日期
permalink: /note/javascript # 永久链接
sidebar: false # 不显示侧边栏
article: false # 不是文章页 (不显示面包屑栏、最近更新栏等)
comment: false # 不显示评论栏
editLink: false # 不显示编辑按钮
---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

编辑

上次更新: 2024/11/11 11:17:22

← Nginx反向代理友情链接→

笔记技巧笔记技巧

# 博客技巧

# 1. 文本高亮

# 2. 标记

# 内置标记

# 外部标记

# 3.自定义容器 默认主题

# 4. 思维导图 & 流程图

# 方法一：

# 方法二：

# 方法三：

# 5.Demo演示框

# 方法一：

# 方法二：

# 6.其他

# 添加摘要

# 在线编辑文章

# 代码块选项卡

# front matter配置

# idebar

# article

# comment

# editLink

# author

# sticky (置顶)

# 目录页配置

# 3.自定义容器默认主题