博客搭建 分类

鼠标特效

基于@moefy-canvas/theme-popper，查看了Oragekk's Blog这位博主的博客进行配置。

首先安装依赖：

pnpm add @moefy-canvas

Mr.Tzr大约 1 分钟

使用的生成器

生成器

Mr.Tzr大约 2 分钟

项目创建

前置准备

Node.js18及以上版本
通过命令行界面 (CLI) 访问 VitePress 的终端。
支持 Markdown 语法的编辑器，推荐VsCode。(我使用的是IntelliJ IDEA)

安装VitePress

首先创建文件夹，在文件夹中打开cmd窗口

Mr.Tzr小于 1 分钟

主页面配置

运行后的页面
An image

网站标题logo

在项目中的.vitepress/config.mjs中配置

export default defineConfig({
    head: [["link", { rel: "icon", href: "/dose-demo/svg/logo.svg" }]],//网站logo
    title: '枫笙' //网站标题
})

Mr.Tzr大约 4 分钟

目录侧边栏

文档目录

在项目中的.vitepress/config.mjs/sidebar中配置

默认配置

这种配置访问哪个文档都会存在

export default defineConfig({
    themeConfig:{
        sidebar: [
            {
                text: 'Examples',   //文档目录名称
                items: [
                    { text: 'Markdown Examples', link: '/markdown-examples' },//text文档名称,link文档路径
                    { text: 'Runtime API Examples', link: '/api-examples' }
                ]
            }
        ],
    }
})

Mr.Tzr小于 1 分钟

GitHub部署

没有GitHub的注册一个账户，在GitHub上新建一个自己的仓库，起一个仓库名称，直接创建
在项目中的.vitepress/config.mjs中配置base

export default defineConfig({
    base:'/demo/',//demo为仓库名
})

Mr.Tzr大约 3 分钟

VitePress搭建

Mr.Tzr小于 1 分钟