外观
VuePress + Obsidian + Oss 搭建个人博客
一、本地 Windows
1. 安装 git
Git - Downloading Package (git-scm.com)
2. 安装 Node.js
Node.js — 在任何地方运行 JavaScript (nodejs.org)
3. npm 加速
npm config set registry https://registry.npmmirror.com
4. 安装 pnpm
npm i -g pnpm
5. 安装 VuePress 和 Plume 主题
pnpm create vuepress-theme-plume@latest
6. 博客初始化
docs/README.md
---
pageLayout: home
externalLinkIcon: false
config:
-
type: hero
full: true
background: tint-plate
hero:
name: 遇事不决,可问春风。
// tagline: xx
text: 心中一点浩然气,何处不是倒悬山
actions:
-
theme: brand
text: 博客
link: /blog/
-
theme: alt
text: Github →
link: https://github.com/ddowobb-bubu
---
docs/.vuepress/plume.config.ts
import { defineThemeConfig } from 'vuepress-theme-plume'
import { navbar } from './navbar'
import { notes } from './notes'
/**
* @see https://theme-plume.vuejs.press/config/basic/
*/
export default defineThemeConfig({
logo: 'https://theme-plume.vuejs.press/plume.png',
appearance: true, // 配置 深色模式
// social: [
// { icon: 'github', link: '/' },
// ],
// navbarSocialInclude: ['github'], // 允许显示在导航栏的 social 社交链接
// aside: true, // 页内侧边栏, 默认显示在右侧
// outline: [2, 3], // 页内大纲, 默认显示 h2, h3
/**
* 文章版权信息
* @see https://theme-plume.vuejs.press/guide/features/copyright/
*/
// copyright: true,
// prevPage: true, // 是否启用上一页链接
// nextPage: true, // 是否启用下一页链接
// createTime: true, // 是否显示文章创建时间
/* 站点页脚 */
footer: {
message: 'Power by <a target="_blank" href="https://v2.vuepress.vuejs.org/">VuePress</a> & <a target="_blank" href="https://theme-plume.vuejs.press">vuepress-theme-plume</a>',
copyright: '<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2024076127号-1</a>',
},
/**
* @see https://theme-plume.vuejs.press/config/basic/#profile
*/
profile: {
avatar: 'https://theme-plume.vuejs.press/plume.png',
name: '布丁困困',
description: '',
// circle: true,
// location: '',
// organization: '',
},
navbar,
notes,
/**
* 公告板
* @see https://theme-plume.vuejs.press/guide/features/bulletin/
*/
// bulletin: {
// layout: 'top-right',
// contentType: 'markdown',
// title: '公告板标题',
// content: '公告板内容',
// },
/* 过渡动画 @see https://theme-plume.vuejs.press/config/basic/#transition */
// transition: {
// page: true, // 启用 页面间跳转过渡动画
// postList: true, // 启用 博客文章列表过渡动画
// appearance: 'fade', // 启用 深色模式切换过渡动画, 或配置过渡动画类型
// },
})
配置笔记列表
docs/.vuepress/navbar.ts
import { defineNavbarConfig } from 'vuepress-theme-plume'
export const navbar = defineNavbarConfig([
{ text: '首页', link: '/' },
{ text: '博客', link: '/blog/' },
{ text: '标签', link: '/blog/tags/' },
{ text: '归档', link: '/blog/archives/' },
{
text: '笔记',
items: [
{ text: 'python', link: '/notes/python/README.md' },
{ text: '测试', link: '/notes/test/README.md' },
]
},
])
docs/.vuepress/notes.ts
import { defineNoteConfig, defineNotesConfig } from 'vuepress-theme-plume'
const python = defineNoteConfig({
dir: 'python',
link: '/python',
sidebar: 'auto',
})
const test = defineNoteConfig({
dir: 'test',
link: '/test',
sidebar: 'auto',
})
export const notes = defineNotesConfig({
dir: 'notes',
link: '/',
notes: [ python, test ],
})
7. 编译发布
pnpm run docs:build
二、云上 OSS
数据管理 → 静态页面 配置
配置项 | 配置 |
---|---|
默认首页 | index.html |
子目录首页 | 已开通 |
文件 404 规则 | Index |
默认 404 页 | 404.html |
错误文档响应码 | 404 |