对于第一次尝试的valaxy的用户,可以在本篇文章会如何安装 valaxy-theme-antfu 主题。在此之前,建议先了解一下valaxy

For users trying Valaxy for the first time, this article will guide you on how to install the valaxy-theme-antfu theme. Before proceeding, it is recommended to familiarize yourself with valaxy.

npmvalaxy

兼容性

Compatibility

要使用valaxy,您的电脑必须安装 Node.js

To use Valaxy, your computer must have Node.js installed.

版本Nodevalaxy
+Node >= 18.12valaxy >=
versionNodevalaxy
+Node >= 18.12valaxy >=

创建 Valaxy 博客项目

Create a Valaxy blog project

Tip

推荐使用 pnpm 进行安装主题。如果您的系统中尚未安装 pnpm,可以通过执行 npm install -g pnpm 命令进行安装

在创建 Valaxy 项目的过程中, create valaxy 命令会自动下载和安装 Valaxy,无需您手动进行安装 :::

Tip

It is recommended to use pnpm to install the theme. If pnpm is not installed on your system, you can install it by running the command npm install -g pnpm.

During the creation of a Valaxy project, the create valaxy command will automatically download and install Valaxy, so you don’t need to install it manually. :::

bash
pnpm create valaxy
bash
npm create valaxy
bash
yarn create valaxy

安装主题

Install theme

在创建 Valaxy 项目后,您需要安装主题以便项目能够按照您期望的样式呈现。

进入到您刚刚创建的 Valaxy 项目所在的文件夹,打开终端,然后执行以下命令来安装主题:

After creating a Valaxy project, you need to install a theme for the project to display in the style you desire.

Navigate to the folder where you just created the Valaxy project, open the terminal, and then execute the following command to install the theme:

bash
pnpm add valaxy-theme-antfu
bash
npm install valaxy-theme-antfu
bash
yarn add valaxy-theme-antfu

Note

如果您在创建的过程中遇到困难,强烈建议先看Valaxy文档

Note

If you encounter difficulties during the creation process, it is highly recommended to first check the Valaxy documentation.

启用主题

Enable theme

在安装主题之后并不会启用主题。首先在 valaxy.config.ts 文件中启用 antfu 主题,您需要按照以下步骤操作:

打开 Valaxy 项目的根目录的 valaxy.config.ts 文件,修改如下标注的位置,以确保 TypeScript 的类型检查和自动完成功能能够正常使用

The theme will not be activated after installation. First, enable the antfu theme in the valaxy.config.ts file. You need to follow these steps:

Open the valaxy.config.ts file in the root directory of the Valaxy project, and modify the positions indicated below to ensure that TypeScript’s type checking and auto-completion features work correctly:

ts
import type { ThemeUserConfig } from 'valaxy-theme-antfu'
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig<ThemeUserConfig>({
  theme: 'antfu'
})

Tip

TypeScript 是 JavaScript 的一个超集,添加了类型系统和对 ES6+ 的支持。它不仅能让开发者在编码阶段就能发现潜在的错误,还能提高代码的可读性和可维护性

简单来说,TypeScript 可以在您编辑配置文件时自动完成代码提示,并且如果配置不正确,它会立即用红色警告提示您,以便您及时修正错误

::

Tip

TypeScript is a superset of JavaScript that adds a type system and support for ES6+. It not only allows developers to identify potential errors during the coding phase but also improves code readability and maintainability.

In simple terms, TypeScript can automatically complete code suggestions while you are editing configuration files, and if the configuration is incorrect, it will immediately alert you with a red warning so that you can correct errors promptly.

主题名称自动根据 valaxy-theme-xxx 的格式获取,如本主题名为valaxy-theme-antfu,所以antfu就是这个主题的名称

在theme选项中填入 antfu 来实现主题切换

The theme name is automatically retrieved in the format valaxy-theme-xxx. For example, this theme is named valaxy-theme-antfu, so antfu is the name of this theme.

Fill in antfu in the theme option to switch themes.

ts
import type { ThemeUserConfig } from 'valaxy-theme-antfu'
import { defineValaxyConfig } from 'valaxy'

export default defineValaxyConfig<ThemeUserConfig>({
  theme: 'antfu'
})

Warning

请确保您已经正确地导入了所有必要的类型。如果导入的类型不正确,可能会导致构建失败

Warning

Please ensure that you have correctly imported all the necessary types. Incorrectly imported types may cause the build to fail.

通过遵循上述步骤,您可以顺利地在您的项目中启用 antfu 主题,并利用 TypeScript 提供的类型安全和代码智能提示功能,享受到更加愉快的博客使用体验

如果创建 Valaxy 项目的时候没有安装依赖,那么我们就要手动安装依赖:

By following the steps above, you can successfully enable the antfu theme in your project and enjoy a more pleasant blogging experience with the type safety and code intelligence features provided by TypeScript.

If the dependencies were not installed when creating the Valaxy project, we need to install the dependencies manually:

bash
pnpm i
bash
npm install
bash
yarn

完成上述配置后,您已经完成了基本设置。接下来,您就可以启动您的博客啦!

After completing the above configuration, you have finished the basic setup. Next, you can start your blog!

bash
pnpm dev
bash
npm run dev
bash
yarn dev

部署

Deploy

对于大多数用户来说,hexohugo的常见操作是构建生成网站内容后,再上传至仓库以部署网站。若需进行构建,直接运行pnpm run build命令即可,其操作步骤与之类似。然而,我并不推荐使用这种方法。想要了解更多部署方式,请参考Valaxy部署文档

For most users, common operations with hexo and hugo involve building the site content and then uploading it to a repository to deploy the site. If you need to build, simply run the pnpm run build command, which follows similar steps. However, I do not recommend using this method. For more deployment methods, please refer to the Valaxy deployment documentation.

CC BY-NC-SA 4.0 2024-PRESENT © WRXinYue