Vuepress hope 博客快速搭建&基础设置教程
原创2023年12月11日大约 3 分钟...约 784 字
你好,我是悦创。
接下来,我将带你快速初始化属于你自己的博客。
0. 前置工作
0.1 环境准备
1. 初始化项目
pnpm create vuepress-theme-hope my-docs
2. 本地运行网站
- 打开网站所在文件夹,命令行进入;
- 使用本地运行命令:
pnpm run docs:dev
3. 更换背景
需要在 README.md 文件中添加一个:
bgImage: /home/6-light.svg
存放背景图片:你网站文件夹 > 你的 src 文件夹 >
.vuepress
> public到 public 中,你可以新建文件夹也可以直接放
/
一开始就代表 public 文件夹,/image-filename.jpg
4. 文章标题
5. 代码
代码
print("hello bornforthis")
```python
print("hello bornforthis")
```
6. 图片
图片


7. 有序标题和无序标题、任务列表
有序标题和无序标题
- Apple🍎
- Banana🍌
- 西瓜🍉
- 苹果🍎
- Apple🍎
- Banana🍌
1. 西瓜🍉
2. 苹果🍎
- [ ] 计划 A
- [x] 计划 B
8. 提示容器
信息框
重要容器名称自己可以写
重要容器。
相关信息
信息容器。
注
注释容器。
提示
提示容器
注意
警告容器
警告
危险容器
详情
详情容器
::: important 重要容器名称自己可以写
重要容器。
:::
::: info
信息容器。
:::
::: note
注释容器。
:::
::: tip
提示容器
:::
::: warning
警告容器
:::
::: caution
危险容器
:::
::: details
详情容器
:::
9. 链接
链接
`[连接名称](链接)`
[我的网站连接](https://bornforthis.cn/)
[https://bornforthis.cn/](https://bornforthis.cn/)
10. 下划线
下划线
<u>下划线</u>
下划线
`<u>下划线</u>`
<u>下划线</u>
11. 对齐
对齐
左对齐的内容
居中的内容
右对齐的内容
两端对齐的内容
::: left
左对齐的内容
:::
::: center
居中的内容
:::
::: right
右对齐的内容
:::
::: justify
两端对齐的内容
:::
12. 公式
公式
行内公式 looking
$\sqrt{2}$
$\large \frac{1}{2}$
行内公式 $\sum_{i=0}^{i + 1} \frac{1}{2}$ looking
$$
\sqrt{2}
\\
\sum_i^{i=0}=\frac{1}{2}
$$
13. 多媒体
多媒体
<AudioPlayer src="/mp3/sample.mp3" />
<VidStack src="/mp3/sample.mp3" title="VidStack 示例音频" />
`<AudioPlayer src="/mp3/sample.mp3" />`
`<VidStack src="/mp3/sample.mp3" title="VidStack 示例音频" />`
<BiliBili bvid="BV1i8411j7cf" />
<PDF url="/pdf/03-使用8421.pdf" />
<VidStack src="https://vp-demo.u2sb.com/video/caminandes_03_llamigos_720p.mp4" />
<YouTube id="0JJPfz5dg20" />
欢迎关注我公众号:AI悦创,有更多更好玩的等你发现!
公众号:AI悦创【二维码】

AI悦创·编程一对一
AI悦创·推出辅导班啦,包括「Python 语言辅导班、C++ 辅导班、java 辅导班、算法/数据结构辅导班、少儿编程、pygame 游戏开发、Linux、Web 全栈」,全部都是一对一教学:一对一辅导 + 一对一答疑 + 布置作业 + 项目实践等。当然,还有线下线上摄影课程、Photoshop、Premiere 一对一教学、QQ、微信在线,随时响应!微信:Jiabcdefh
C++ 信息奥赛题解,长期更新!长期招收一对一中小学信息奥赛集训,莆田、厦门地区有机会线下上门,其他地区线上。微信:Jiabcdefh
方法一:QQ
方法二:微信:Jiabcdefh
