commit
468128bac6
GPG Key ID:
794FF55A0B3D0992
44 changed files with 15586 additions and 0 deletions
@ -0,0 +1,3 @@
@@ -0,0 +1,3 @@
|
||||
node_modules |
||||
/.vuepress/.cache |
||||
/.vuepress/.temp |
||||
@ -0,0 +1,33 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -0,0 +1,2 @@
|
||||
export * from "./en"; |
||||
export * from "./zh"; |
||||
@ -0,0 +1,47 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -0,0 +1,15 @@
|
||||
--- |
||||
icon: creative |
||||
category: |
||||
- 使用指南 |
||||
--- |
||||
|
||||
# 主要功能与配置演示 |
||||
|
||||
- [页面展示](page.md) |
||||
|
||||
- [Markdown 展示](markdown.md) |
||||
|
||||
- [禁用展示](disable.md) |
||||
|
||||
- [加密展示](encrypt.md) |
||||
@ -0,0 +1,41 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -0,0 +1,7 @@
|
||||
--- |
||||
icon: info |
||||
--- |
||||
|
||||
# Intro Page |
||||
|
||||
Place your introducation and profile here. |
||||
@ -0,0 +1,15 @@
@@ -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 @@
@@ -0,0 +1,19 @@
|
||||
--- |
||||
icon: edit |
||||
date: 2022-01-01 |
||||
category: |
||||
- CategoryA |
||||
tag: |
||||
- tag A |
||||
- tag B |
||||
--- |
||||
|
||||
# 文章 1 |
||||
|
||||
## 标题 2 |
||||
|
||||
这里是内容。 |
||||
|
||||
### 标题 3 |
||||
|
||||
这里是内容。 |
||||
@ -0,0 +1,20 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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