Cara paling mudah untuk mengendalikan html termasuk

Sangat mengejutkan saya bahawa HTML tidak pernah mempunyai cara untuk memasukkan fail HTML yang lain di dalamnya. Tidak ada yang kelihatan seperti apa -apa di kaki langit yang menangani masalah itu. Saya bercakap tentang lurus termasuk , seperti mengambil sebahagian html dan merapatkannya ke yang lain. Sebagai contoh kes penggunaan untuk sebahagian besar internet, header dan footer yang disertakan untuk semua halaman:

 …

   <termasuk src="./%20header.html"> 

   Kandungan

   <termasuk src="./%20footer.html"> 

…</termasuk></termasuk>

Itu tidak nyata, dengan cara ini. Saya hanya berharap ia.

Orang telah mencari bahasa lain untuk menyelesaikan masalah ini untuk mereka selama -lamanya. Ia adalah pra -proses HTML, dalam erti kata. Lama sebelum kami memproses CSS kami, kami menggunakan alat untuk memanipulasi HTML kami. Dan kami masih, kerana idea termasuk berguna pada setiap laman web di dunia.

Gunakan php

Bolehkah anda menggunakan PHP sebaliknya?

 …

    Php termasuk "./header.html"?>

   Kandungan

    php termasuk "./footer.html"?>

…

Ini akan melibatkan termasuk di peringkat pelayan, membuat permintaan untuk ia berlaku pada tahap sistem fail pada pelayan, jadi ia harus jauh lebih cepat daripada penyelesaian sisi klien.

Gunakan Gulp

Apa yang lebih cepat daripada pelayan sampingan termasuk? Sekiranya termasuk diproses sebelum ini walaupun di pelayan. Gulp mempunyai pelbagai pemproses yang boleh melakukan ini. Salah satunya adalah-termasuk-termasuk.

Itu akan kelihatan seperti ini:

 …

   @@ termasuk ('./ header.html')

   Kandungan

   @@ termasuk ('./ footer.html')

…

Dan anda akan memprosesnya seperti:

 var fileinclude = memerlukan ('gulp-file-in-include'),
  Gulp = memerlukan ('gulp');
 
Gulp.Task ('Fileinclude', fungsi () {
  gulp.src (['index.html'])
    .pipe (fileinclude ({
      Awalan: '@@',
      BasePath: '@file'
    }))
    .pipe (gulp.dest ('./'));
});

Sepertinya plugin tertentu ini mempunyai ciri-ciri mewah di mana anda boleh lulus dalam pembolehubah ke termasuk, menjadikannya mungkin untuk membuat komponen yang didorong oleh data.

Gunakan Grunt

Inilah yang dilakukan oleh plugin Grunt-Bake. Anda akan mengkonfigurasi Grunt untuk memproses HTML anda:

 grunt.initconfig ({
    bakar: {
        anda_target: {
            Fail: {
                "dist/index.html": "app/index.html",
            }
        }
    }
});

Kemudian HTML anda boleh menggunakan sintaks khas ini termasuk:

 …

   

   Kandungan

   

…

Gunakan hendal

Handlebars mempunyai separa.

Anda mendaftarkannya:

 Handlebars.RegisterPartial ('myPartial', '{{name}}')

Kemudian gunakannya:

 {{> myPartial}}

Terdapat juga ciri -ciri mewah yang membolehkan penilaian dan lulus data. Anda masih memerlukan pemproses untuk menjalankannya, mungkin sesuatu seperti gulp-handlebars.

Bercakap tentang bahasa templat yang menggunakan pendakap keriting ... misai juga mempunyai mereka.

Gunakan PUG

PUG adalah preprocessor HTML yang mempunyai sintaks baru untuk HTML yang sedikit lebih terse. Ia juga termasuk.

 …
badan
   termasuk ./header.html "

   kandungan p

   termasuk ./footer.html "

   …

Kemudian anda menjalankannya dengan sesuatu seperti Gulp-Pug.

Gunakan nunjucks

Saya suka saya beberapa nunjucks! Nunjucks termasuk. Anda akan melakukannya seperti ini:

 …

   { % termasuk "./header.html" %}

   Kandungan

   { % termasuk "./footer.html" %}

…

Jika anda memasukkannya ke dalam fail yang dipanggil index.njk, anda boleh memprosesnya dengan skrip nod mudah ke index.html seperti ini:

 const nunjucks = memerlukan ("nunjucks");
const fs = memerlukan ("fs");

fs.writeFile ("index.html", nunjucks.render ("index.njk"), fungsi (err, data) {
  jika (err) console.log (err);
  Console.log ("Menyusun Nunjucks, Kapten.");
});

Atau memprosesnya dengan sesuatu seperti Gulp-Nunjucks.

11ty mempunyai nunjucks terbina dalam, bersama-sama dengan banyak yang lain disebutkan setakat ini. Mungkin baik untuk anda jika anda sebenarnya membina tapak kecil.

Gunakan Ajax

Katakan anda ada ...

 
  
  <header> </header>
  
  Kandungan.
  
  <tooter> 

</tooter>

Anda boleh mengambil kandungan untuk header dan footer dari fail masing -masing dan membuang kandungannya.

 Ambil ("./ header.html")
  .tua (respons => {
    RELOW RESPONSE.TEXT ()
  })
  .THEN (data => {
    document.QuerySelector ("header"). innerHtml = data;
  });

Ambil ("./ footer.html")
  .tua (respons => {
    RELOW RESPONSE.TEXT ()
  })
  .THEN (data => {
    document.QuerySelector ("footer"). innerHtml = data;
  });

Bercakap tentang JavaScript ... Jika anda membina laman web anda menggunakan rangka kerja JavaScript dalam apa jua bentuk, membina melalui komponen adalah jenis perjanjian utama di sana dan memecahkan bahagian yang anda ingin sertakan dalam fail lain tidak seharusnya menjadi masalah. Beberapa jenis pengepala import dari "./header.js"; dan

adalah wilayah yang anda akan berada di tanah React.

Gunakan iframes

Anda boleh melakukan ini:

 
  
  <iframe src="./%20header.html"> </iframe>
  
  Kandungan.
  
  <iframe src="./%20footer.html"> </iframe>
  

Tetapi kandungan dalam iframes itu tidak berkongsi dom yang sama, jadi agak pelik, belum lagi lambat dan janggal kepada gaya (kerana iframes tidak tahu ketinggian kandungan mereka).

Scott Jehl mendokumenkan idea yang sejuk walaupun: anda boleh mempunyai iframe menyuntik kandungan dirinya ke halaman induk kemudian mengeluarkannya sendiri.

 
  
  <iframe src="header.html" onload="this.before ((this.contentdocument.body || this.contentdocument) .children [0]); this.remove ()"> </iframe>
  
  Kandungan.
  
  <iframe src="footer.html" onload="this.before ((this.contentdocument.body || this.contentdocument) .children [0]); this.remove ()"> </iframe>
  

Kolya Korruptis menulis dengan penyesuaian ini yang akan merangkumi lebih daripada anak pertama badan sekiranya fail HTML anda mempunyai:

 <iframe src="termasuk.html" onload="this.insertadjacenthtml ('afterend', (this.contentdocument.body || this.contentdocument) .innerHtml); this.remove ()"> </iframe>

Gunakan Jekyll

Jekyllis Sebuah penjana tapak statik berasaskan Ruby dengan includes. Anda menyimpan termasuk anda dalam/_ includes/folder, maka:

 
  { % termasuk header.html %}
  
  Kandungan.

  { % termasuk footer.html %}

Jekyll adalah yang besar, jadi saya memanggilnya di sini, tetapi ada kawasan penjana tapak statik dan saya akan bertaruh mana -mana daripada mereka boleh lakukan termasuk.

Gunakan Sergey

Ok, saya akan memanggil satu moressgbecause itu baru dan super fokus.sergeyhas format gaya komponen web:

 
  <sergey-import src="header"></sergey-import>

  Kandungan.

  <sergey-import src="footer"></sergey-import>

Anda akan menamakan filesheader.htmlandfooter.htmland meletakkan mereka dalam/termasuk/dan kemudian ia akan membuat binaan dengan termasuk yang diproses apabila anda menjalankan skrip NPM yang anda lakukan.

Gunakan Apache SSI

Apache, pelayan web biasa Super Duper, Cando termasuk. Anda melakukannya seperti ini:

 
		
  
  
  Kandungan
  
  
  

Tetapi anda memerlukan konfigurasi Apache yang betul untuk membolehkan barangan. Saya berusaha sedaya upaya untuk mendapatkan demo kerja tetapi tidak mempunyai banyak nasib.

Saya cuba menggunakan.htaccesswithin folder pada pelayan Apache dan membalikkan apa yang saya fikir adalah perkara yang betul:

 Pilihan termasuk

Teks AddType/html .html
AddOutputFilter termasuk .html

Saya pasti ada cara untuk mendapatkannya berfungsi walaupun, dan jika anda melakukannya, agak kemas bahawa ia memerlukan sifar kebergantungan lain.

Gunakan CodeKit

MAC sahaja, tetapi bahasa khas CodeKit Hasa yang dipanggil Proses Kitit di mana 90% dari titik itu adalah HTML termasuk. Ia menggunakan komen HTML khas:

 …

   

   Kandungan

   

…

Gunakan Dreamweaver

Lol jk. Tetapi ia adalah satu perkara.dwts, sayang.

Omong kosong suci

Itu banyak cara, bukan?

Seperti yang saya katakan di bahagian atas, sangat mengejutkan saya bahawa HTML sendiri tidak menangani perkara ini secara langsung. Bukannya saya fikir ia akan menjadi idea yang bagus untuk prestasi mempunyai kenyataan yang memicu permintaan rangkaian di seluruh kod kami, tetapi nampaknya selaras dengan platform. Menggunakan ES6 Import secara langsung tanpa bundling bukan idea yang hebat selalu sama ada, tetapi kami mempunyai mereka.@Mengimport CSS dalam CSS bukan idea yang hebat selalu, tetapi kami memilikinya. Sekiranya platform mempunyai sintaks asli, mungkin perkakas lain akan mematikannya, seperti bundlers JavaScript menyokong format import ES6.

Atas ialah kandungan terperinci Cara paling mudah untuk mengendalikan html termasuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!