Blog使用笔记

Megestus2023年12月1日VuepressMarkdown

提示容器

VuePress 提示容器 https://theme-hope.vuejs.press/zh/guide/markdown/stylize/hint.html

important info note tip warning caution details

重要

重要容器。

自定义标题

一个有 代码 和链接的注释容器。

const a = 1;

自定义信息

::: important
重要容器。
:::

升级版本

升级主题和 VuePress 版本，请执行以下命令:

pnpm

pnpm dlx vp-update

yarn

yarn dlx vp-update

npm

npx vp-update

导入文件内容

使用导入文件。

内部跳转

MariaDB数据库+Adminer轻量数据库管理工具

[MariaDB数据库+Adminer轻量数据库管理工具](/server/docker/mariadb.md#创建数据库)

主题-内置 Markdown 拓展

引用符

脚注 1 链接^[1]。

脚注 2 链接^[2]。

行内的脚注^[3] 定义。

重复的页脚定义^[2:1]。

脚注 1 链接[^first]。

脚注 2 链接[^second]。

行内的脚注^[行内脚注文本] 定义。

重复的页脚定义[^second]。

[^first]: 脚注 **可以包含特殊标记**

    也可以由多个段落组成

[^second]: 脚注文字。

左侧右侧分栏

左侧

右侧

图标

blog里使用的可见小图标，使用的是 fontawesome.com

在 Markdown 中添加图标

- <HopeIcon icon="fa-brands fa-markdown" color="blue" />
- <HopeIcon icon="iconfont alicon-unrealengine" />
- <HopeIcon icon="/assets/icon/Merger_boy_256.png" size="4rem" />
- <iconify-icon icon="simple-icons:mariadb"></iconify-icon>

自定义图标

根据主题中的图标支持里生成自己的 Iconfont 资源。
所碰到的一点问题-字符冲突，我们可以通过修改前缀解决问题。

并且图标名称和Font Class / Symbol最好一致。

每次添加完图标，都要更新代码，并在theme里修改。

这里要加上 https:// 注意

插入图片

<div class="image-preview">
  <img src="https://megestus-1309556466.cos.ap-shanghai.myqcloud.com/img/camera-1130731_1280.jpg" style="width: 50% !important;"/>
</div>

image-preview演示

如需要更改预览图片具体设置可以在类型中修改以下选项。

Code：点击查看

image-preview演示



<!-- markdownlint-disable -->

<div class="image-preview">
  <img src="//theme-hope-assets.vuejs.press/files/img/1.jpg" />
  <img src="//theme-hope-assets.vuejs.press/files/img/2.jpg" />
  <img src="//theme-hope-assets.vuejs.press/files/img/3.jpg" />
  <img src="//theme-hope-assets.vuejs.press/files/img/1.jpg" />
  <img src="//theme-hope-assets.vuejs.press/files/img/2.jpg" />
  <img src="//theme-hope-assets.vuejs.press/files/img/3.jpg" />
</div>

<style>
  .image-preview {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
  }

  .image-preview > img {
     box-sizing: border-box;
     width: 33.3% !important;
     padding: 9px;
     border-radius: 16px;
  }

  @media (max-width: 719px){
    .image-preview > img {
      width: 50% !important;
    }
  }

  @media (max-width: 419px){
    .image-preview > img {
      width: 100% !important;
    }
  }
</style>

<!-- markdownlint-restore -->

代码框

折叠代码框

Code-view

test

test

code:

<details>
  <summary> <Badge text="Code-view" color="#e0dd8b" /> </summary>


::: code-tabs#shell

@tab Shadow_Vs.shader

```code```

:::

</details>

常用代码框 --- 指南-代码块分组

标签1

标签2

嵌入代码文件

@[code mel](../xxx/xxx/xxx.mel)

隔行

隔两行

&ensp;

隔四行

&emsp;

隔细行

&thinsp;

搜索插件配置

正常可以根据下方链接配置
主题 - 搜索插件配置

根据配置教程-先安装插件，然后到theme的插件开启。

基础版本

npm i -D @vuepress/plugin-search@next

<!-- 自己改的格式不知道对不对-->
pnpm add -D vuepress-plugin-search-next

pro版本

pnpm add -D vuepress-plugin-search-pro

theme.ts

  navbarLayout: {
    start: ["Brand"],
    center: ["Links"],
    end: ["Language", "Repo", "Outlook", "Search"],
  },

导航栏配置

正常可以根据下方链接配置
主题 - 导航栏-外观弹窗

脚注 可以包含特殊标记
也可以由多个段落组成 ↩︎
脚注文字。 ↩︎ ↩︎
行内脚注文本 ↩︎