丁香狠狠色婷婷久久综合,成人亚洲区无码区在线点播

Metalsmith 是一款靈活的可插入靜態(tài)網站生成器，非常適合創(chuàng)建輕量級網站，而無需傳統(tǒng) CMS 的開銷。
Metalsmith 的安裝和設置需要 Node.js，此過程涉及初始化新的項目目錄并通過 npm 安裝必要的插件。
Metalsmith 中的項目結構涉及組織源文件、模板和資產，并明確區(qū)分開發(fā)和生產構建。
Metalsmith 利用各種插件來擴展功能，例如處理 Markdown 文件、創(chuàng)建 RSS 提要和生成站點地圖，這些都配置在構建文件中。
可以創(chuàng)建自定義插件來處理特定任務，例如設置元數(shù)據(jù)或添加調試信息，從而增強 Metalsmith 在管理網站內容和結構方面的多功能性。
Metalsmith 的構建過程可以與 Gulp 等任務運行器集成，以應對更復雜的場景，盡管對于更簡單的流程，Metalsmith 本身就足夠了。

為什么選擇 Metalsmith？

無可爭議的靜態(tài)網站冠軍是 Jekyll——一個 2008 年啟動的 Ruby 項目。您不一定需要 Ruby 專業(yè)知識來使用 Jekyll，但這會有所幫助。幸運的是，大多數(shù)流行語言都有各種各樣的開源靜態(tài)網站生成器。JavaScript 選項包括 Hexo、Harp 和 Assemble。對于更簡單的項目，您也可以使用 Gulp 等構建工具。

我選擇 Metalsmith 用于本教程是因為它：

不針對特定類型的項目（例如博客）
支持各種模板和數(shù)據(jù)格式選項
輕量級
依賴項很少
使用模塊化結構
提供簡單的插件架構，以及
易于上手。

本教程已經構建了一個演示網站。它不會贏得任何設計獎項，但它說明了基本概念。Metalsmith 構建代碼可以從 GitHub 存儲庫中檢查和安裝。或者，您可以按照此處的說明操作并創(chuàng)建您自己的基本站點。

我已經使用過幾次 Metalsmith 了——請不要認為這是構建每個靜態(tài)網站的最終方法！

安裝 Metalsmith

確保您已安裝 Node.js（例如使用 nvm），然后創(chuàng)建一個新的項目目錄，例如 project 并初始化您的 package.json 文件：

<code>cd project && cd project
npm init -y
</code>

現(xiàn)在安裝 Metalsmith 和我們將用于構建站點的各種插件。這些是：

metalsmith-assets — 在您的 Metalsmith 構建中包含靜態(tài)資產
metalsmith-browser-sync — 將 BrowserSync 集成到您的工作流程中
metalsmith-collections — 將文件集合添加到全局元數(shù)據(jù)
metalsmith-feed — 為集合生成 RSS 提要
metalsmith-html-minifier — 使用 kangax/html-minifier 壓縮 HTML 文件
metalsmith-in-place — 在源文件中呈現(xiàn)模板語法
metalsmith-layouts — 將布局應用于您的源文件
metalsmith-mapsite — 生成 sitemap.xml 文件
metalsmith-markdown — 轉換 Markdown 文件
metalsmith-permalinks — 將自定義永久鏈接模式應用于文件
metalsmith-publish — 支持草稿、私有和未來日期的帖子
metalsmith-word-count — 計算 HTML 文件中所有段落的字數(shù)/平均閱讀時間

<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars
</code>

項目結構

我們將在項目中使用以下結構作為源 (src) 和構建 (build) 目錄。

您可以按照以下說明創(chuàng)建示例文件，也可以直接從演示 src 目錄復制它們。

頁面

頁面 Markdown 文件包含在 src/html 中。這可以包含每個網站部分的一級子目錄，即

src/html/start — 按特定順序描述項目的頁面
src/html/article — 按反時間順序排列的各種文章
src/html/contact — 單個聯(lián)系頁面

每個目錄包含一個 index.md 文件，它是該部分的默認頁面。其他頁面可以使用任何唯一名稱。

構建過程會將這些文件轉換為基于目錄的永久鏈接，例如

src/html/start/index.md 變成 /start/index.html
src/html/start/installation.md 變成 /start/installation/index.html

每個 Markdown 文件都提供內容和元信息，稱為“前題”位于 --- 標記之間的頂部，例如

<code>---
title: My page title
description: A description of this page.
layout: page.html
priority: 0.9
date: 2016-04-19
publish: draft
---

This is a demonstration page.

## Example title
Body text.</code>

大多數(shù)前題都是可選的，但您可以設置：

priority：介于 0（低）和 1（高）之間的數(shù)字，我們將使用它來排序菜單和定義 XML 站點地圖。
publish：可以設置為草稿、私有或未來日期，以確保它不會在需要之前發(fā)布。
date：文章的日期。如果沒有設置，我們將使用任何未來的發(fā)布日期或文件創(chuàng)建日期。
layout：要使用的 HTML 模板。

模板

HTML 頁面模板包含在 src/template 中。已定義兩個模板：

src/html/template/page.html 默認布局
src/html/template/article.md 顯示日期、前后鏈接等的文章布局

雖然支持其他選項，但使用了 Handlebars 模板系統(tǒng)。典型的模板需要一個 {{{ contents }}} 標記來包含頁面內容以及任何前題值，例如 {{ title }}：

<code>cd project && cd project
npm init -y
</code>

對 {{> meta }}、{{> header }} 和 {{> footer }} 的引用是部分……

部分

部分——或 HTML 代碼片段文件——包含在 src/partials 中。這些主要用于模板中，但也可以使用以下代碼包含在內容頁面中：

<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars
</code>

其中 partialname 是 src/partials 目錄中文件的名稱。

靜態(tài)資產

靜態(tài)資產（例如圖像、CSS 和 JavaScript 文件）包含在 src/assets 中。所有文件和子目錄都將按原樣復制到網站的根目錄。

自定義插件

構建站點所需的自定義插件包含在 lib 目錄中。

構建目錄

網站將在構建目錄中構建。我們將通過兩種方式構建網站：

開發(fā)模式：HTML 不會被壓縮，并且會啟動測試 Web 服務器。
生產模式：如果 NODE_ENV 設置為 production，則會清除構建目錄并生成最終壓縮的文件。

定義您的第一個構建文件

可以在項目目錄的根目錄中創(chuàng)建一個名為 build.js 的基本示例：

<code>---
title: My page title
description: A description of this page.
layout: page.html
priority: 0.9
date: 2016-04-19
publish: draft
---

This is a demonstration page.

## Example title
Body text.</code>

使用 node ./build.js 運行它，一個靜態(tài)網站將在構建目錄中創(chuàng)建。Markdown 將被解析為 HTML，但它不可用，因為我們沒有在構建過程中包含模板。

Metalsmith 插件

從表面上看，Metalsmith 構建文件看起來類似于 Gulp 中使用的構建文件（盡管它不使用流）。通過使用任何適當?shù)膮?shù)將其傳遞給 Metalsmith use 方法來調用插件。插件本身必須返回另一個函數(shù)，該函數(shù)接受三個參數(shù)：

一個 files 數(shù)組，包含有關每個頁面的信息
一個 metalsmith 對象，包含全局信息，例如元數(shù)據(jù)，以及
一個 done 函數(shù)，在插件完成工作后必須調用該函數(shù)

這個簡單的示例將所有元數(shù)據(jù)和頁面信息記錄到控制臺（它可以在 build.js 中定義）：

<code>
 lang="en">
  >
    {{> meta }}
  >
  >

  {{> header }}

  <main>></main>
    >

      {{#if title}}
        <h1>></h1>{{ title }}>
      {{/if}}

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

Metalsmith 構建代碼可以更新為使用此插件：

<code>{{> partialname }}</code>

此調試函數(shù)可以幫助您創(chuàng)建自己的自定義插件，但是您可能需要的絕大多數(shù)功能都已經編寫好了——Metalsmith 網站上列出了很長的插件列表。

制作更好的構建

下面解釋了演示站點構建文件的主要部分。

如果 NODE_ENV 環(huán)境變量已設置為 production（在 Mac/Linux 上導出 NODE_ENV=production 或在 Windows 上設置 NODE_ENV=production），則變量 devBuild 將設置為 true：

<code>cd project && cd project
npm init -y
</code>

主目錄在 dir 對象中定義，以便我們可以重復使用它們：

<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars
</code>

加載 Metalsmith 和插件模塊。注意：

優(yōu)秀的 Browsersync 測試服務器僅在創(chuàng)建開發(fā)構建時才需要
htmlmin 引用的 HTML 壓縮程序模塊僅在創(chuàng)建生產構建時才需要
已定義三個自定義插件：setdate、moremeta 和 debug（下面將更詳細地解釋）

<code>---
title: My page title
description: A description of this page.
layout: page.html
priority: 0.9
date: 2016-04-19
publish: draft
---

This is a demonstration page.

## Example title
Body text.</code>

siteMeta 對象使用應用于每個頁面的信息定義。重要的值是 domain 和 rootpath，它們根據(jù)開發(fā)或生產構建進行設置：

<code>
 lang="en">
  >
    {{> meta }}
  >
  >

  {{> header }}

  <main>></main>
    >

      {{#if title}}
        <h1>></h1>{{ title }}>
      {{/if}}

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

還定義了一個 templateConfig 對象來設置模板默認值。這將由 metalsmith-in-place 和 metalsmith-layouts 插件使用，它們啟用使用 Handlebars 的頁面內和模板渲染：

<code>{{> partialname }}</code>

Metalsmith 對象現(xiàn)在像以前一樣初始化，但我們還將 siteMeta 對象傳遞給 metadata 方法，以確保該信息可用于每個頁面。因此，我們可以在任何頁面中引用諸如 {{ name }} 之類的項目以獲取站點名稱。

<code>// basic build

'use strict';

var
  metalsmith = require('metalsmith'),
  markdown   = require('metalsmith-markdown'),

  ms = metalsmith(__dirname) // the working directory
    .clean(true)            // clean the build directory
    .source('src/html/')    // the page source directory
    .destination('build/')  // the destination directory
    .use(markdown())        // convert markdown to HTML
    .build(function(err) {  // build the site
      if (err) throw err;   // and throw errors
    });
</code>

我們的第一個插件調用調用 metalsmith-publish，它刪除任何其前題 publish 值設置為草稿、私有或未來日期的文件：

<code>function debug(logToConsole) {
  return function(files, metalsmith, done) {
    if (logToConsole) {
      console.log('\nMETADATA:');
      console.log(metalsmith.metadata());

      for (var f in files) {
        console.log('\nFILE:');
        console.log(files[f]);
      }
    }

    done();
  };
};
</code>

setdate 是包含在 lib/metalsmith-setdate.js 中的自定義插件。它確保每個文件都設置了“date”值，即使在前題中沒有定義任何值，也可以通過盡可能回退到發(fā)布日期或文件創(chuàng)建時間來實現(xiàn)：

<code>ms = metalsmith(__dirname) // the working directory
  .clean(true)             // clean the build directory
  .source('src/html/')     // the page source directory
  .destination('build/')   // the destination directory
  .use(markdown())         // convert Markdown to HTML
  .use(debug(true))        // *** NEW *** output debug information
  .build(function(err) {   // build the site
    if (err) throw err;    // and throw errors
  });
</code>

metalsmith-collections 是最重要的插件之一，因為它根據(jù)頁面在源目錄中的位置或其他因素將每個頁面分配給類別或分類法。它可以使用前題（例如日期或優(yōu)先級）重新排序文件，并允許您為該集合設置自定義元數(shù)據(jù)。代碼定義：

src/html/start 目錄中每個文件的 start 集合。它按文件中前題中設置的優(yōu)先級值對它們進行排序。
src/html/article 目錄中每個文件的 article 集合。它按反時間順序對它們進行排序
每個名為 index.* 的默認頁面的 page 集合。它按文件中前題中設置的優(yōu)先級值對它們進行排序。

<code>devBuild = ((process.env.NODE_ENV || '').trim().toLowerCase() !== 'production')
</code>

接下來是 Markdown 到 HTML 的轉換，然后是 metalsmith-permalinks 插件，它為構建定義了目錄結構。請注意，moremeta 在下面為每個文件設置了 :mainCollection：

<code>dir = {
  base:   __dirname + '/',
  lib:    __dirname + '/lib/',
  source: './src/',
  dest:   './build/'
}
</code>

metalsmith-word-count 計算文章中的字數(shù)并計算大約需要多長時間才能閱讀。參數(shù) { raw: true } 僅輸出數(shù)字：

<code>metalsmith  = require('metalsmith'),
markdown    = require('metalsmith-markdown'),
publish     = require('metalsmith-publish'),
wordcount   = require("metalsmith-word-count"),
collections = require('metalsmith-collections'),
permalinks  = require('metalsmith-permalinks'),
inplace     = require('metalsmith-in-place'),
layouts     = require('metalsmith-layouts'),
sitemap     = require('metalsmith-mapsite'),
rssfeed     = require('metalsmith-feed'),
assets      = require('metalsmith-assets'),
htmlmin     = devBuild ? null : require('metalsmith-html-minifier'),
browsersync = devBuild ? require('metalsmith-browser-sync') : null,

// custom plugins
setdate     = require(dir.lib + 'metalsmith-setdate'),
moremeta    = require(dir.lib + 'metalsmith-moremeta'),
debug       = consoleLog ? require(dir.lib + 'metalsmith-debug') : null,
</code>

moremeta 是包含在 lib/metalsmith-moremeta.js 中的另一個自定義插件。它將其他元數(shù)據(jù)附加到每個文件：

root：到根目錄的絕對或計算出的相對文件路徑
isPage：對于名為 index.* 的默認部分頁面設置為 true
mainCollection：主要集合名稱，即 start 或 article
layout：如果未設置，則可以從主集合的元數(shù)據(jù)中確定布局模板
navmain：頂級導航對象的數(shù)組
navsub：二級導航對象的數(shù)組

插件代碼比較復雜，因為它處理導航。如果您需要更簡單的層次結構，則有更簡單的選項。

<code>cd project && cd project
npm init -y
</code>

metalsmith-in-place 和 metalsmith-layouts 插件分別控制頁面內和模板布局。傳遞上面定義的相同 templateConfig 對象：

<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars
</code>

如果設置了 htmlmin（在生產構建中），我們可以壓縮 HTML：

<code>---
title: My page title
description: A description of this page.
layout: page.html
priority: 0.9
date: 2016-04-19
publish: draft
---

This is a demonstration page.

## Example title
Body text.</code>

debug 是包含在 lib/metalsmith-debug.js 中的最終自定義插件。它類似于上面描述的 debug 函數(shù)：

<code>
 lang="en">
  >
    {{> meta }}
  >
  >

  {{> header }}

  <main>></main>
    >

      {{#if title}}
        <h1>></h1>{{ title }}>
      {{/if}}

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

啟動 Browsersync 測試服務器，以便我們可以測試開發(fā)構建。如果您以前沒有使用過它，它看起來就像魔法：每次您進行更改時，您的網站都會神奇地刷新，并且當您滾動或瀏覽網站時，兩個或多個瀏覽器中的視圖會同步：

<code>{{> partialname }}</code>

最后，我們可以使用：

metalsmith-mapsite 生成 XML 站點地圖
metalsmith-feed 為 article 集合中的頁面生成 RSS 提要
metalsmith-assets 直接將 src/assets 中的文件和目錄復制到 build，而無需修改。

<code>// basic build

'use strict';

var
  metalsmith = require('metalsmith'),
  markdown   = require('metalsmith-markdown'),

  ms = metalsmith(__dirname) // the working directory
    .clean(true)            // clean the build directory
    .source('src/html/')    // the page source directory
    .destination('build/')  // the destination directory
    .use(markdown())        // convert markdown to HTML
    .build(function(err) {  // build the site
      if (err) throw err;   // and throw errors
    });
</code>

剩下的就是最后的 .build() 步驟來創(chuàng)建網站：

<code>function debug(logToConsole) {
  return function(files, metalsmith, done) {
    if (logToConsole) {
      console.log('\nMETADATA:');
      console.log(metalsmith.metadata());

      for (var f in files) {
        console.log('\nFILE:');
        console.log(files[f]);
      }
    }

    done();
  };
};
</code>

完成后，您可以再次運行 node ./build.js 來構建您的靜態(tài)網站。

需要注意的地方

我在構建簡單的 Metalsmith 網站時學到了很多東西，但請注意以下問題：

不兼容的插件

插件可能會與其他插件沖突。例如，計算相對根路徑的 metalsmith-rootpath 與創(chuàng)建自定義構建目錄結構的 metalsmith-permalinks 不太兼容。我通過在 lib/metalsmith-moremeta.js 插件中編寫自定義根路徑計算代碼解決了此問題。

插件順序至關重要

如果插件放置的順序錯誤，則插件可能會相互依賴或沖突。例如，生成 RSS 的 metalsmith-feed 插件必須在 metalsmith-layouts 之后調用，以確保不會在頁面模板中生成 RSS XML。

Browsersync 重新構建問題

當 Browsersync 運行并編輯文件時，集合會被重新解析，但舊數(shù)據(jù)似乎仍然存在。這可能是 lib/metalsmith-moremeta.js 自定義插件的問題，但菜單和前后鏈接可能會不同步。要修復它，請使用 Ctrl/Cmd C 停止構建并重新啟動構建。

您是否仍然需要 Gulp？

使用 Gulp 等任務管理器的人會注意到 Metalsmith 提供了一個熟悉的構建過程。有用于使用 Sass 進行 CSS 預處理、圖像壓縮、文件連接、丑化和更多功能的插件。對于更簡單的流程，它可能就足夠了。

但是，Gulp 具有更廣泛的插件范圍，并允許進行復雜的構建活動，例如 lint、部署和使用 auto-prefixer 的 PostCSS 處理。有一些 Gulp/Metalsmith 集成插件，盡管我遇到了一些問題，并且它們不應該是必要的，因為 Gulp 任務可以直接運行 Metalsmith，例如

<code>cd project && cd project
npm init -y
</code>

此過程可以防止上面提到的 Browsersync 重新構建問題。請記住使用 .clean(false) 以確保當其他任務處于活動狀態(tài)時，Metalsmith 永遠不會清除構建文件夾。

Metalsmith 適合您嗎？

如果您有簡單或高度定制的網站需求，Metalsmith 是理想的選擇。也許可以嘗試使用文檔項目并一次添加一個功能。Metalsmith 并不像 Jekyll 等替代方案那樣功能齊全，但它并非旨在如此。您可能需要編寫自己的插件，但這樣做很容易，這對 JavaScript 開發(fā)人員來說是一個巨大的好處。

創(chuàng)建 Metalsmith 構建系統(tǒng)需要時間，我們還沒有考慮 HTML 模板和部署所涉及的工作量。但是，一旦您擁有一個可用的流程，添加、編輯和刪除 Markdown 文件就會變得非常簡單。它可能比使用 CMS 更容易，并且您擁有靜態(tài)網站的所有好處。

關于使用 Metalsmith 創(chuàng)建靜態(tài)網站的常見問題

什么是 Metalsmith，為什么我應該使用它來創(chuàng)建靜態(tài)網站？

Metalsmith 是一款簡單易用的可插入靜態(tài)網站生成器。它基于 Node.js，并使用模塊化結構，允許您通過插件根據(jù)需要添加功能。這使其具有令人難以置信的靈活性和可定制性。您應該使用 Metalsmith 創(chuàng)建靜態(tài)網站，因為它允許您完全按照自己的意愿構建網站，而無需受傳統(tǒng) CMS 的限制。此外，靜態(tài)網站比動態(tài)網站更快、更安全且更易于維護。

如何安裝 Metalsmith？

要安裝 Metalsmith，您需要在計算機上安裝 Node.js 和 npm。安裝這些后，您可以通過在終端中運行命令 npm install metalsmith 來安裝 Metalsmith。這將安裝 Metalsmith 及其所有依賴項。

如何創(chuàng)建一個新的 Metalsmith 項目？

要創(chuàng)建一個新的 Metalsmith 項目，首先在終端中導航到要創(chuàng)建項目的目錄。然后，運行命令 metalsmith 創(chuàng)建一個新項目。這將創(chuàng)建一個新的目錄，其名稱為您的項目名稱，在此目錄內，它將為您的靜態(tài)網站創(chuàng)建一個基本結構。

如何在我的 Metalsmith 項目中添加插件？

要向您的 Metalsmith 項目添加插件，您需要通過 npm 安裝它們，然后在您的 Metalsmith 配置文件中引用它們。例如，要添加 markdown 插件，您首先需要運行 npm install metalsmith-markdown，然后在您的配置文件中，您需要添加 var markdown = require('metalsmith-markdown'); 并將 .use(markdown()) 添加到您的 Metalsmith 構建鏈中。