commit
468128bac6
GPG Key ID:
794FF55A0B3D0992
44 changed files with 15586 additions and 0 deletions
@ -0,0 +1,3 @@ |
|||||||
|
node_modules |
||||||
|
/.vuepress/.cache |
||||||
|
/.vuepress/.temp |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
import { defineHopeConfig } from "vuepress-theme-hope"; |
||||||
|
import themeConfig from "./themeConfig"; |
||||||
|
|
||||||
|
export default defineHopeConfig({ |
||||||
|
base: "/", |
||||||
|
|
||||||
|
dest: "./dist", |
||||||
|
|
||||||
|
head: [ |
||||||
|
[ |
||||||
|
"link", |
||||||
|
{ |
||||||
|
rel: "stylesheet", |
||||||
|
href: "//at.alicdn.com/t/font_2410206_mfj6e1vbwo.css", |
||||||
|
}, |
||||||
|
], |
||||||
|
], |
||||||
|
|
||||||
|
locales: { |
||||||
|
// "/": {
|
||||||
|
// lang: "en-US",
|
||||||
|
// title: "Theme Demo",
|
||||||
|
// description: "A demo for vuepress-theme-hope",
|
||||||
|
// },
|
||||||
|
"/": { |
||||||
|
lang: "zh-CN", |
||||||
|
title: "西安交通大学电信科协-博客", |
||||||
|
description: "Blog of XJTU STEI", |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
themeConfig, |
||||||
|
}); |
||||||
@ -0,0 +1,52 @@ |
|||||||
|
import { defineNavbarConfig } from "vuepress-theme-hope"; |
||||||
|
|
||||||
|
export const zh = defineNavbarConfig([ |
||||||
|
"/", |
||||||
|
"/home", |
||||||
|
{ text: "使用指南", icon: "creative", link: "/guide/" }, |
||||||
|
{ |
||||||
|
text: "博文", |
||||||
|
icon: "edit", |
||||||
|
prefix: "/posts/", |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
text: "文章 1-4", |
||||||
|
icon: "edit", |
||||||
|
prefix: "article/", |
||||||
|
children: [ |
||||||
|
{ text: "文章 1", icon: "edit", link: "article1" }, |
||||||
|
{ text: "文章 2", icon: "edit", link: "article2" }, |
||||||
|
"article3", |
||||||
|
"article4", |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "文章 5-12", |
||||||
|
icon: "edit", |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
text: "文章 5", |
||||||
|
icon: "edit", |
||||||
|
link: "article/article5", |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "文章 6", |
||||||
|
icon: "edit", |
||||||
|
link: "article/article6", |
||||||
|
}, |
||||||
|
"article/article7", |
||||||
|
"article/article8", |
||||||
|
], |
||||||
|
}, |
||||||
|
{ text: "文章 9", icon: "edit", link: "article9" }, |
||||||
|
{ text: "文章 10", icon: "edit", link: "article10" }, |
||||||
|
"article11", |
||||||
|
"article12", |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "主题文档", |
||||||
|
icon: "note", |
||||||
|
link: "https://vuepress-theme-hope.github.io/v2/zh/", |
||||||
|
}, |
||||||
|
]); |
||||||
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 92 KiB |
@ -0,0 +1,49 @@ |
|||||||
|
import { defineSidebarConfig } from "vuepress-theme-hope"; |
||||||
|
|
||||||
|
export const en = defineSidebarConfig({ |
||||||
|
"/": [ |
||||||
|
"", |
||||||
|
"home", |
||||||
|
"slide", |
||||||
|
{ |
||||||
|
icon: "creative", |
||||||
|
text: "Guide", |
||||||
|
collapsable: true, |
||||||
|
prefix: "guide/", |
||||||
|
link: "guide/", |
||||||
|
children: ["page", "markdown", "disable", "encrypt"], |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "Articles", |
||||||
|
icon: "note", |
||||||
|
prefix: "posts/", |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
text: "Articles 1-4", |
||||||
|
icon: "note", |
||||||
|
collapsable: true, |
||||||
|
prefix: "article/", |
||||||
|
children: ["article1", "article2", "article3", "article4"], |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "Articles 5-12", |
||||||
|
icon: "note", |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
text: "Articles 5-8", |
||||||
|
icon: "note", |
||||||
|
collapsable: true, |
||||||
|
prefix: "article/", |
||||||
|
children: ["article5", "article6", "article7", "article8"], |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "Articles 9-12", |
||||||
|
icon: "note", |
||||||
|
children: ["article9", "article10", "article11", "article12"], |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
@ -0,0 +1,2 @@ |
|||||||
|
export * from "./en"; |
||||||
|
export * from "./zh"; |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
import { defineSidebarConfig } from "vuepress-theme-hope"; |
||||||
|
|
||||||
|
export const zh = defineSidebarConfig({ |
||||||
|
"/": [ |
||||||
|
"", |
||||||
|
"home", |
||||||
|
"slide", |
||||||
|
{ |
||||||
|
text: "如何使用", |
||||||
|
icon: "creative", |
||||||
|
prefix: "guide/", |
||||||
|
children: ["", "page", "markdown", "disable", "encrypt"], |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "文章", |
||||||
|
icon: "note", |
||||||
|
prefix: "posts/", |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
text: "文章 1-4", |
||||||
|
icon: "note", |
||||||
|
collapsable: true, |
||||||
|
prefix: "article/", |
||||||
|
children: ["article1", "article2", "article3", "article4"], |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "文章 5-12", |
||||||
|
icon: "note", |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
text: "文章 5-8", |
||||||
|
icon: "note", |
||||||
|
collapsable: true, |
||||||
|
prefix: "article/", |
||||||
|
children: ["article5", "article6", "article7", "article8"], |
||||||
|
}, |
||||||
|
{ |
||||||
|
text: "文章 9-12", |
||||||
|
icon: "note", |
||||||
|
children: ["article9", "article10", "article11", "article12"], |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
@ -0,0 +1,186 @@ |
|||||||
|
import { defineThemeConfig } from "vuepress-theme-hope"; |
||||||
|
import * as navbar from "./navbar"; |
||||||
|
import * as sidebar from "./sidebar"; |
||||||
|
|
||||||
|
export default defineThemeConfig({ |
||||||
|
hostname: "https://vuepress-theme-hope-v2-demo.mrhope.site", |
||||||
|
|
||||||
|
author: { |
||||||
|
name: "Mr.Hope", |
||||||
|
url: "https://mrhope.site", |
||||||
|
}, |
||||||
|
|
||||||
|
iconPrefix: "iconfont icon-", |
||||||
|
|
||||||
|
logo: "/logo.svg", |
||||||
|
|
||||||
|
repo: "https://github.com/vuepress-theme-hope/vuepress-theme-hope", |
||||||
|
|
||||||
|
docsDir: "demo/src", |
||||||
|
|
||||||
|
blog: { |
||||||
|
medias: { |
||||||
|
Baidu: "https://example.com", |
||||||
|
Bitbucket: "https://example.com", |
||||||
|
Dingding: "https://example.com", |
||||||
|
Discord: "https://example.com", |
||||||
|
Dribbble: "https://example.com", |
||||||
|
Email: "https://example.com", |
||||||
|
Evernote: "https://example.com", |
||||||
|
Facebook: "https://example.com", |
||||||
|
Flipboard: "https://example.com", |
||||||
|
Gitee: "https://example.com", |
||||||
|
GitHub: "https://example.com", |
||||||
|
Gitlab: "https://example.com", |
||||||
|
Gmail: "https://example.com", |
||||||
|
Instagram: "https://example.com", |
||||||
|
Lines: "https://example.com", |
||||||
|
Linkedin: "https://example.com", |
||||||
|
Pinterest: "https://example.com", |
||||||
|
Pocket: "https://example.com", |
||||||
|
QQ: "https://example.com", |
||||||
|
Qzone: "https://example.com", |
||||||
|
Reddit: "https://example.com", |
||||||
|
Rss: "https://example.com", |
||||||
|
Steam: "https://example.com", |
||||||
|
Twitter: "https://example.com", |
||||||
|
Wechat: "https://example.com", |
||||||
|
Weibo: "https://example.com", |
||||||
|
Whatsapp: "https://example.com", |
||||||
|
Youtube: "https://example.com", |
||||||
|
Zhihu: "https://example.com", |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
locales: { |
||||||
|
// "/": {
|
||||||
|
// // navbar
|
||||||
|
// navbar: navbar.en,
|
||||||
|
|
||||||
|
// // sidebar
|
||||||
|
// sidebar: sidebar.en,
|
||||||
|
|
||||||
|
// footer: "Default footer",
|
||||||
|
|
||||||
|
// displayFooter: true,
|
||||||
|
|
||||||
|
// blog: {
|
||||||
|
// description: "A FrontEnd programmer",
|
||||||
|
// intro: "/intro.html",
|
||||||
|
// },
|
||||||
|
|
||||||
|
// metaLocales: {
|
||||||
|
// editLink: "Edit this page on GitHub",
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
|
||||||
|
/** |
||||||
|
* Chinese locale config |
||||||
|
*/ |
||||||
|
"/": { |
||||||
|
// navbar
|
||||||
|
navbar: navbar.zh, |
||||||
|
|
||||||
|
// sidebar
|
||||||
|
sidebar: sidebar.zh, |
||||||
|
|
||||||
|
footer: "默认页脚", |
||||||
|
|
||||||
|
displayFooter: true, |
||||||
|
|
||||||
|
blog: { |
||||||
|
description: "一个前端开发者", |
||||||
|
intro: "/intro.html", |
||||||
|
}, |
||||||
|
|
||||||
|
// page meta
|
||||||
|
metaLocales: { |
||||||
|
editLink: "在 GitHub 上编辑此页", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
encrypt: { |
||||||
|
config: { |
||||||
|
"/guide/encrypt.html": ["1234"], |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
plugins: { |
||||||
|
blog: { |
||||||
|
autoExcerpt: true, |
||||||
|
}, |
||||||
|
|
||||||
|
// comment: {
|
||||||
|
// type: "waline",
|
||||||
|
// serverURL: "https://vuepress-theme-hope-comment.vercel.app",
|
||||||
|
// },
|
||||||
|
|
||||||
|
mdEnhance: { |
||||||
|
enableAll: true, |
||||||
|
presentation: { |
||||||
|
plugins: ["highlight", "math", "search", "notes", "zoom"], |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
pwa: { |
||||||
|
favicon: "/favicon.ico", |
||||||
|
cachePic: true, |
||||||
|
apple: { |
||||||
|
icon: "/assets/icon/apple-icon-152.png", |
||||||
|
statusBarColor: "black", |
||||||
|
}, |
||||||
|
msTile: { |
||||||
|
image: "/assets/icon/ms-icon-144.png", |
||||||
|
color: "#ffffff", |
||||||
|
}, |
||||||
|
manifest: { |
||||||
|
icons: [ |
||||||
|
{ |
||||||
|
src: "/assets/icon/chrome-mask-512.png", |
||||||
|
sizes: "512x512", |
||||||
|
purpose: "maskable", |
||||||
|
type: "image/png", |
||||||
|
}, |
||||||
|
{ |
||||||
|
src: "/assets/icon/chrome-mask-192.png", |
||||||
|
sizes: "192x192", |
||||||
|
purpose: "maskable", |
||||||
|
type: "image/png", |
||||||
|
}, |
||||||
|
{ |
||||||
|
src: "/assets/icon/chrome-512.png", |
||||||
|
sizes: "512x512", |
||||||
|
type: "image/png", |
||||||
|
}, |
||||||
|
{ |
||||||
|
src: "/assets/icon/chrome-192.png", |
||||||
|
sizes: "192x192", |
||||||
|
type: "image/png", |
||||||
|
}, |
||||||
|
], |
||||||
|
shortcuts: [ |
||||||
|
// {
|
||||||
|
// name: "Guide",
|
||||||
|
// short_name: "Guide",
|
||||||
|
// url: "/guide/",
|
||||||
|
// icons: [
|
||||||
|
// {
|
||||||
|
// src: "/assets/icon/guide-maskable.png",
|
||||||
|
// sizes: "192x192",
|
||||||
|
// purpose: "maskable",
|
||||||
|
// type: "image/png",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// src: "/assets/icon/guide-monochrome.png",
|
||||||
|
// sizes: "192x192",
|
||||||
|
// purpose: "monochrome",
|
||||||
|
// type: "image/png",
|
||||||
|
// },
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
], |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
--- |
||||||
|
home: true |
||||||
|
layout: Blog |
||||||
|
icon: home |
||||||
|
title: 博客主页 |
||||||
|
heroImage: /logo.svg |
||||||
|
heroText: 你博客的名称 |
||||||
|
heroFullScreen: true |
||||||
|
tagline: 你可以在这里放置你的口号与标语 |
||||||
|
projects: |
||||||
|
- icon: project |
||||||
|
name: 项目名称 |
||||||
|
desc: 项目详细描述 |
||||||
|
link: https://你的项目链接 |
||||||
|
|
||||||
|
- icon: link |
||||||
|
name: 链接名称 |
||||||
|
desc: 链接详细描述 |
||||||
|
link: https://链接地址 |
||||||
|
|
||||||
|
- icon: book |
||||||
|
name: 书籍名称 |
||||||
|
desc: 书籍详细描述 |
||||||
|
link: https://你的书籍链接 |
||||||
|
|
||||||
|
- icon: article |
||||||
|
name: 文章名称 |
||||||
|
desc: 文章详细描述 |
||||||
|
link: https://你的文章链接 |
||||||
|
|
||||||
|
- icon: friend |
||||||
|
name: 伙伴名称 |
||||||
|
desc: 伙伴详细介绍 |
||||||
|
link: https://你的伙伴链接 |
||||||
|
|
||||||
|
- icon: /logo.svg |
||||||
|
name: 自定义项目 |
||||||
|
desc: 自定义详细介绍 |
||||||
|
link: https://你的自定义链接 |
||||||
|
|
||||||
|
footer: 自定义你的页脚文字 |
||||||
|
--- |
||||||
|
|
||||||
@ -0,0 +1,15 @@ |
|||||||
|
--- |
||||||
|
icon: creative |
||||||
|
category: |
||||||
|
- 使用指南 |
||||||
|
--- |
||||||
|
|
||||||
|
# 主要功能与配置演示 |
||||||
|
|
||||||
|
- [页面展示](page.md) |
||||||
|
|
||||||
|
- [Markdown 展示](markdown.md) |
||||||
|
|
||||||
|
- [禁用展示](disable.md) |
||||||
|
|
||||||
|
- [加密展示](encrypt.md) |
||||||
@ -0,0 +1,41 @@ |
|||||||
|
--- |
||||||
|
title: 组件禁用 |
||||||
|
icon: config |
||||||
|
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 --> |
||||||
|
|
||||||
|
本页面应当禁用了: |
||||||
|
|
||||||
|
- 导航栏 |
||||||
|
- 侧边栏 |
||||||
|
- 路径导航 |
||||||
|
- 页面信息 |
||||||
|
- 贡献者 |
||||||
|
- 编辑此页链接 |
||||||
|
- 更新时间 |
||||||
|
- 上一篇/下一篇 链接 |
||||||
|
- 评论 |
||||||
|
- 页脚 |
||||||
|
- 返回顶部按钮 |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
--- |
||||||
|
icon: lock |
||||||
|
category: |
||||||
|
- 使用指南 |
||||||
|
tag: |
||||||
|
- 文章加密 |
||||||
|
--- |
||||||
|
|
||||||
|
# 密码加密的文章 |
||||||
|
|
||||||
|
实际的文章内容。 |
||||||
|
|
||||||
|
段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字段落 1 文字。 |
||||||
|
|
||||||
|
段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字段落 2 文字。 |
||||||
@ -0,0 +1,302 @@ |
|||||||
|
--- |
||||||
|
icon: markdown |
||||||
|
title: Markdown 增强 |
||||||
|
category: |
||||||
|
- 使用指南 |
||||||
|
tag: |
||||||
|
- markdown |
||||||
|
--- |
||||||
|
|
||||||
|
VuePress 的每个文档页面都是由 Markdown 渲染而成。所以你需要通过在相应路径创建编写 Markdown 建立你的文档或博客页面。 |
||||||
|
|
||||||
|
<!-- more --> |
||||||
|
|
||||||
|
## Markdown 介绍 |
||||||
|
|
||||||
|
如果你是一个新手，还不会编写 Markdown，请先阅读 [Markdown 介绍](https://vuepress-theme-hope.github.io/v2/zh/basic/markdown/README.html) 和 [Markdown 演示](https://vuepress-theme-hope.github.io/v2/zh/basic/markdown/demo.html)。 |
||||||
|
|
||||||
|
::: info Frontmatter |
||||||
|
|
||||||
|
Frontmatter 是 VuePress 中很重要的一个概念，如果你不了解它，你需要阅读 [Frontmatter 介绍](https://vuepress-theme-hope.github.io/v2/zh/basic/vuepress/page.html#front-matter)。 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
## VuePress 扩展 |
||||||
|
|
||||||
|
为了丰富文档写作，VuePress 对 Markdown 语法进行了扩展。 |
||||||
|
|
||||||
|
关于这些扩展，请阅读 [VuePress 中的 Markdown 扩展](https://vuepress-theme-hope.github.io/v2/zh/basic/vuepress/markdown.html)。 |
||||||
|
|
||||||
|
## 主题扩展 |
||||||
|
|
||||||
|
### 一键启用 |
||||||
|
|
||||||
|
你可以设置 `themeconfig.plugins.htmlEnhance.enableAll` 启用 [md-enhance](https://vuepress-theme-hope.github.io/v2/md-enhance) 插件的所有功能。 |
||||||
|
|
||||||
|
```js {3-5} |
||||||
|
module.exports = { |
||||||
|
themeConfig: { |
||||||
|
plugins: { |
||||||
|
mdEnhance: { |
||||||
|
enableAll: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
``` |
||||||
|
|
||||||
|
### 自定义容器 |
||||||
|
|
||||||
|
::: v-pre |
||||||
|
|
||||||
|
安全的在 Markdown 中使用 {{ variable }}。 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
::: info 自定义标题 |
||||||
|
|
||||||
|
信息容器，包含 `代码` 与 [链接](#markdown)。 |
||||||
|
|
||||||
|
```js |
||||||
|
const a = 1; |
||||||
|
``` |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
::: tip 自定义标题 |
||||||
|
|
||||||
|
提示容器 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
::: warning 自定义标题 |
||||||
|
|
||||||
|
警告容器 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
::: danger 自定义标题 |
||||||
|
|
||||||
|
危险容器 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
::: details 自定义标题 |
||||||
|
|
||||||
|
详情容器 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
:::: details 代码 |
||||||
|
|
||||||
|
```md |
||||||
|
::: v-pre |
||||||
|
|
||||||
|
安全的在 Markdown 中使用 {{ variable }}。 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
::: info 自定义标题 |
||||||
|
|
||||||
|
信息容器 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
::: tip 自定义标题 |
||||||
|
|
||||||
|
提示容器 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
::: warning 自定义标题 |
||||||
|
|
||||||
|
警告容器 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
::: danger 自定义标题 |
||||||
|
|
||||||
|
危险容器 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
::: details 自定义标题 |
||||||
|
|
||||||
|
详情容器 |
||||||
|
|
||||||
|
::: |
||||||
|
``` |
||||||
|
|
||||||
|
:::: |
||||||
|
|
||||||
|
- [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/container.html) |
||||||
|
|
||||||
|
### 代码块 |
||||||
|
|
||||||
|
:::: code-group |
||||||
|
|
||||||
|
::: code-group-item yarn |
||||||
|
|
||||||
|
```bash |
||||||
|
yarn add -D vuepress-theme-hope |
||||||
|
``` |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
::: code-group-item npm:active |
||||||
|
|
||||||
|
```bash |
||||||
|
npm i -D vuepress-theme-hope |
||||||
|
``` |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
:::: |
||||||
|
|
||||||
|
- [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/code-group.html) |
||||||
|
|
||||||
|
### 自定义对齐 |
||||||
|
|
||||||
|
::: center |
||||||
|
|
||||||
|
我是居中的 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
::: right |
||||||
|
|
||||||
|
我在右对齐 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
- [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/align.html) |
||||||
|
|
||||||
|
### 上下角标 |
||||||
|
|
||||||
|
19^th^ H~2~O |
||||||
|
|
||||||
|
- [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/sup-sub.html) |
||||||
|
|
||||||
|
### 脚注 |
||||||
|
|
||||||
|
此文字有脚注[^first]. |
||||||
|
|
||||||
|
[^first]: 这是脚注内容 |
||||||
|
|
||||||
|
- [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/footnote.html) |
||||||
|
|
||||||
|
### 标记 |
||||||
|
|
||||||
|
你可以标记 ==重要的内容== 。 |
||||||
|
|
||||||
|
- [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/mark.html) |
||||||
|
|
||||||
|
### 任务列表 |
||||||
|
|
||||||
|
- [x] 计划 1 |
||||||
|
- [ ] 计划 2 |
||||||
|
|
||||||
|
- [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/tasklist.html) |
||||||
|
|
||||||
|
### 流程图 |
||||||
|
|
||||||
|
```flow |
||||||
|
cond=>condition: 是否执行操作? |
||||||
|
process=>operation: 操作 |
||||||
|
e=>end: 结束 |
||||||
|
|
||||||
|
cond(yes)->process->e |
||||||
|
cond(no)->e |
||||||
|
``` |
||||||
|
|
||||||
|
- [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/flowchart.html) |
||||||
|
|
||||||
|
## Mermaid |
||||||
|
|
||||||
|
```mermaid |
||||||
|
flowchart TB |
||||||
|
c1-->a2 |
||||||
|
subgraph one |
||||||
|
a1-->a2 |
||||||
|
end |
||||||
|
subgraph two |
||||||
|
b1-->b2 |
||||||
|
end |
||||||
|
subgraph three |
||||||
|
c1-->c2 |
||||||
|
end |
||||||
|
one --> two |
||||||
|
three --> two |
||||||
|
two --> c2 |
||||||
|
``` |
||||||
|
|
||||||
|
- [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/mermaid.html) |
||||||
|
|
||||||
|
### 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\} |
||||||
|
$$ |
||||||
|
|
||||||
|
- [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/tex.html) |
||||||
|
|
||||||
|
### 代码演示 |
||||||
|
|
||||||
|
::: demo 一个普通 Demo |
||||||
|
|
||||||
|
```html |
||||||
|
<h1>Mr.Hope</h1> |
||||||
|
<p><span id="very">十分</span> 帅</p> |
||||||
|
``` |
||||||
|
|
||||||
|
```js |
||||||
|
document.querySelector("#very").addEventListener("click", () => { |
||||||
|
alert("十分帅"); |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
```css |
||||||
|
span { |
||||||
|
color: red; |
||||||
|
} |
||||||
|
``` |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
- [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/demo.html) |
||||||
|
|
||||||
|
### 幻灯片 |
||||||
|
|
||||||
|
@slidestart |
||||||
|
|
||||||
|
## 幻灯片 1 |
||||||
|
|
||||||
|
一个有文字和 [链接](https://mrhope.site) 的段落 |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 幻灯片 2 |
||||||
|
|
||||||
|
- 项目 1 |
||||||
|
- 项目 2 |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 幻灯片 3.1 |
||||||
|
|
||||||
|
```js |
||||||
|
const a = 1; |
||||||
|
``` |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
## 幻灯片 3.2 |
||||||
|
|
||||||
|
$$ |
||||||
|
J(\theta_0,\theta_1) = \sum_{i=0} |
||||||
|
$$ |
||||||
|
|
||||||
|
@slideend |
||||||
|
|
||||||
|
- [查看详情](https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/presentation.html) |
||||||
@ -0,0 +1,60 @@ |
|||||||
|
--- |
||||||
|
# 这是页面的图标 |
||||||
|
icon: page |
||||||
|
# 这是文章的标题 |
||||||
|
title: 页面配置 |
||||||
|
# 设置作者 |
||||||
|
author: Ms.Hope |
||||||
|
# 设置写作时间 |
||||||
|
date: 2020-01-01 |
||||||
|
# 一个页面可以有多个分类 |
||||||
|
category: |
||||||
|
- 使用指南 |
||||||
|
# 一个页面可以有多个标签 |
||||||
|
tag: |
||||||
|
- 页面配置 |
||||||
|
- 使用指南 |
||||||
|
# 此页面会在文章列表置顶 |
||||||
|
sticky: true |
||||||
|
# 此页面会出现在首页的文章板块中 |
||||||
|
star: true |
||||||
|
# 你可以自定义页脚 |
||||||
|
footer: 这是测试显示的页脚 |
||||||
|
--- |
||||||
|
|
||||||
|
## 页面信息 |
||||||
|
|
||||||
|
你可以在 Markdown 的 Frontmatter 中设置页面信息。 |
||||||
|
|
||||||
|
- 作者设置为 Ms.Hope。 |
||||||
|
|
||||||
|
- 写作时间应为 2020 年 1 月 1 日 |
||||||
|
|
||||||
|
- 分类为 “使用指南” |
||||||
|
|
||||||
|
- 标签为 “页面配置” 和 “使用指南” |
||||||
|
|
||||||
|
## 页面内容 |
||||||
|
|
||||||
|
你可以自由在这里书写你的 Markdown。 |
||||||
|
|
||||||
|
::: tip |
||||||
|
|
||||||
|
- Markdown 文件夹的图片请使用相对链接 `./` 进行引用。 |
||||||
|
|
||||||
|
- `.vuepress/public` 文件夹的图片，请使用绝对链接 `/` 进行引用 |
||||||
|
|
||||||
|
::: |
||||||
|
|
||||||
|
主题包含了一个自定义徽章章可以使用: |
||||||
|
|
||||||
|
> 文字结尾应该有深蓝色的 徽章文字 徽章。 <Badge text="徽章文字" color="#242378" /> |
||||||
|
|
||||||
|
## 页面结构 |
||||||
|
|
||||||
|
此页面应当包含： |
||||||
|
|
||||||
|
- 返回顶部按钮 |
||||||
|
- 路径导航 |
||||||
|
- 评论 |
||||||
|
- 页脚 |
||||||
@ -0,0 +1,103 @@ |
|||||||
|
--- |
||||||
|
home: true |
||||||
|
icon: home |
||||||
|
title: 项目主页 |
||||||
|
heroImage: /logo.svg |
||||||
|
heroText: 项目名称 |
||||||
|
tagline: 你可以在这里放置或是整个项目的描述。 |
||||||
|
actions: |
||||||
|
- text: 使用指南 💡 |
||||||
|
link: /guide/ |
||||||
|
|
||||||
|
- text: 博客主页 🏠 |
||||||
|
link: / |
||||||
|
type: secondary |
||||||
|
|
||||||
|
features: |
||||||
|
- title: Markdown 增强 |
||||||
|
icon: markdown |
||||||
|
details: 新增文字对齐、上下角标、脚注、标记、任务列表、数学公式、流程图、图表与幻灯片支持 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/markdown/ |
||||||
|
|
||||||
|
- title: 幻灯片页面 |
||||||
|
icon: slides |
||||||
|
details: 添加幻灯片页面以显示您喜欢的内容 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/layout/slides |
||||||
|
|
||||||
|
- title: 布局增强 |
||||||
|
icon: layout |
||||||
|
details: 添加路径导航、页脚、改进的导航栏、改进的页面导航等。 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/layout/ |
||||||
|
|
||||||
|
- title: 浏览量与评论 |
||||||
|
icon: comment |
||||||
|
details: 配合 Waline 来开启阅读量统计与评论支持 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/feature/comment.html |
||||||
|
|
||||||
|
- title: 文章信息 |
||||||
|
icon: info |
||||||
|
details: 为你的文章添加作者、写作日期、预计阅读时间、字数统计等信息 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/feature/page-info.html |
||||||
|
|
||||||
|
- title: 博客支持 |
||||||
|
icon: blog |
||||||
|
details: 使用一些很棒的布局提供博客功能，通过文章的日期、标签和分类，自动生成文章、分类、标签与时间轴列表 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/blog/intro.html |
||||||
|
|
||||||
|
- title: 主题色切换 |
||||||
|
icon: palette |
||||||
|
details: 支持自定义主题色并允许用户在预设的主题颜色之间切换 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/interface/theme-color.html |
||||||
|
|
||||||
|
- title: 深色模式 |
||||||
|
icon: contrast |
||||||
|
details: 可以自由切换浅色模式与深色模式 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/interface/darkmode.html |
||||||
|
|
||||||
|
- title: 完整的无障碍支持 |
||||||
|
icon: contrast |
||||||
|
details: 为你的网站带来完整的无障碍支持 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/interface/accessibility.html |
||||||
|
|
||||||
|
- title: 文章加密 |
||||||
|
icon: lock |
||||||
|
details: 你可以为你的特定页面或特定目录进行加密，以便陌生人不能随意访问它们 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/feature/encrypt.html |
||||||
|
|
||||||
|
- title: 复制按钮 |
||||||
|
icon: lock |
||||||
|
details: 一键复制代码块中的代码 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/feature/copy-code.html |
||||||
|
|
||||||
|
- title: 图片预览 |
||||||
|
icon: pic |
||||||
|
details: 像相册一样允许你浏览、缩放并分享你的页面图片 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/feature/photo-swipe.html |
||||||
|
|
||||||
|
- title: SEO 增强 |
||||||
|
icon: config |
||||||
|
details: 将最终生成的网页针对搜索引擎进行优化。 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/advanced/seo.html |
||||||
|
|
||||||
|
- title: Sitemap |
||||||
|
icon: sitemap |
||||||
|
details: 自动为你的网站生成 Sitemap |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/advanced/sitemap.html |
||||||
|
|
||||||
|
- title: Feed 支持 |
||||||
|
icon: rss |
||||||
|
details: 生成你的 Feed，并通知你的用户订阅它 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/advanced/feed.html |
||||||
|
|
||||||
|
- title: PWA 支持 |
||||||
|
icon: mobile |
||||||
|
details: 让你的网站更像一个 APP |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/advanced/pwa.html |
||||||
|
|
||||||
|
- title: 更多新特性 |
||||||
|
icon: more |
||||||
|
details: 包括图标支持、全屏按钮、返回顶部按钮等 |
||||||
|
link: https://vuepress-theme-hope.github.io/v2/zh/guide/feature/ |
||||||
|
copyright: false |
||||||
|
footer: MIT Licensed | Copyright © 2019-present Mr.Hope |
||||||
|
--- |
||||||
@ -0,0 +1,7 @@ |
|||||||
|
--- |
||||||
|
icon: info |
||||||
|
--- |
||||||
|
|
||||||
|
# Intro Page |
||||||
|
|
||||||
|
Place your introducation and profile here. |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
{ |
||||||
|
"name": "stei-blog", |
||||||
|
"version": "2.0.0", |
||||||
|
"description": "Blog of XJTU STEI", |
||||||
|
"license": "MIT", |
||||||
|
"scripts": { |
||||||
|
"docs:build": "vuepress build .", |
||||||
|
"docs:clean-dev": "vuepress dev . --clean-cache", |
||||||
|
"docs:dev": "vuepress dev ." |
||||||
|
}, |
||||||
|
"devDependencies": { |
||||||
|
"vuepress": "^2.0.0-beta.36", |
||||||
|
"vuepress-theme-hope": "^2.0.0-alpha.41" |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
--- |
||||||
|
icon: edit |
||||||
|
date: 2022-01-01 |
||||||
|
category: |
||||||
|
- CategoryA |
||||||
|
tag: |
||||||
|
- tag A |
||||||
|
- tag B |
||||||
|
--- |
||||||
|
|
||||||
|
# 文章 1 |
||||||
|
|
||||||
|
## 标题 2 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
|
|
||||||
|
### 标题 3 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
--- |
||||||
|
icon: edit |
||||||
|
date: 2022-01-02 |
||||||
|
category: |
||||||
|
- CategoryA |
||||||
|
tag: |
||||||
|
- tag A |
||||||
|
- tag B |
||||||
|
star: true |
||||||
|
--- |
||||||
|
|
||||||
|
# 文章 2 |
||||||
|
|
||||||
|
## 标题 2 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
|
|
||||||
|
### 标题 3 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
--- |
||||||
|
icon: edit |
||||||
|
date: 2022-01-03 |
||||||
|
category: |
||||||
|
- CategoryA |
||||||
|
- CategoryB |
||||||
|
tag: |
||||||
|
- tag A |
||||||
|
- tag B |
||||||
|
--- |
||||||
|
|
||||||
|
# 文章 3 |
||||||
|
|
||||||
|
## 标题 2 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
|
|
||||||
|
### 标题 3 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
--- |
||||||
|
icon: edit |
||||||
|
date: 2022-01-04 |
||||||
|
category: |
||||||
|
- CategoryA |
||||||
|
- CategoryB |
||||||
|
tag: |
||||||
|
- tag A |
||||||
|
- tag B |
||||||
|
--- |
||||||
|
|
||||||
|
# 文章 4 |
||||||
|
|
||||||
|
## 标题 2 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
|
|
||||||
|
### 标题 3 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
--- |
||||||
|
icon: edit |
||||||
|
date: 2022-01-05 |
||||||
|
category: |
||||||
|
- CategoryA |
||||||
|
- CategoryB |
||||||
|
tag: |
||||||
|
- tag A |
||||||
|
- tag B |
||||||
|
--- |
||||||
|
|
||||||
|
# 文章 5 |
||||||
|
|
||||||
|
## 标题 2 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
|
|
||||||
|
### 标题 3 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
--- |
||||||
|
icon: edit |
||||||
|
date: 2022-01-06 |
||||||
|
category: |
||||||
|
- CategoryA |
||||||
|
- CategoryB |
||||||
|
tag: |
||||||
|
- tag A |
||||||
|
- tag B |
||||||
|
star: 10 |
||||||
|
--- |
||||||
|
|
||||||
|
# 文章 6 |
||||||
|
|
||||||
|
## 标题 2 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
|
|
||||||
|
### 标题 3 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
--- |
||||||
|
icon: edit |
||||||
|
date: 2022-01-07 |
||||||
|
category: |
||||||
|
- CategoryA |
||||||
|
- CategoryB |
||||||
|
tag: |
||||||
|
- tag A |
||||||
|
- tag B |
||||||
|
--- |
||||||
|
|
||||||
|
# 文章 7 |
||||||
|
|
||||||
|
## 标题 2 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
|
|
||||||
|
### 标题 3 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
--- |
||||||
|
icon: edit |
||||||
|
date: 2022-01-08 |
||||||
|
category: |
||||||
|
- CategoryA |
||||||
|
- CategoryB |
||||||
|
tag: |
||||||
|
- tag A |
||||||
|
- tag B |
||||||
|
--- |
||||||
|
|
||||||
|
# 文章 8 |
||||||
|
|
||||||
|
## 标题 2 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
|
|
||||||
|
### 标题 3 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
--- |
||||||
|
icon: edit |
||||||
|
date: 2022-01-10 |
||||||
|
category: |
||||||
|
- CategoryA |
||||||
|
- CategoryB |
||||||
|
tag: |
||||||
|
- tag A |
||||||
|
- tag B |
||||||
|
--- |
||||||
|
|
||||||
|
# 文章 10 |
||||||
|
|
||||||
|
## 标题 2 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
|
|
||||||
|
### 标题 3 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
--- |
||||||
|
icon: edit |
||||||
|
date: 2022-01-11 |
||||||
|
category: |
||||||
|
- CategoryA |
||||||
|
- CategoryB |
||||||
|
tag: |
||||||
|
- tag A |
||||||
|
- tag B |
||||||
|
--- |
||||||
|
|
||||||
|
# 文章 11 |
||||||
|
|
||||||
|
## 标题 2 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
|
|
||||||
|
### 标题 3 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
--- |
||||||
|
icon: edit |
||||||
|
date: 2022-01-12 |
||||||
|
category: |
||||||
|
- CategoryA |
||||||
|
- CategoryB |
||||||
|
tag: |
||||||
|
- tag A |
||||||
|
- tag B |
||||||
|
star: true |
||||||
|
--- |
||||||
|
|
||||||
|
# 文章 12 |
||||||
|
|
||||||
|
## 标题 2 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
|
|
||||||
|
### 标题 3 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
@ -0,0 +1,20 @@ |
|||||||
|
--- |
||||||
|
icon: edit |
||||||
|
date: 2022-01-09 |
||||||
|
category: |
||||||
|
- CategoryA |
||||||
|
- CategoryB |
||||||
|
tag: |
||||||
|
- tag A |
||||||
|
- tag B |
||||||
|
--- |
||||||
|
|
||||||
|
# 文章 9 |
||||||
|
|
||||||
|
## 标题 2 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
|
|
||||||
|
### 标题 3 |
||||||
|
|
||||||
|
这里是内容。 |
||||||
@ -0,0 +1,429 @@ |
|||||||
|
--- |
||||||
|
title: 幻灯片页 |
||||||
|
icon: slides |
||||||
|
layout: Slide |
||||||
|
--- |
||||||
|
|
||||||
|
<!-- markdownlint-disable MD024 MD033 --> |
||||||
|
|
||||||
|
@slidestart |
||||||
|
|
||||||
|
<!-- .slide: data-transition="slide" --> |
||||||
|
|
||||||
|
## 幻灯片演示 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
一个简单的幻灯片演示与各种小贴士。 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
> 作者 Mr.Hope. 请滚动鼠标滚轮进入下一页 |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
## 标注幻灯片 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
[👇](#/1/1) |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
## 标注幻灯片 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
使用 `---` 标注水平幻灯片 |
||||||
|
|
||||||
|
<!-- .element: class="fragment fade-in" --> |
||||||
|
|
||||||
|
在水平幻灯片中使用 `--` 分割垂直幻灯片 |
||||||
|
|
||||||
|
<!-- .element: class="fragment fade-in" --> |
||||||
|
|
||||||
|
使用 `<!-- .slide: ... -->` 在幻灯片上添加属性 |
||||||
|
|
||||||
|
<!-- .element: class="fragment fade-in" --> |
||||||
|
|
||||||
|
使用 `<!-- .element: ... -->` 在前一个 HTML 元素上添加属性 |
||||||
|
|
||||||
|
<!-- .element: class="fragment fade-in" --> |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
<!-- .slide: data-transition="slide" data-auto-animate --> |
||||||
|
|
||||||
|
## Markdown |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
你可以在幻灯片中使用 Markdown 语法的各种标记. |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## Markdown |
||||||
|
|
||||||
|
你可以在幻灯片中使用 Markdown 语法的各种标记. |
||||||
|
|
||||||
|
### 这是一个 H3 |
||||||
|
|
||||||
|
标题默认会自动转换为大写。 |
||||||
|
|
||||||
|
这是一个有着 **粗体**, _斜体_, ~~删除线~~ 文字并包含 [一个链接](https://mrhope.site) 的段落，并且它会自动换行。所以你无需担心它的长度。 |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## Markdown |
||||||
|
|
||||||
|
你可以在幻灯片中使用 Markdown 语法的各种标记. |
||||||
|
|
||||||
|
列表默认为 `inline-block` |
||||||
|
|
||||||
|
- 项目 |
||||||
|
- 项目 |
||||||
|
- 项目 |
||||||
|
|
||||||
|
1. 项目 1 |
||||||
|
1. 项目 2 |
||||||
|
1. 项目 3 |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## Markdown |
||||||
|
|
||||||
|
你可以在幻灯片中使用 Markdown 语法的各种标记. |
||||||
|
|
||||||
|
在你启用 `highlight` 插件后，代码块会自动高亮。 |
||||||
|
|
||||||
|
```js |
||||||
|
const a = 1; |
||||||
|
``` |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## Markdown |
||||||
|
|
||||||
|
你可以在幻灯片中使用 Markdown 语法的各种标记. |
||||||
|
|
||||||
|
在你启用 `math` 插件后，你也可以使用 TEX 格式使用数学公式。 |
||||||
|
|
||||||
|
$$ |
||||||
|
J(\theta_0,\theta_1) = \sum_{i=0} |
||||||
|
$$ |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## Markdown |
||||||
|
|
||||||
|
你可以在幻灯片中使用 Markdown 语法的各种标记. |
||||||
|
|
||||||
|
⚠**请注意**: 表格和分割线，以及所有不在 Markdown 标准语法中的内容均不受支持。 |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
<!-- .slide: data-transition="slide" data-auto-animate --> |
||||||
|
|
||||||
|
## 布局 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## 布局 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
👆 `r-fit-text` class 会让文字在不超出幻灯片范围的情况下尽可能大。 |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## 布局 |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
<!-- .element: class="r-stretch" --> |
||||||
|
|
||||||
|
👆 `r-stretch` class 帮助你控制注入图片或视频的大小，使它们填充满幻灯片垂直方向上的剩余空间。 |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate data-background-color="rgb(70, 70, 255)" --> |
||||||
|
|
||||||
|
## 布局 |
||||||
|
|
||||||
|
### 背景 |
||||||
|
|
||||||
|
你可以通过向特定幻灯片添加 `data-background` 属性自定义幻灯片背景. |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## 动画片段 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## 动画片段 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
动画片段用于高亮或显隐幻灯片中的元素。 |
||||||
|
|
||||||
|
你需要在元素上添加 `fragment` 和动画 class。 |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## 动画片段 |
||||||
|
|
||||||
|
### 动画 class |
||||||
|
|
||||||
|
- `fade-in` |
||||||
|
<!-- .element: class="fragment fade-in" --> |
||||||
|
|
||||||
|
- `fade-out` |
||||||
|
<!-- .element: class="fragment fade-out" --> |
||||||
|
|
||||||
|
- `fade-up` |
||||||
|
<!-- .element: class="fragment fade-up" --> |
||||||
|
|
||||||
|
<!-- list break --> |
||||||
|
|
||||||
|
- `fade-down` |
||||||
|
<!-- .element: class="fragment fade-down" --> |
||||||
|
|
||||||
|
- `fade-left` |
||||||
|
<!-- .element: class="fragment fade-left" --> |
||||||
|
|
||||||
|
- `fade-right` |
||||||
|
<!-- .element: class="fragment fade-right" --> |
||||||
|
|
||||||
|
<!-- list break --> |
||||||
|
|
||||||
|
- `fade-in-then-out` |
||||||
|
<!-- .element: class="fragment fade-in-then-out" --> |
||||||
|
|
||||||
|
- `fade-in-then-semi-out` |
||||||
|
<!-- .element: class="fragment fade-in-then-semi-out" --> |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## 动画片段 |
||||||
|
|
||||||
|
### 动画 class |
||||||
|
|
||||||
|
- `grow` |
||||||
|
<!-- .element: class="fragment grow" --> |
||||||
|
|
||||||
|
- `shrink` |
||||||
|
<!-- .element: class="fragment shrink" --> |
||||||
|
|
||||||
|
- `strike` |
||||||
|
<!-- .element: class="fragment strike" --> |
||||||
|
|
||||||
|
<!-- list break --> |
||||||
|
|
||||||
|
- `highlight-red` |
||||||
|
<!-- .element: class="fragment highlight-red" --> |
||||||
|
|
||||||
|
- `highlight-green` |
||||||
|
<!-- .element: class="fragment highlight-green" --> |
||||||
|
|
||||||
|
- `highlight-blue` |
||||||
|
<!-- .element: class="fragment highlight-blue" --> |
||||||
|
|
||||||
|
<!-- list break --> |
||||||
|
|
||||||
|
- `highlight-current-red` |
||||||
|
<!-- .element: class="fragment highlight-current-red" --> |
||||||
|
|
||||||
|
- `highlight-current-green` |
||||||
|
<!-- .element: class="fragment highlight-current-green" --> |
||||||
|
|
||||||
|
- `highlight-current-blue` |
||||||
|
<!-- .element: class="fragment highlight-current-blue" --> |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## 动画片段 |
||||||
|
|
||||||
|
### 多个动画片段 |
||||||
|
|
||||||
|
你可以按照顺序包裹一个 HTML 元素使其拥有多个动画片段 |
||||||
|
|
||||||
|
<span class="fragment fade-in"> |
||||||
|
<span class="fragment highlight-red"> |
||||||
|
<span class="fragment fade-out"> |
||||||
|
渐入 > 变红 > 渐出 |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
</span> |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## 动画片段 |
||||||
|
|
||||||
|
### 顺序 |
||||||
|
|
||||||
|
你可以使用 `data-fragment-index` 属性改变元素的动画顺序。 |
||||||
|
|
||||||
|
不同元素可以有相同的动画顺序。 |
||||||
|
|
||||||
|
- 最后显示 |
||||||
|
<!-- .element: class="fragment" data-fragment-index="3"--> |
||||||
|
|
||||||
|
- 第二个显示 |
||||||
|
<!-- .element: class="fragment" data-fragment-index="2"--> |
||||||
|
|
||||||
|
<!-- list break --> |
||||||
|
|
||||||
|
- 第一个显示 |
||||||
|
<!-- .element: class="fragment" data-fragment-index="1"--> |
||||||
|
|
||||||
|
- 第二个显示 |
||||||
|
<!-- .element: class="fragment" data-fragment-index="2"--> |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
<!-- .slide: data-transition="slide" data-auto-animate --> |
||||||
|
|
||||||
|
## 渐变 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-transition="slide" data-auto-animate --> |
||||||
|
|
||||||
|
## 渐变 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
Transition 可以通过配置中的 `transition` 选项全局设置，也可以通过在特定幻灯片添加 `data-transition` 属性局部设置. |
||||||
|
|
||||||
|
可能的值: |
||||||
|
|
||||||
|
- none |
||||||
|
- fade |
||||||
|
- slide |
||||||
|
|
||||||
|
<!-- list break --> |
||||||
|
|
||||||
|
- convex |
||||||
|
- concave |
||||||
|
- zoom |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-auto-animate --> |
||||||
|
|
||||||
|
## 渐变 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
### 过渡动画 |
||||||
|
|
||||||
|
你可以在相邻的幻灯片上添加 `data-auto-animate` 使相同的 HTML 元素产生过渡动画效果。 |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
<!-- .slide: data-transition="slide" data-auto-animate --> |
||||||
|
|
||||||
|
## 功能 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-transition="slide" data-auto-animate --> |
||||||
|
|
||||||
|
## 功能 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
### 代码 |
||||||
|
|
||||||
|
通过启用 `highlight` 插件，你可以对代码块进行高亮。 |
||||||
|
|
||||||
|
你可以使用 `[a-b|c-d]` 语法来分布高亮特定行。 |
||||||
|
|
||||||
|
```js [1-2|3|4] |
||||||
|
let a = 1; |
||||||
|
let b = 2; |
||||||
|
let c = (x) => 1 + 2 + x; |
||||||
|
c(3); |
||||||
|
``` |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-transition="slide" data-auto-animate --> |
||||||
|
|
||||||
|
## 功能 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
### 预览模式 |
||||||
|
|
||||||
|
按下 `Esc` 或 `O` 即可在幻灯片获得焦点时进入预览模式。 |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-transition="slide" data-auto-animate --> |
||||||
|
|
||||||
|
## 功能 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
### 全屏模式 |
||||||
|
|
||||||
|
按下 `F` 或 `F11` 即可在幻灯片获得焦点时进入全屏模式。 |
||||||
|
|
||||||
|
-- |
||||||
|
|
||||||
|
<!-- .slide: data-transition="slide" data-auto-animate --> |
||||||
|
|
||||||
|
## 功能 |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
### 缩放 |
||||||
|
|
||||||
|
按下 `alt` (Linux 上使用 `ctrl`) 的同时点击幻灯片的任何元素，即可以向此元素进行放大。 |
||||||
|
|
||||||
|
再次点击即可缩小。 |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
<!-- .element: class="r-fit-text" --> |
||||||
|
|
||||||
|
## 结束 |
||||||
|
|
||||||
|
@slideend |
||||||
Loading…
Reference in new issue