Vuepress 框架使用

布局

布局包括:

• 导航栏
• 侧边栏
• 页脚

同时每个页面包含:

• 路径导航
• 标题和页面信息
• TOC (文章标题列表)
• 贡献者、更新时间等页面元信息
• 评论

主题也带有以下元素:

• 夜间模式按钮
• 返回顶部按钮
• 打印按钮

你可以在主题选项和页面的 frontmatter 中自定义它们。

Markdown

VuePress 主要从 Markdown 文件生成页面。因此，你可以使用它轻松生成文档或博客站点。

你需要创建并编写 Markdown，以便 VuePress 可以根据文件结构将它们转换为不同的页面。

Markdown 介绍

如果你是一个新手，还不会编写 Markdown，请先阅读 Markdown 介绍 和 Markdown 演示。

Markdown 配置

VuePress 通过 Frontmatter 为每个 Markdown 页面引入配置。

Frontmatter

Frontmatter 是 VuePress 中很重要的一个概念，请阅读 Frontmatter 介绍 了解详情。

Markdown 扩展

VuePress 会使用 markdown-it 来解析 Markdown 内容，因此可以借助于 markdown-it 插件来实现 语法扩展 。

VuePress 扩展

为了丰富文档写作，VuePress 对 Markdown 语法进行了扩展。

关于这些扩展，请阅读 VuePress 中的 Markdown 扩展。

主题扩展

通过 VuePress 插件，主题扩展了更多 Markdown 语法，提供更加丰富的写作功能。

选项卡

apple

Apple

banana

Banana

orange

Orange

• 查看详情

脚注

此文字有脚注^[1].

• 查看详情

导入文件

• 查看详情

TeX 语法

$$
\frac {\partial^r} {\partial \omega^r} \left(\frac {y^{\omega}} {\omega}\right)
= \left(\frac {y^{\omega}} {\omega}\right) \left{(\log y)^r + \sum_{i=1}^r \frac {(-1)^i r \cdots (r-i+1) (\log y)^{r-i}} {\omega^i} \right}
$$

• 查看详情

任务列表

• 计划 1
• 计划 2

查看详情

图片增强

支持为图片设置颜色模式和大小。

• 查看详情

上下角标

19^th H₂O

• 查看详情

组件

Mr.Hope

---

Where there is light, there is hope

• 查看详情

提示容器

安全的在 Markdown 中使用 {{ variable }}。

自定义标题

信息容器，包含 代码 与 链接。

const a = 1;

自定义标题

提示容器

自定义标题

警告容器

自定义标题

危险容器

自定义标题

详情容器

• GitHub 警示
• 提示框

自定义对齐

我是居中的

我在右对齐

• 查看详情

属性支持

一个拥有 ID 的 单词。

• 查看详情

标记

你可以标记 重要的内容 。

• 查看详情

剧透

VuePress Theme Hope 十分强大.

• 查看详情

样式化

向 Mr.Hope 捐赠一杯咖啡。 Recommended

• 查看详情

图表

• 查看详情

ECharts

• 查看详情

流程图

• 查看详情

MarkMap

• 查看详情

Mermaid

• 查看详情

PlantUML

• View Detail

代码块

pnpm

pnpm add -D vuepress-theme-hope

yarn

yarn add -D vuepress-theme-hope

npm

npm i -D vuepress-theme-hope

• 查看详情

代码演示

• 查看详情

交互演示

• 查看详情

Kotlin 交互演示

• 查看详情

Sandpack 交互演示

• 查看详情

Vue 交互演示

• 查看详情

幻灯片

• 查看详情

布局与功能禁用

---
title: 布局与功能禁用
icon: gears
order: 4
category:
  - 使用指南
tag:
  - 禁用

navbar: false
sidebar: false

breadcrumb: false
pageInfo: false
contributors: false
editLink: false
lastUpdated: false
prev: false
next: false
comment: false
footer: false

backtotop: false

---

你可以通过设置页面的 Frontmatter，在页面禁用功能与布局。

<!-- more -->

本页面就是一个示例，禁用了如下功能:

- 导航栏
- 侧边栏
- 路径导航
- 页面信息
- 贡献者
- 编辑此页链接
- 更新时间
- 上一篇/下一篇 链接
- 评论
- 页脚
- 返回顶部按钮

加密

---
icon: lock
category:
  - 使用指南
tag:
  - 加密

---

# 密码加密的文章

实际的文章内容。

部署

无二级地址

import { defineUserConfig } from "vuepress";

import theme from "./theme.js";

export default defineUserConfig({
  base: "/",

  lang: "zh-CN",
  title: "Yanger's Blog",
  description: "阿阳妙妙屋",
  theme,
});

自动部署脚本

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd src/.vuepress/dist

# 如果是发布到自定义域名
echo 'blog.982345.xyz' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io 
git push -f https://github.com/Cunyanger/Cunyanger.github.io.git master:gh-pages

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f https://github.com/Cunyanger/blog.git master:gh-pages
echo 继续运行
pause

---

1. 这是脚注内容 ↩︎