如何让你的笔记更有表现力

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

::: note Markdown的基本语法就不再重复啦 (对Markdown不了解的可以看 这里), 下面将介绍一些可以在本主题Markdown中使用的骚操作~ :::

1. 文本高亮

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

  1. Vdoing是一款简洁高效的 <mark>知识管理&博客</mark> 主题

Vdoing是一款简洁高效的 知识管理&博客 主题

2. 标记

内置标记

主题内置的Badge组件，直接在 Markdown 文件中使用

  1. <Badge text="beta" type="warning"/>
  2. <Badge text="Vdoing主题"/>

外部标记

使用 shields 生成标记，在Markdown中使用

  1. ![npm](/uploads/projects/vuepress-theme-vdoing-doc/d56ee1f43453112b5476d166a3ea7232.svg)
  2. ![star](/uploads/projects/vuepress-theme-vdoing-doc/aeb3c741447459099e21b43a16d29b36.svg)

npm star

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

3. 折叠列表

主题内置的容器，直接在 Markdown 文件中使用

  1. ::: details
  2. 这是一个详情块
  3. ```js
  4. console.log('这是一个详情块')
  5. ```
  6. :::

::: details 这是一个详情块

  1. console.log('这是一个详情块')

:::

更多：Markdown 容器

4. 思维导图 & 流程图

方法一：

  1. 使用Markmap生成思维导图html文件
  2. 将html文件放在docs/.vuepress/public/markmap/
  3. 通过<iframe>插入到Markdown
  1.   <iframe :src="$withBase('/markmap/01.html')" width="100%" height="400" frameborder="0" scrolling="No" leftmargin="0" topmargin="0"></iframe>

方法二：

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

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

方法三：

使用流程图插件：

5.Demo演示框

方法一：

  1. 安装 vuepress-plugin-demo-block或其他同类插件，使用方法看插件文档
  2. 在.vuepress/config.js配置插件
  3. Markdown中使用

同类插件：vuepress-plugin-demo-container

::: demo [vanilla]

  1. <html>
  2.   <div class="animationBox">
  3.     <div class="rotate">旋转动画1</div>
  4.     <div class="play">
  5.       <div class="img">旋转动画2</div>
  6.       <span><p class="p2"></p></span>
  7.       <span><p></p></span>
  8.       <span><p></p></span>
  9.       <span><p class="p2"></p></span>
  10.     </div>
  11.     <div class="elasticity">弹性动画</div>
  12.     <div class="elasticity2">曲线弹性</div>
  13.   </div>
  14. </html>
  16. <style>
  17.   .animationBox{overflow: hidden;}
  18.   .animationBox>div{
  19.     width: 100px;height: 100px;background: #eee;border-radius: 50%;text-align: center;line-height: 100px;margin: 30px;float:left;
  20.   }
  21.   .rotate{
  22.     animation: rotate 5s linear infinite
  23.   }
  24.   .rotate:hover{ animation-play-state: paused}
  25.   @keyframes rotate {
  26.     0%{transform: rotate(0);}
  27.   100%{transform: rotate(360deg);}
  28.   }
  29.   .animationBox>.play {
  30.     position: relative;
  31.     margin: 50px 30px;
  32.     background:none;
  33.   }
  34.   .play .img{
  35.     position: absolute;
  36.     top: 0;
  37.     left:0;
  38.     z-index: 1;
  39.     width: 100px;height: 100px; background: #eee;
  40.     border-radius: 50%;
  42.     animation: rotate 5s linear infinite
  43.   }
  44.   .play span {
  45.     position: absolute;
  46.     top: 1px;
  47.     left:1px;
  48.     z-index: 0;
  49.     display: block;
  50.     width: 96px;
  51.     height: 96px;
  52.     border: 1px solid #999;
  53.     border-radius: 50%;
  54.   }
  55.   .play span p{display: block;width: 4px;height: 4px;background: #000;margin: -2px 0 0 50%;border-radius: 50%;opacity: 0.5;}
  56.   .play span .p2{margin: 50% 0 0 -2px;}
  57.   .play span{
  58.     animation: wave 5s linear infinite
  59.   }
  60.   .play>span:nth-child(3){
  61.     /* 延迟时间 */
  62.     animation-delay:1s;
  63.   }
  64.   .play>span:nth-child(4){
  65.     animation-delay:2.2s;
  66.   }
  67.   .play>span:nth-child(5){
  68.     animation-delay:3.8s;
  69.   }
  71.   @keyframes wave {
  72.     0%
  73.     {
  74.       transform:scale(1) rotate(360deg);
  75.       opacity: 0.8;
  76.     }
  77.   100%
  78.     {
  79.       transform:scale(1.8) rotate(0deg);
  80.       opacity: 0;
  81.     }
  82.   }
  85.   .elasticity{
  86.     animation: elasticity 1s linear 2s infinite
  87.   }
  89.   @keyframes elasticity{
  90.     0%{
  91.       transform: scale(0);
  92.     }
  93.     60%{
  94.       transform: scale(1.1);
  95.     }
  96.     90%{
  97.       transform: scale(1);
  98.     }
  99.   }
  101.   .elasticity2{
  102.     animation: elasticity2 1s cubic-bezier(.39,.62,.74,1.39) 2s infinite
  103.   }
  104.   @keyframes elasticity2{
  105.     0%{
  106.       transform: scale(0);
  107.     }
  108.     90%{
  109.       transform: scale(1);
  110.     }
  111.   }
  112. </style>

:::

方法二：

嵌入codepen

  1. <iframe height="400" style="width: 100%;" scrolling="no" title="【CSS：行为】使用:hover和attr()定制悬浮提示" src="https://codepen.io/xugaoyi/embed/vYNKNaq?height=400&theme-id=light&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
  2.   See the Pen <a href='https://codepen.io/xugaoyi/pen/vYNKNaq'>【CSS：行为】使用:hover和attr()定制悬浮提示</a> by xugaoyi
  3.   (<a href='https://codepen.io/xugaoyi'>@xugaoyi</a>) on <a href='https://codepen.io'>CodePen</a>.
  4. </iframe>

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