当前博客采用 vuepress-hope 搭建,这是一个免费开源的项目,是我用过的最强大和灵活的静态博客生成工具。
但是想要完全用好这款工具搭建出符合自己心意的博客,必须得具有一定的知识储备和掌握必要的工具。
必要的知识储备
相对路径,命令行,文件编码,开发工具,Git,Github 都需要具备一定的概念才可以。
当前博客采用 vuepress-hope 搭建,这是一个免费开源的项目,是我用过的最强大和灵活的静态博客生成工具。
但是想要完全用好这款工具搭建出符合自己心意的博客,必须得具有一定的知识储备和掌握必要的工具。
相对路径,命令行,文件编码,开发工具,Git,Github 都需要具备一定的概念才可以。
相关信息
觉得官方的图片预览插件点一下放大,点一下缩小太难用了,于是自己重新开发了一个图片预览插件。
【可完美适配移动端】
注意:得先在配置文件中禁用 vuepress 的图片预览。
plugins.photoSwipe: false
该插件在 VuePress
中使用的方式如下:
vuepress 的配置文件分为两类:
src/.vuepress/config.ts
import { defineUserConfig } from 'vuepress';
import theme from './theme.js';
import { getDirname, path } from 'vuepress/utils';
const __dirname = getDirname(import.meta.url);
const SrcPath = path.resolve(__dirname, '../');
export default defineUserConfig({
alias: {
'@components': path.resolve(__dirname, 'components'),
'@src': SrcPath,
},
dest: 'dist',
host: '0.0.0.0',
port: 9451,
base: '/',
temp: '.cache/.vp-temp',
cache: '.cache/.vp-cache',
locales: {
'/': {
lang: 'zh-CN',
title: '墨七',
description: '墨七 - 简单快乐,理应如此。',
},
'/en/': {
lang: 'en-US',
title: 'Mo7',
description: 'Mo7 - Simple and happy, as it should be.',
},
},
theme,
// Enable it with pwa
shouldPrefetch: false,
});
如何编写自定义组件啊,这个教程是真的很难写,会就是会,不会的话要学习的知识是很多的。但我还是尽力去讲解吧。
我这里用一个最简单的组件来举例子:
src/.vuepress/components/PrintVersion.vue
<script setup lang="ts">
import AppPackage from '../../../package.json';
const textConsole = `mo7.cc `;
const PrintlnInfo = () => {
const PackageData: any = AppPackage;
const Text = `${textConsole}${PackageData.version}`;
console.log(`%c${Text} `, `color:#01a9a3;font-size:1rem;font-style: italic;`);
return Text;
};
</script>
<template>
<ClientOnly>
<div class="none">版本打印{{ PrintlnInfo() }}</div>
</ClientOnly>
</template>
<style lang="scss"></style>
整个站站点的修改分为以下几个部分
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 Hitokoto = defineAsyncComponent(() => import('./components/Hitokoto.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'));
const HeroContent = defineAsyncComponent(() => import('./components/HeroContent.vue'));
export default defineClientConfig({
enhance({ app, router, siteData }) {
app.component('MyIcon', MyIcon);
},
setup() {
onMounted(() => {});
},
rootComponents: [
HeroContent,
TopNavBeautify,
HeroBG,
Hitokoto,
NavMusic,
PrintVersion,
CommentHideBtn,
BlogBeautify,
BlogBg,
PreviewImage,
// ...
],
});
上一个章节讲到的是使用全局组件来对主题和博客进行修改,其实本质上是通过 vue 组件的形式进行了全局的 js 和 css 的引入。和直接 <link href="xxx" /> <script src="xxx">
的形式没啥区别。不过使用 vue 组件看起来比较优雅而已。
而且 vue 组件的代码内容一定会经过 vite 的优化,代码的执行效率会更高。
这里讲另外两种自定义组件的使用方式:
import { defineClientConfig } from 'vuepress/client';
export default defineClientConfig({
// ...
enhance({ app, router, siteData }) {
app.component('MyIcon', MyIcon);
},
// ...
});
相关信息
Klipse 是一个 JavaScript 插件,用于在技术博客中嵌入交互式代码片段。从技术层面上讲,Klipse 是一小段 JavaScript 代码,用于评估浏览器中的代码片段,并且可以在任何网页上插入。
Github 仓库地址: https://github.com/viebel/klipse
这里的评论系统使用了
其实搭建起来很方便也很容易。跟着文档一步步走就可以了。
我因为有自己的服务器,所以是在自己的服务器上进行搭建的。
对于小白来说,这里面的难点可能在于 数据库 和 Nginx 部分。
这个篇章会讲解如何自定义自己的图标
这里我们会用到一个网站:
https://www.iconfont.cn/
如下图所示:
你可以挑选自己喜欢的图标并命名加入到你的项目中去,然后你可以获得 例如:
icon-git
icon-vscode
icon-basic
因为编译结果是一堆纯静态的 html 文件 和 js ,没有任何动态服务器生成的内容。
所以,一般的 html 文件如何部署,博客就是如何部署的。
官方文档
https://theme-hope.vuejs.press/zh/get-started/deploy.html
基本原理就是:
pnpm run build
之后