Cara Membuat Tapak Statik dengan MetalSmith

Artikel sebelumnya membincangkan sebab -sebab sama ada menggunakan penjana laman web statik. Singkatnya, penjana laman web statik membina fail halaman yang mengandungi hanya HTML dari templat dan data mentah (biasanya termasuk dalam fail markdown). Ia menawarkan beberapa manfaat CMS tanpa overhead hosting, prestasi dan keselamatan.

Laman web statik mungkin sesuai untuk pelbagai projek, termasuk:

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.

Pada dasarnya, penjana laman web statik adalah alat bangunan. Anda boleh menggunakannya untuk menjalankan tugas atau perancah projek seperti yang anda lakukan dengan Grunt atau Gulp.

mata utama

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.

Mengapa memilih Metalsmith?

Juara laman web statik yang tidak dipertikaikan ialah Jekyll - projek Ruby yang dilancarkan pada tahun 2008. Anda tidak semestinya memerlukan kepakaran Ruby untuk menggunakan Jekyll, tetapi itu akan membantu. Nasib baik, bahasa yang paling popular mempunyai pelbagai penjana laman web statik sumber terbuka. Pilihan JavaScript termasuk Hexo, Harp, dan Berkumpul. Untuk projek yang lebih mudah, anda juga boleh menggunakan alat binaan seperti Gulp.

saya memilih MetalSmith untuk tutorial ini kerana ia:

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.

Tutorial ini telah membina laman web demo. Ia tidak akan memenangi sebarang anugerah reka bentuk, tetapi ia menggambarkan konsep asas. Kod membina Metalsmith boleh diperiksa dan dipasang dari repositori GitHub. Sebagai alternatif, anda boleh mengikuti arahan di sini dan membuat laman asas anda sendiri.

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.

Proses membina menukarkan fail ini ke dalam permalink berasaskan direktori, seperti

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

kebanyakan soalan preface adalah pilihan, tetapi anda boleh menetapkan:

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

Keutamaan: Nombor antara 0 (rendah) dan 1 (tinggi), yang akan kami gunakan untuk menyusun menu dan menentukan sitemap XML.

Terbitkan: Boleh ditetapkan sebagai draf, swasta, atau tarikh masa depan untuk memastikan ia tidak diterbitkan sebelum diperlukan.

• 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

Bahagian

-atau fail coretan HTML -terkandung dalam SRC/PARTIAL. Ini terutamanya digunakan dalam templat, tetapi juga boleh dimasukkan ke dalam halaman kandungan menggunakan kod berikut:

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

di mana partialname adalah nama fail dalam direktori Src/Partials.

Aset statik

Aset statik (seperti imej, CSS, dan fail JavaScript) dimasukkan ke dalam SRC/aset. Semua fail dan subdirektori akan disalin seperti akar laman web.

Plugin Custom

Plugin tersuai yang diperlukan untuk membina tapak dimasukkan ke dalam direktori lib.

Bina direktori

Laman web akan dibina dalam direktori Build. Kami akan membina laman web dalam dua cara:

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.

Tentukan fail binaan pertama anda

anda boleh membuat contoh asas yang dipanggil Build.js dalam direktori root direktori projek:

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

Jalankannya dengan nod ./build.js dan laman web statik akan dibuat dalam direktori Build. Markdown akan dihuraikan sebagai HTML, tetapi ia tidak tersedia kerana kami tidak memasukkan templat semasa proses membina.

Plugin Metalsmith

Di permukaan, fail membina Metalsmith kelihatan serupa dengan yang digunakan di Gulp (walaupun ia tidak menggunakan aliran). Hubungi plugin dengan menyampaikannya ke kaedah penggunaan Metalsmith menggunakan sebarang hujah yang sesuai. Plugin itu sendiri mesti mengembalikan fungsi lain, yang menerima tiga parameter:

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

Contoh mudah ini log semua metadata dan maklumat halaman ke konsol (ia boleh ditakrifkan dalam build.js):

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

  {{> header }}

  <main>></main>
    >

      {{#if title}}
        <h1 id="gt">></h1>{{ title }}>
      {{/if}}

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

kod binaan logam boleh dikemas kini untuk menggunakan plugin ini:

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

Fungsi debugging ini dapat membantu anda membuat plugin tersuai anda sendiri, tetapi kebanyakan ciri yang anda perlukan sudah ditulis - terdapat senarai panjang plugin di laman web Metalsmith.

Buat binaan yang lebih baik

Bahagian utama fail membina tapak demo dijelaskan di bawah.

Jika pembolehubah persekitaran NODE_ENV ditetapkan kepada pengeluaran (eksport node_env = pengeluaran pada mac/linux atau node_env = pengeluaran pada tingkap), pembolehubah pembolehubah akan ditetapkan kepada benar:

<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 id="gt">></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>

Objek

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>

seterusnya ialah penukaran HTML, diikuti oleh plugin MetalSmith-Permalinks, yang mentakrifkan struktur direktori untuk membina. Sila ambil perhatian bahawa Moremeta Sets: MainCollection untuk setiap fail di bawah:

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

Metalsmith-Word-Count mengira bilangan perkataan dalam artikel dan mengira berapa lama masa yang diperlukan untuk membacanya. Parameter {raw: true} Output Only Numbers:

<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 adalah satu lagi plugin tersuai yang termasuk dalam lib/metalsmith-moremeta.js. Ia melekatkan metadata lain ke setiap fail:

• 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

kod plugin lebih rumit kerana ia mengendalikan navigasi. Jika anda memerlukan hierarki yang lebih mudah, terdapat pilihan yang lebih mudah.

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

Plugin Metalsmith-in-Place dan Metalsmith-Layouts mengawal susun atur halaman dan templat masing-masing. Lulus objek TemplateConfig yang sama seperti yang ditakrifkan di atas:

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

Jika htmlmin ditetapkan (dalam binaan pengeluaran), kita boleh memampatkan 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 adalah plugin tersuai terakhir yang termasuk dalam lib/metalsmith-debug.js. Ia serupa dengan fungsi debug yang diterangkan di atas:

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

  {{> header }}

  <main>></main>
    >

      {{#if title}}
        <h1 id="gt">></h1>{{ title }}>
      {{/if}}

      {{{ contents }}}

    >
  >

  {{> footer }}

>
>
</code>

Mulakan pelayan ujian BrowserSync supaya kami dapat menguji pembangunan pembangunan. Sekiranya anda tidak menggunakannya sebelum ini, ia kelihatan seperti sihir: Setiap kali anda membuat perubahan, laman web anda akan menyegarkan semula secara ajaib, dan apabila anda menatal atau melayari laman web, pandangan dalam dua atau lebih pelayar akan menyegerakkan:

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

Akhirnya, kita boleh menggunakan:

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>

selebihnya adalah langkah terakhir .build () untuk membuat laman web:

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

Apabila anda selesai, anda boleh menjalankan nod ./build.js sekali lagi untuk membina laman web statik anda.

apa yang perlu diberi perhatian kepada

Saya belajar banyak ketika membina laman web Metalsmith yang mudah, tetapi sedar tentang isu -isu berikut:

Plug-ins tidak serasi

plugin mungkin bertentangan dengan plugin lain. Sebagai contoh, mengira metalsmith-rootpath laluan akar relatif tidak begitu serasi dengan Metalsmith-Permalinks yang membuat struktur direktori membina tersuai. Saya menyelesaikan masalah ini dengan menulis kod pengiraan laluan akar tersuai dalam plugin lib/metalsmith-moremeta.js.

pesanan plugin sangat penting

Jika plugin diletakkan dalam urutan yang salah, plugin mungkin bergantung kepada atau konflik. Sebagai contoh, plugin makanan metalsmith yang menjana RSS mesti dipanggil selepas lapisan logam untuk memastikan bahawa RSS XML tidak dijana dalam templat halaman.

BrowserSync membina semula isu

Apabila BrowserSync berjalan dan menyunting fail, koleksi itu ditarik balik, tetapi data lama masih kelihatan. Ini mungkin menjadi masalah dengan plugin adat lib/metalsmith-moremeta.js, tetapi pautan menu dan depan dan belakang mungkin tidak disegerakkan. Untuk memperbaikinya, hentikan membina dan mulakan semula binaan menggunakan Ctrl/Cmd C.

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.

Walau bagaimanapun, Gulp mempunyai pelbagai plugin yang lebih luas dan membolehkan aktiviti membina kompleks seperti serat, penempatan, dan pemprosesan postCSS menggunakan auto-prefixer. Terdapat beberapa plugin integrasi Gulp/Metalsmith, walaupun saya mempunyai beberapa masalah dan mereka tidak perlu kerana tugas -tugas Gulp boleh menjalankan MetalSmith secara langsung, mis

Proses ini menghalang penyebaran BrowserSync yang disebutkan di atas. Ingatlah untuk menggunakan .clean (palsu) untuk memastikan bahawa Metalsmith tidak pernah membersihkan folder binaan apabila tugas lain aktif.

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

Adakah Metalsmith sesuai untuk anda?

Metalsmith sangat sesuai jika anda mempunyai keperluan laman web yang mudah atau sangat disesuaikan. Mungkin cuba gunakan projek dokumen dan tambahkan satu ciri pada satu masa. Metalsmith tidak berfungsi sepenuhnya sebagai alternatif seperti Jekyll, tetapi ia tidak direka untuk menjadi seperti itu. Anda mungkin perlu menulis plugin anda sendiri, tetapi mudah untuk melakukannya, yang merupakan manfaat besar bagi pemaju JavaScript.

Membuat sistem membina Metalsmith memerlukan masa, dan kami tidak menganggap jumlah kerja yang terlibat dalam templat dan penempatan HTML. Walau bagaimanapun, sebaik sahaja anda mempunyai proses yang tersedia, menambah, mengedit, dan memadam fail markdown menjadi sangat mudah. Ia mungkin lebih mudah daripada menggunakan CMS, dan anda mempunyai semua manfaat laman web statik.

Soalan Lazim Mengenai Mewujudkan Laman Web Statik dengan Metalsmith

Apa itu Metalsmith dan mengapa saya harus menggunakannya untuk membuat laman web statik?

Metalsmith adalah penjana laman web statik yang mudah dan mudah digunakan. Ia berdasarkan node.js dan menggunakan struktur modular yang membolehkan anda menambah fungsi seperti yang diperlukan melalui plugin. Ini menjadikannya fleksibiliti dan kebolehcapaian yang luar biasa. Anda harus menggunakan Metalsmith untuk membuat laman web statik kerana ia membolehkan anda membina laman web anda dengan tepat seperti yang anda inginkan tanpa dibatasi oleh CMS tradisional. Di samping itu, laman web statik lebih cepat, lebih selamat, dan lebih mudah untuk mengekalkan daripada laman web dinamik.

bagaimana memasang metalsmith?

Untuk memasang Metalsmith, anda perlu memasang Node.js dan NPM pada komputer anda. Selepas memasang ini, anda boleh memasang Metalsmith dengan menjalankan perintah NPM memasang Metalsmith di terminal. Ini akan memasang Metalsmith dan semua kebergantungannya.

Bagaimana untuk membuat projek Metalsmith baru?

Untuk membuat projek Metalsmith baru, pertama menavigasi di terminal ke direktori di mana anda ingin membuat projek. Kemudian, jalankan perintah Metalsmith untuk membuat projek baru. Ini akan mewujudkan direktori baru dengan nama projek anda, dan dalam direktori ini ia akan mewujudkan struktur asas untuk laman web statik anda.

Bagaimana untuk menambah plugin ke projek Metalsmith saya?

Untuk menambah plugin ke projek Metalsmith anda, anda perlu memasangnya melalui npm dan kemudian merujuknya dalam fail konfigurasi MetalSmith anda. Sebagai contoh, untuk menambah plugin markdown, anda perlu menjalankan NPM memasang metalsmith-markdown, dan kemudian dalam fail konfigurasi anda, anda perlu menambah var markdown = memerlukan ('metalsmith-markdown'); )) Pergi ke rantaian membina Metalsmith anda.

Bagaimana membina laman web MetalSmith saya?

Untuk membina laman web MetalSmith anda, anda perlu menjalankan pembinaan Metalsmith di terminal. Ini menyusun semua fail dan mengeluarkannya ke direktori Build, yang kemudiannya boleh digunakan ke pelayan anda.

Bagaimana untuk menyesuaikan susun atur laman web MetalSmith saya?

Untuk menyesuaikan susun atur laman web Metalsmith anda, anda boleh menggunakan enjin templat seperti hendal atau jed. Ini membolehkan anda membuat templat yang boleh diguna semula untuk bahagian -bahagian laman web anda yang berlainan, seperti tajuk, kaki, dan halaman individu.

Bagaimana untuk menambah kandungan ke laman web Metalsmith saya?

Untuk menambah kandungan ke laman web Metalsmith anda, anda boleh membuat fail markdown dalam direktori sumber. Apabila membina laman web, fail -fail ini ditukar kepada HTML. Anda juga boleh menggunakan CMS seperti Netlify CMS untuk menguruskan kandungan anda.

Bagaimana untuk menggunakan laman web MetalSmith saya?

Untuk menggunakan laman web Metalsmith anda, anda boleh menggunakan perkhidmatan seperti Netlify atau GitHub Pages. Perkhidmatan ini akan menjadi tuan rumah laman web statik anda dan menggunakan perubahan secara automatik apabila anda menolak ke repositori.

Bagaimana untuk mengemas kini laman web MetalSmith saya?

Untuk mengemas kini laman web Metalsmith anda, anda hanya menukar fail sumber dan membina semula laman web anda. Perubahan akan ditunjukkan dalam direktori Build, yang kemudiannya boleh digunakan ke pelayan anda.

Bolehkah saya menggunakan Metalsmith untuk laman web yang besar dan kompleks?

Ya, Metalsmith sangat berskala dan boleh digunakan untuk laman web yang besar dan kompleks. Struktur modularnya membolehkan anda menambah fungsi seperti yang diperlukan, dan penggunaan fail statik bermakna ia dapat mengendalikan banyak kandungan tanpa melambatkan.

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