博客搭建教程分类

1.环境准备与项目启动

当前博客采用 vuepress-hope 搭建，这是一个免费开源的项目，是我用过的最强大和灵活的静态博客生成工具。

但是想要完全用好这款工具搭建出符合自己心意的博客，必须得具有一定的知识储备和掌握必要的工具。

必要的知识储备

墨七编写的编程基础入门

相对路径，命令行，文件编码，开发工具，Git，Github 都需要具备一定的概念才可以。

墨七2024/11/12...大约 3 分钟

10.图片预览插件

主配置文件：

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.',
    },
  },

  plugins: [],

  theme,
  // Enable it with pwa
  shouldPrefetch: false,
});

墨七2024/11/12...小于 1 分钟

3.如何编写自定义组件

如何编写自定义组件啊，这个教程是真的很难写，会就是会，不会的话要学习的知识是很多的。但我还是尽力去讲解吧。

我这里用一个最简单的组件来举例子:

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>

墨七2024/11/12...大约 2 分钟

4.主题魔改说明

整个站站点的修改分为以下几个部分

插件式美化

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'));
const HeroContent = defineAsyncComponent(() => import('./components/HeroContent.vue'));

export default defineClientConfig({
  enhance({ app, router, siteData }) {
    app.component('MyIcon', MyIcon);
  },
  setup() {
    onMounted(() => {});
  },
  rootComponents: [
    HeroContent,
    TopNavBeautify,
    HeroBG,
    // HeroHitokoto,
    NavMusic,
    PrintVersion,
    CommentHideBtn,
    BlogBeautify,
    BlogBg,
    PreviewImage,
    // ...
  ],
});

墨七2024/11/12...大约 2 分钟

5.在 md 中使用自定义组件

上一个章节讲到的是使用全局组件来对主题和博客进行修改，其实本质上是通过 vue 组件的形式进行了全局的 js 和 css 的引入。和直接 <link href="xxx" /> <script src="xxx"> 的形式没啥区别。不过使用 vue 组件看起来比较优雅而已。
而且 vue 组件的代码内容一定会经过 vite 的优化，代码的执行效率会更高。

这里讲另外两种自定义组件的使用方式:

全局注册，Markdown 调用

import { defineClientConfig } from 'vuepress/client';
export default defineClientConfig({
  // ...
  enhance({ app, router, siteData }) {
    app.component('MyIcon', MyIcon);
  },
  // ...
});