vuepress-theme-blog-material
v0.2.3
Published
Material VuePress Blog Theme Powered By Vuetify
Downloads
4
Maintainers
Readme
vuepress-theme-blog-material
Material VuePress Blog Theme Powered By Vuetify.
在线 Demo
目前主题仍处于开发中,近期准备使用 TypeScript + Vue 3 + Vuetify 3 + Vuepress 2 重写,切换到 VuePress 2 后,博客的文件结构可能会有变动。主题稳定以后会使用 v1.0.0
作为版本号。
使用主题
下载
从 release 下载最新的 template。
安装依赖:
yarn
修改 your-blog/blog/.vuepress/config.js
之后会写 GitHub Actions 自动发布 template。
在本地测试运行
yarn dev
构建(以发布到网站上)
yarn build
博客编写
博文路径
本人比较喜欢按文件夹对博客进行分类,URL 呈现博文的路径。如果喜欢使用日期作为 URL,可以进行配置。
使用 Git 做版本管理
由于 @vuepress/plugin-last-updated 插件将博文在 Git 的提交时间作为最后修改时间,不管你是否将博客源代码上传到 GitHub 等 Git 平台,都推荐使用 Git 来管理博客。
图片和文件
Markdown 中的图片和文件可以通过相对路径(形如 ./pic.jpg
)或绝对路径(形如 /img/pic.jpg
)的形式插入。VuePress 对二者的处理方式不同:
- 对于绝对路径(以及外链),VuePress 会直接将链接复制到生成的 HTML 中。VuePress 只会将出现在
/blog/.vuepress/public
的文件复制到生成的根目录(如/img.pic
的图片应当放在/blog/.vuepress/public/img.pic
中)。 - 对于相对路径的图片,VuePress 会将相对链接引用的图片交给 webpack 处理。在编译阶段,webpack 会寻找到图片,然后将其复制到生成文件夹,同时修改链接为新的 URL。好处在于只要相对路径正确,图片可以放在自己喜欢的任意一个文件夹,如果相对路径错误还会有显式报错;坏处在于文件路径会被修改。
VuePress 建议对图片使用相对路径,对文件使用绝对路径。但我个人推荐都使用绝对路径,因为 webpack 只会识别 <img>
、![]()
而忽略其它格式(如普通链接)的图片链接;如果同时使用相对路径和绝对路径引用一个图片也会导致出错。
每篇博客的头图会从19 张 Material 风格照片中随机选择一张。你也可以在 frontmatter 中添加 image
字段(仅支持绝对路径和链接)替换。
---
title: Markdown 效果演示
date: 2021-7-7 21:23:36
tags:
- markdown
image: https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg
---
如果你恰巧也是使用 VS Code 编写 Markdown,你可以使用 Markdown Image 插件来向 Markdown 插入图片,该插件会自动将剪贴板中的图片复制到对应文件夹,然后修改链接使得该主题能够直接加载。
相关配置为:
{
"markdown-image.base.uploadMethod": "Local",
"markdown-image.local.path": "/blog/.vuepress/public/images/",
"markdown-image.local.referencePath": "/images/"
}
代码块染色
使用 Prism 进行代码块染色。支持的语言列表请见 Prism。
LaTeX 公式
支持 LaTeX 公式。
行内公式:$a+b$
行间公式:
$$\left\{\begin{aligned}
I_0 &= 1 - e^{-1} \\
I_n &= 1-nI_{n-1} \quad (n=1,2,...)
\end{aligned} \right.$$
开发主题
git clone https://github.com/lyh543/vuepress-theme-blog-material.git vuepress-theme-blog-material
yarn
yarn dev:example
已知问题
npm run serve
时不会生成sitemap.xml
和rss.xml
,但是npm run build
会生成。