npm包@phenomic/core使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

@phenomic/core是一个静态网站生成器，它将近乎所有关于网站的所有数据源和静态部分和后端逻辑分开，并使用插件生成HTML。

在本文中，我们将介绍如何使用@phenomic/core来创建一个基本的静态网站。

安装

要使用@phenomic/core，您需要先安装Node.js和npm。然后，您可以用以下命令在您的项目中安装@phenomic/core。

npm install --save-dev @phenomic/core

用法

下面是一个使用@phenomic/core的最小示例。

// src/index.js
import Phenomic from "@phenomic/core";
const core = Phenomic.create();
core.start();

将上面的代码保存到一个名为index.js的文件中，在项目根目录下使用以下命令运行服务：

node src/index.js

默认情况下，服务将监听http://localhost:3333。现在在您的浏览器中打开此URL，您会看到一些JSON数据。

要渲染您的网站，您需要添加一个插件。 Phenomic具有许多插件，其中一些直接可以通过npm安装，例如 @phenomic/plugin-renderer-react。它允许您使用React渲染页面。

npm install --save @phenomic/plugin-renderer-react

然后，在您的src/index.js文件中，您可以像这样配置Phenomic：

import Phenomic from "@phenomic/core";

const core = Phenomic.create();
core.use(require("@phenomic/plugin-renderer-react").default);
core.start();

现在，您可以创建一个名为src/pages/hello.js的文件。这是页面的主要部分。

-- -------------------- ---- -------
------ ----- ---- --------

------ ------- ----- --------- ------- --------------- -
  ------ --------- - -
    ----- ----------------------------------
  -

  -------- -
    ------ -
      -----
        --------------------------------
        --------- ----------
      ------
    --
  -
-

然后，您需要将这个组件与一个路径关联。您可以添加名为src/pages/hello/index.md的文件：

---
title: "Hello, World!"
layout: "hello"
---

This is my first <b>Hello, World!</b>

现在，您需要通知@phenomic/plugin-renderer-react来支持该页面。在您的src/index.js文件中，将以下内容添加到您的Phenomic配置中：

-- -------------------- ---- -------
---------
  ----------------------------------------------------------------
  -
    ------------ -
      ------ --------- ---------
    --
  --
  -- --- ----- ---- ----- ---- ------ -- ------- ----------
  ------------------------
--

最后，启动服务：

node src/index.js

现在，在浏览器中访问(http://localhost:3333/hello/)，您将看到“Hello, World！”输出结果。

结论

@phenomic/core是一个功能强大的静态网站生成器，使用它可以快速构建静态网站。在本文中，我们提供了一个简单的示例以帮助您入门。希望这篇文章能够对您有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600672f10520b171f02e1f16