简介
wongterrencew-fork-phenomic 是一个基于 Phenomic 的前端静态网站生成工具，原项目受到其他npm包的影响目前已经无法使用，因此 Wongterrencew 在其基础上进行了修改和维护，为前端开发者提供了一种更加便捷的方式来生成静态网站。
下面我们将详细介绍如何使用这个 npm 包来生成静态网站。
安装
在使用这个 npm 包前，你需要先安装 Node.js 和 npm。
然后，安装 wongterrencew-fork-phenomic：
npm install wongterrencew-fork-phenomic -g
这个命令将 wongterrencew-fork-phenomic 安装到了全局环境中。
接下来，你需要初始化一个 Phenomic 项目，执行以下命令：
phenomic init my-website cd my-website
这个命令将在当前目录下创建一个名为 my-website 的文件夹，并初始化一个 Phenomic 项目。
使用
在初始化一个 Phenomic 项目之后，你需要编辑 package.json 文件，添加以下配置：
"scripts": {
"build": "phenomic",
"start": "phenomic-start --port 8080"
}然后，你可以使用以下命令来构建你的静态网站：
npm run build
这个命令将会生成一个静态网站，在 ./dist 目录下。
你也可以使用以下命令来启动一个本地服务器，预览你的静态网站：
npm start
这个命令将启动一个本地服务器，默认监听 8080 端口。你可以在浏览器中输入 http://localhost:8080 来访问你的静态网站。
配置
wongterrencew-fork-phenomic 提供了许多配置选项，你可以在 package.json 文件中的 phenomic 字段下进行配置。
以下是一些常用的配置选项：
source: 源文件的目录，默认为srcoutDir: 生成的网站的目录，默认为distlayouts: 布局模板的目录，默认为./src/layouts/plugins: 插件列表，可以用来扩展 wongterrencew-fork-phenomic 的功能theme: 主题名称，可以通过 npm 包引入第三方主题
你可以在 wongterrencew-fork-phenomic 的文档 中查看更多配置选项。
示例
以下是一个简单的示例：假设我们要创建一个名为 my-website 的静态网站，并在网站中显示一篇名为 Hello, World! 的文章。
首先，我们需要在 ./src/posts 目录下创建一个名为 hello-world.md 的 Markdown 文件，并添加以下内容：
--- title: "Hello, World!" date: "2022/02/22" --- # Hello, World! This is my first post on my website!
然后，我们需要在 ./src/layouts 目录下创建一个名为 Post.js 的布局模板，并添加以下内容：
-- -------------------- ---- -------
------ ----- ---- -------
------ --------- ---- ------------
------ - ------------- - ---- ----------
----- ---- - -- ----------- ----- ---- -- -- -
---------
--------
---------------------
------------------
---------
-------------------------------------
----------
-
-------------- - -
----------- ----------------------------
----- ----------------------------
----- ----------------------------
-
------ ------- ----接下来，我们需要在 ./src/routes.js 文件中添加一个路由，让它可以显示我们的文章：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ----- - ---- --------------
------ - ---- - ---- ----------
------ ------ ---- -------------------
------ ---- ---- ----------------
----- --------- - -- -- -
-----
--------
------ ------------
-----
----
----
----- ------------------------ -------
----
-------
-----
----
----- ------------------------ ------------------------
------ ------
-------
-----
-----
------
---------
------
------
-----
--------
------------- -- ----------- -- -- --------------
--
------
---------------
---------------- -- -
----- ---------- --------------- --
--
--
-------
------
-
------ ------- ---------最后，我们需要在 package.json 文件中添加以下配置：
"phenomic": {
"layouts": "./src/layouts/",
"plugins": [
"phenomic-plugin-markdown",
"phenomic-plugin-assets-loader",
]
}完成以上步骤后，我们就可以使用以下命令来生成我们的静态网站：
npm run build
然后，我们可以使用以下命令来启动一个本地服务器，预览我们的网站：
npm start
现在，我们可以在浏览器中输入 http://localhost:8080 来访问我们的网站，并看到我们的文章 Hello, World!。
总结
Wongterrencew-fork-phenomic 是一个非常优秀的静态网站生成工具，可以帮助前端开发者快速生成高质量的静态网站。本篇文章介绍了如何使用 wongterrencew-fork-phenomic 来生成静态网站，并梳理了相关的配置和示例。希望对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c8b81e8991b448d9f7a