Cara Membuat Tapak Statik dengan MetalSmith

laman web kecil atau blog peribadi. Sebuah laman web dengan berpuluh -puluh halaman, jawatan yang jarang dan satu atau dua penulis mungkin ideal.
Dokumentasi teknikal, seperti API REST.
Prototaip aplikasi yang memerlukan satu siri pandangan web.
fail e-books-markdown boleh ditukar kepada PDF atau format lain dan HTML.

Metalsmith adalah penjana laman web statik pluggable yang fleksibel yang sesuai untuk mewujudkan laman web ringan tanpa overhead CMS tradisional.
Pemasangan dan persediaan Metalsmith memerlukan node.js, yang melibatkan memulakan direktori projek baru dan memasang plugin yang diperlukan melalui npm.
Struktur projek dalam Metalsmith melibatkan penganjuran fail sumber, templat, dan aset, dan jelas membezakan antara pembangunan dan pembinaan pengeluaran.
Metalsmith menggunakan pelbagai pemalam untuk memperluaskan fungsi, seperti pemprosesan fail markdown, mewujudkan suapan RSS, dan menghasilkan sitemaps, semuanya dikonfigurasi dalam membina fail.
Plugin tersuai boleh dibuat untuk mengendalikan tugas -tugas tertentu, seperti menubuhkan metadata atau menambah maklumat debug, meningkatkan kepelbagaian MetalSmith dalam menguruskan kandungan dan struktur laman web.
Proses membina Metalsmith boleh diintegrasikan dengan pelari tugas seperti Gulp untuk menangani senario yang lebih kompleks, walaupun Metalmith sendiri mencukupi untuk proses yang lebih mudah.

tidak mensasarkan jenis projek tertentu (seperti blog)
menyokong pelbagai pilihan templat dan format data
ringan
Keterlambatan yang jarang berlaku
menggunakan struktur modular
menyediakan seni bina pemalam yang mudah, serta
mudah dimulakan.

Saya telah menggunakan MetalSmith beberapa kali-sila fikir ini adalah cara utama untuk membina setiap laman web statik!

Pemasangan MetalSmith

Pastikan anda mempunyai Node.js yang dipasang (contohnya menggunakan NVM), kemudian buat direktori projek baru, seperti projek dan memulakan fail pakej.json anda:

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

Pasang Metalsmith Now dan pelbagai plugin yang akan kami gunakan untuk membina laman web ini. Ini adalah:

• Metalsmith-Aset-Sertakan aset statik dalam membina Metalmith anda
• Metalsmith-Browser-Sync-Mengintegrasikan BrowserSync ke aliran kerja anda
• Metalsmith-collections-Tambahkan koleksi fail ke metadata global
• Metalsmith-Feed-Menjana suapan RSS untuk koleksi
• Metalsmith-HTML-Minifier-memampatkan fail HTML menggunakan kangax/html-minifier
• Metalsmith-in-Place-Membuat sintaks template dalam fail sumber
• logam-layouts-Sapukan susun atur ke fail sumber anda
• metalsmith-mapsite-menghasilkan fail sitemap.xml
• metalsmith-markdown-menukar fail markdown
• Metalsmith-Permalinks-Gunakan mod Permalink tersuai ke fail
• Metalsmith-Publish-Posts yang menyokong draf, tarikh swasta dan masa depan
• Metalsmith-Word-Count-Kirakan kiraan perkataan/masa bacaan purata untuk semua perenggan dalam fail HTML

<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>

Struktur Projek

Kami akan menggunakan struktur berikut sebagai direktori sumber (SRC) dan membina (membina) dalam projek kami.

anda boleh membuat fail sampel seperti berikut, atau menyalinnya terus dari direktori demo SRC.

Page

fail markdown halaman dimasukkan ke dalam SRC/HTML. Ini boleh mengandungi subdirektori peringkat pertama untuk setiap bahagian laman web, iaitu

• Setiap direktori mengandungi fail index.md, yang merupakan halaman lalai untuk bahagian itu. Halaman lain boleh menggunakan nama unik.

src/html/start/index.md menjadi /start/index.html

src/html/start/installation.md menjadi /start/installation/index.html
• Setiap fail markdown menyediakan maklumat kandungan dan meta, yang dipanggil "Preface" terletak di bahagian atas antara - markah, mis

<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>

• Tarikh: Tarikh artikel. Jika tidak ditetapkan, kami akan menggunakan tarikh pelepasan masa depan atau tarikh penciptaan fail.
• Layout: Templat HTML untuk digunakan.
template
templat halaman HTML dimasukkan ke dalam SRC/Templat. Dua templat telah ditakrifkan:

• src/html/template/page.html susun atur lalai
• src/html/template/artikel.md susun atur artikel yang memaparkan tarikh, sebelum dan selepas pautan, dan lain -lain

Walaupun pilihan lain disokong, sistem templat hendal digunakan. Templat biasa memerlukan tag {{{{{}}} untuk mengandungi kandungan halaman dan sebarang nilai preface, seperti {{title}}:

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

Rujukan kepada {{& gt;

Bahagian

<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>

Mod Pembangunan: HTML tidak akan dimampatkan dan akan memulakan pelayan web ujian.
Mod Pengeluaran: Jika NODE_ENV ditetapkan kepada pengeluaran, direktori Build dibersihkan dan fail termampat akhir dihasilkan.

<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>

array fail yang mengandungi maklumat mengenai setiap halaman
Objek Metalsmith yang mengandungi maklumat global, seperti metadata, dan
fungsi yang dilakukan yang mesti dipanggil selepas plugin melengkapkan kerja

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

  {{> header }}

  <main>></main>
    >

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

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

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

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

direktori rumah ditakrifkan dalam objek Dir supaya kita dapat menggunakannya semula:

<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>

Load Metalsmith dan Modul Plug-in. NOTA:

• pelayan ujian browserync yang sangat baik hanya diperlukan semasa membuat pembangunan membina
• modul pemampat html yang dirujuk oleh htmlmin hanya diperlukan semasa membuat binaan pengeluaran
• Tiga plugin tersuai telah ditakrifkan: setdate, moremeta, dan debug (dijelaskan dengan lebih terperinci di bawah)

<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>

Objek SiteMeta ditakrifkan menggunakan maklumat yang digunakan untuk setiap halaman. Nilai penting adalah domain dan rootpath, yang ditetapkan berdasarkan pembangunan atau pengeluaran binaan:

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

  {{> header }}

  <main>></main>
    >

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

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

juga mentakrifkan objek TemplateConfig untuk menetapkan nilai lalai templat. Ini akan digunakan oleh plugin Metalsmith-in-Place dan Metalsmith-Layouts, yang membolehkan dalam halaman dan template rendering menggunakan hendal:

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

Metalsmith kini dimulakan seperti dahulu, tetapi kami juga lulus objek SiteMeta ke kaedah metadata untuk memastikan maklumat ini tersedia untuk setiap halaman. Jadi kita boleh merujuk kepada item seperti {{name}} dalam mana -mana halaman untuk mendapatkan nama tapak.

<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>

Panggilan plugin pertama kami MetalSmith-Publish, yang menghilangkan sebarang fail yang Nilai Penerbitan Preface ditetapkan untuk Draf, Swasta, atau Tarikh Masa Depan:

<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 adalah plugin tersuai yang termasuk dalam lib/metalsmith-setdate.js. Ia memastikan bahawa setiap fail mempunyai set nilai "tarikh", dan walaupun tiada nilai ditakrifkan dalam soalan sebelumnya, ia dapat dicapai dengan jatuh ke tarikh pelepasan atau masa penciptaan fail sebanyak mungkin:

<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 adalah salah satu plugin yang paling penting kerana ia memberikan setiap halaman ke kategori atau taksonomi berdasarkan lokasi atau faktor lain dalam direktori sumber. Ia boleh menyusun semula fail menggunakan prefaces seperti tarikh atau keutamaan dan membolehkan anda menetapkan metadata tersuai untuk koleksi. Definisi kod:

Koleksi permulaan setiap fail dalam direktori SRC/HTML/Mula. Ia menyusunnya dengan nilai keutamaan yang ditetapkan dalam soalan sebelumnya dalam fail.
Koleksi artikel setiap fail dalam direktori SRC/HTML/artikel. Ia menyusunnya dalam susunan anti-kronologi
Koleksi halaman setiap halaman lalai bernama indeks.*. Ia menyusunnya dengan nilai keutamaan yang ditetapkan dalam soalan sebelumnya dalam fail.

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

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

<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>

• root: Laluan fail relatif mutlak atau dikira ke direktori akar
• iSpage: Tetapkan ke Benar untuk halaman separa lalai yang dinamakan indeks.*
MainCollection: Nama Koleksi Utama, iaitu Mula atau Artikel
susun atur: Jika tidak ditetapkan, templat susun atur boleh ditentukan dari metadata koleksi utama
navmain: pelbagai objek navigasi peringkat atas
navsub: pelbagai objek navigasi sekunder

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

<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>

<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>

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

  {{> header }}

  <main>></main>
    >

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

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

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

Metalsmith-mapsite menjana sitemap XML
Metalsmith-Feed menghasilkan suapan RSS untuk halaman dalam koleksi artikel
Metalsmith-aset menyalin fail dan direktori dalam SRC/aset untuk membina tanpa pengubahsuaian.

<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>

<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>

Adakah anda masih memerlukan Gulp?

Orang yang menggunakan pengurus tugas seperti Gulp akan melihat bahawa Metalsmith menyediakan proses membina yang biasa. Terdapat pemalam untuk preprocessing CSS, pemampatan imej, sambungan fail, pencerobohan dan banyak lagi dengan SASS. Untuk proses yang lebih mudah, ia mungkin cukup.

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

Atas ialah kandungan terperinci Cara Membuat Tapak Statik dengan MetalSmith. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!