因为编译结果是一堆纯静态的 html 文件 和 js ,没有任何动态服务器生成的内容。
所以,一般的 html 文件如何部署,博客就是如何部署的。
官方文档
https://theme-hope.vuejs.press/zh/get-started/deploy.html
基本原理就是:
pnpm run build
之后
因为编译结果是一堆纯静态的 html 文件 和 js ,没有任何动态服务器生成的内容。
所以,一般的 html 文件如何部署,博客就是如何部署的。
官方文档
https://theme-hope.vuejs.press/zh/get-started/deploy.html
基本原理就是:
pnpm run build
之后
这个篇章会讲解如何自定义自己的图标
这里我们会用到一个网站:
https://www.iconfont.cn/
如下图所示:
你可以挑选自己喜欢的图标并命名加入到你的项目中去,然后你可以获得 例如:
icon-git
icon-vscode
icon-basic
整个站站点的修改分为以下几个部分
src/.vuepress/client.ts
import { defineClientConfig } from 'vuepress/client';
import { onMounted } from 'vue';
import { defineAsyncComponent } from 'vue';
import 'vuepress-theme-hope/presets/bounce-icon.scss'; // 为页面图标添加鼠标悬停的跳动效果。
const TopNavBeautify = defineAsyncComponent(() => import('./components/TopNavBeautify.vue'));
const HeroBG = defineAsyncComponent(() => import('./components/HeroBG.vue'));
const HeroHitokoto = defineAsyncComponent(() => import('./components/HeroHitokoto.vue'));
const NavMusic = defineAsyncComponent(() => import('./components/NavMusic.vue'));
const PrintVersion = defineAsyncComponent(() => import('./components/PrintVersion.vue'));
const CommentHideBtn = defineAsyncComponent(() => import('./components/CommentHideBtn.vue'));
const MyIcon = defineAsyncComponent(() => import('./components/MyIcon.vue'));
const BlogBg = defineAsyncComponent(() => import('./components/BlogBg.vue'));
const BlogBeautify = defineAsyncComponent(() => import('./components/BlogBeautify.vue'));
const PreviewImage = defineAsyncComponent(() => import('./components/PreviewImage.vue'));
export default defineClientConfig({
enhance({ app, router, siteData }) {
app.component('MyIcon', MyIcon);
},
setup() {
onMounted(() => {});
},
rootComponents: [
TopNavBeautify,
HeroBG,
HeroHitokoto,
NavMusic,
PrintVersion,
CommentHideBtn,
BlogBeautify,
BlogBg,
PreviewImage,
// ...
],
});
VSCode 系统自带的颜色选择器会导致开发卡顿,而且容易误触。但是关闭颜色选择器又无法直观的看到颜色代码所代表的颜色了,这个插件很好的弥补了这点。
注意,如果想要支持更多语言,则需要单独进行配置。
https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize
远程开发工具包包含四个插件,
加上 Remote Explorer
一共五个插件。
让你可以通过 VSCode 远程连接服务器进行开发作业,如果网络延迟足够低,感觉就跟本地开发没啥区别,体验丝滑。
包括 WSL 支持。
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack
.env
文件支持
https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv
nginx 配置文件高亮和语法提示
以下标签直接点开链接然后安装即可
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans
go 语言支持,由 go 语言官方开发,好用!
https://marketplace.visualstudio.com/items?itemName=golang.Go
go 语言模板文件高亮
https://marketplace.visualstudio.com/items?itemName=jinliming2.vscode-go-template
可以参考这篇文章:
Visual Studio Code 入门教程
初次使用建议点开左下角设置浏览一下设置项都有哪些。
右键侧边栏可以控制显示哪些选项。勾选账户。
然后登录你的 Github 或者 Microsoft 账户,这样就可以在多台设备中同步你的设置以及插件了。