从服务器获取教程
This commit is contained in:
4
components.d.ts
vendored
4
components.d.ts
vendored
@@ -15,7 +15,6 @@ declare module 'vue' {
|
||||
NButton: typeof import('naive-ui')['NButton']
|
||||
NCard: typeof import('naive-ui')['NCard']
|
||||
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
|
||||
NDialog: typeof import('naive-ui')['NDialog']
|
||||
NDialogProvider: typeof import('naive-ui')['NDialogProvider']
|
||||
NDropdown: typeof import('naive-ui')['NDropdown']
|
||||
NFlex: typeof import('naive-ui')['NFlex']
|
||||
@@ -23,14 +22,11 @@ declare module 'vue' {
|
||||
NFormItem: typeof import('naive-ui')['NFormItem']
|
||||
NGi: typeof import('naive-ui')['NGi']
|
||||
NGrid: typeof import('naive-ui')['NGrid']
|
||||
NIcon: typeof import('naive-ui')['NIcon']
|
||||
NInput: typeof import('naive-ui')['NInput']
|
||||
NInputNu: typeof import('naive-ui')['NInputNu']
|
||||
NInputNumber: typeof import('naive-ui')['NInputNumber']
|
||||
NMessageProvider: typeof import('naive-ui')['NMessageProvider']
|
||||
NModal: typeof import('naive-ui')['NModal']
|
||||
NModalProvider: typeof import('naive-ui')['NModalProvider']
|
||||
NS: typeof import('naive-ui')['NS']
|
||||
NSplit: typeof import('naive-ui')['NSplit']
|
||||
NSwitch: typeof import('naive-ui')['NSwitch']
|
||||
NTabPane: typeof import('naive-ui')['NTabPane']
|
||||
|
||||
@@ -1,126 +0,0 @@
|
||||
# HTML 基本标签 —— 标题和段落
|
||||
|
||||
> [!NOTE]
|
||||
> 这是测试的版本
|
||||
|
||||
## 标题
|
||||
|
||||
`h1` 到 `h6`，一共六级标题。
|
||||
|
||||
```html
|
||||
<h1>标题 1</h1>
|
||||
<h2>标题 2</h2>
|
||||
<h3>标题 3</h3>
|
||||
<h4>标题 4</h4>
|
||||
<h5>标题 5</h5>
|
||||
<h6>标题 6</h6>
|
||||
```
|
||||
|
||||
给六个标题字体颜色换一下，注意：`color` 表示**字体颜色**。
|
||||
|
||||
```css
|
||||
h1 {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: green;
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: purple;
|
||||
}
|
||||
```
|
||||
|
||||
颜色的表示可以是英文，也可以是十六进制（注意前面有个井号），也可以是 RGB。
|
||||
|
||||
比如
|
||||
|
||||
```css
|
||||
h1 {
|
||||
color: #333333;
|
||||
}
|
||||
h2 {
|
||||
color: rgb(163, 174, 46);
|
||||
}
|
||||
```
|
||||
|
||||
## 段落
|
||||
|
||||
`p` 表示段落
|
||||
|
||||
```html
|
||||
<p>
|
||||
月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
|
||||
</p>
|
||||
```
|
||||
|
||||
用 `font-size` 改变字体大小，`line-height` 改变行高。注意单位是 px（像素）
|
||||
|
||||
```css
|
||||
p {
|
||||
font-size: 24px;
|
||||
line-height: 48px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
```
|
||||
|
||||
`text-indent: 2em;` 表示首行缩进 2 个字符（单位不是 px，而是 em）
|
||||
|
||||
## 任务
|
||||
|
||||
标题和段落的简单美化。
|
||||
|
||||
### 要求
|
||||
|
||||
完成下面《白鹭》散文（节选）的排版：
|
||||
|
||||
- 标题：使用 `h1` 标签，设置字号 32px，颜色黑色;
|
||||
- 每个段落：设置字号 28px，颜色（#333），行间距 40px，首行缩进两字符；
|
||||
|
||||
### 文字材料
|
||||
|
||||
白鹭
|
||||
|
||||
白鹭是一首精巧的诗。
|
||||
|
||||
色素的配合，身段的大小，一切都很适宜。
|
||||
|
||||
白鹤太大而嫌生硬，即如粉红的朱鹭或灰色的苍鹭，也觉得大了一些，而且太不寻常了。
|
||||
|
||||
然而白鹭却因为它的常见，而被人忘却了它的美。
|
||||
|
||||
那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。
|
||||
|
||||
### 效果
|
||||
```html preview
|
||||
<h1 style="font-size: 32px; color: black;">白鹭</h1>
|
||||
<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">白鹭是一首精巧的诗。</p>
|
||||
<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">色素的配合，身段的大小，一切都很适宜。</p>
|
||||
<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">白鹤太大而嫌生硬，即如粉红的朱鹭或灰色的苍鹭，也觉得大了一些，而且太不寻常了。</p>
|
||||
<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">然而白鹭却因为它的常见，而被人忘却了它的美。</p>
|
||||
<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。</p>
|
||||
```
|
||||
|
||||
## 总结
|
||||
### HTML
|
||||
标题：h1 到 h6
|
||||
段落：p
|
||||
|
||||
### CSS
|
||||
color 字体颜色
|
||||
font-size 字体大小
|
||||
line-height 行间距
|
||||
text-indent: 2em; 表示首行缩进2字符
|
||||
@@ -1 +0,0 @@
|
||||
未完待续...
|
||||
@@ -1 +0,0 @@
|
||||
全部结束
|
||||
@@ -73,4 +73,9 @@ export class Tutorial {
|
||||
const res = await http.get(`/tutorial/${display}`)
|
||||
return res.data
|
||||
}
|
||||
|
||||
static async listDisplay() {
|
||||
const res = await http.get("/tutorial/display")
|
||||
return res.data
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,10 +4,10 @@
|
||||
<n-flex align="center">
|
||||
<Icon icon="twemoji:open-book" :width="20"></Icon>
|
||||
<n-text class="preview">教程(测试版)</n-text>
|
||||
<n-button text @click="prev" :disabled="step === '01'">
|
||||
<n-button text @click="prev" :disabled="prevDisabled">
|
||||
<Icon :width="24" icon="pepicons-pencil:arrow-left"></Icon>
|
||||
</n-button>
|
||||
<n-button text @click="next" :disabled="last">
|
||||
<n-button text @click="next" :disabled="nextDisabled">
|
||||
<Icon :width="24" icon="pepicons-pencil:arrow-right"></Icon>
|
||||
</n-button>
|
||||
</n-flex>
|
||||
@@ -18,30 +18,43 @@
|
||||
<script lang="ts" setup>
|
||||
import { Icon } from "@iconify/vue"
|
||||
import { html, css, js, tab } from "../store/editors"
|
||||
import { onMounted, ref, useTemplateRef, watch } from "vue"
|
||||
import { computed, onMounted, ref, useTemplateRef, watch } from "vue"
|
||||
import { marked } from "marked"
|
||||
import { useStorage } from "@vueuse/core"
|
||||
import { Tutorial } from "../api"
|
||||
|
||||
const step = useStorage("web-turtorial-step", "01")
|
||||
const last = ref(false)
|
||||
const step = useStorage("web-turtorial-step", 1)
|
||||
const displays = ref<number[]>([])
|
||||
const content = ref("")
|
||||
const $content = useTemplateRef("$content")
|
||||
|
||||
const prevDisabled = computed(() => {
|
||||
const i = displays.value.indexOf(step.value)
|
||||
return i === 0
|
||||
})
|
||||
const nextDisabled = computed(() => {
|
||||
const i = displays.value.indexOf(step.value)
|
||||
return i === displays.value.length - 1
|
||||
})
|
||||
|
||||
function prev() {
|
||||
let num = parseInt(step.value) - 1
|
||||
step.value = num.toString().padStart(2, "0")
|
||||
const i = displays.value.indexOf(step.value)
|
||||
step.value = displays.value[i - 1]
|
||||
}
|
||||
|
||||
function next() {
|
||||
let num = parseInt(step.value) + 1
|
||||
step.value = num.toString().padStart(2, "0")
|
||||
const i = displays.value.indexOf(step.value)
|
||||
step.value = displays.value[i + 1]
|
||||
}
|
||||
|
||||
async function getContent() {
|
||||
const res = await fetch(`/turtorial/${step.value}/README.md`)
|
||||
const data = await res.text()
|
||||
content.value = await marked.parse(data, { async: true })
|
||||
last.value = data == "全部结束"
|
||||
const res = await Tutorial.listDisplay()
|
||||
displays.value = res
|
||||
if (!displays.value.includes(step.value)) {
|
||||
step.value = displays.value[0]
|
||||
}
|
||||
const data = await Tutorial.get(step.value)
|
||||
content.value = await marked.parse(data.content, { async: true })
|
||||
}
|
||||
|
||||
// 用 js 来写的，可以换成 vue 的方式
|
||||
|
||||
Reference in New Issue
Block a user