• <thead id="xg47n"><option id="xg47n"><listing id="xg47n"></listing></option></thead>
    <meter id="xg47n"></meter>
      <ruby id="xg47n"></ruby>
      <abbr id="xg47n"></abbr>
      <ruby id="xg47n"></ruby>
      <pre id="xg47n"><fieldset id="xg47n"></fieldset></pre>
      ><\/span>\n<\/span>    ><\/span>Hello, World!<\/h1<\/span>><\/span>\n<\/span>     class=\"remark\"<\/span>><\/span>\n<\/span>      ><\/span>Pug rocks!!<\/p<\/span>><\/span>\n<\/span>    <\/div<\/span>><\/span>\n<\/span>  <\/body<\/span>><\/span>\n<\/span><\/html<\/span>><\/span>\n<\/span><\/pre> Ia tidak semestinya tahap tahap lekukan yang anda gunakan (anda juga boleh menggunakan tab jika anda perlu), tetapi sangat disyorkan agar anda mengekalkan tahap lekukan konsisten. Dalam artikel ini saya akan menggunakan dua ruang. 
      <\/p>\n
       Kedua, Pug tidak mempunyai sebarang tag penutup. Ini jelas akan menjimatkan beberapa ketukan kekunci yang adil dan memberikan sintaks yang bersih dan mudah dibaca. <\/p>\n
       Sekarang kita mendapat pegangan pada beberapa pug asas, mari kita cepat pergi ke sintaksnya. Jika mana-mana ini kelihatan mengelirukan, atau anda ingin pergi lebih mendalam, pastikan anda berunding dengan dokumentasi yang sangat baik projek. <\/p>\n
       Doctype <\/h3>\n
       anda boleh menggunakan PUG untuk menghasilkan beberapa pengisytiharan jenis dokumen. <\/p>\n
       contohnya Doctype HTML akan disusun kepada , standard HTML5 DOCTYPE, sedangkan Doctype ketat akan memberi kami . Pug akan melakukan yang terbaik untuk memastikan outputnya sah untuk jenis dokumen. <\/p>\n
       tags <\/h3>\n
       Seperti yang disebutkan, Pug tidak mempunyai tag penutup dan bergantung pada lekukan untuk bersarang. Ini mungkin mengambil sedikit masa untuk digunakan, tetapi apabila anda melakukannya, ia menjadikan kod yang bersih dan boleh dibaca. Contohnya: <\/p>\n
      npm i -g pug-cli\n<\/span><\/pre>\n
       kod di atas disusun untuk ini: <\/p>\n
      $ pug --version\n<\/span>pug version: 2.0.3\n<\/span>pug-cli version: 1.0.0-alpha6\n<\/span><\/pre>\n
       Perhatikan bahawa PUG cukup pintar untuk menutup mana-mana tag penutupan diri (seperti  elemen) untuk kami. <\/p>\n
       Kelas, ID dan Atribut <\/h3>\n
       Kelas dan ID dinyatakan menggunakan notasi .ClassName dan #IdName. Contohnya: \n<\/st><\/p>\n
      mkdir -p pug-examples\/html\n<\/span>cd pug-examples\n<\/span>touch index.pug\n<\/span><\/pre> Pug juga menawarkan jalan pintas yang berguna. Jika tiada tag ditentukan, ia akan menganggap elemen : 
      \n<\/p>\n
      pug -w . -o .\/html -P\n<\/span><\/pre> Kedua -duanya menyusunnya kepada: 
      \n<\/p>\n ditambah menggunakan kurungan: 
      watching index.pug\nrendered \/home\/jim\/Desktop\/pug-examples\/html\/index.html\n<\/pre>\n
      \n<\/p> ini menghasilkan perkara berikut: 
      doctype html\n<\/span>html(lang='en'<\/span>)<\/span><\/span>\n<\/span> head\n<\/span>   title Hello, World!\n<\/span> body\n<\/span>   h1 Hello, World!\n<\/span>   div.remark<\/span>\n<\/span>     p Pug rocks!\n<\/span><\/pre>\n\n
      \n<\/p> Ada banyak lagi yang boleh dikatakan mengenai atribut. Sebagai contoh, anda boleh menggunakan JavaScript untuk memasukkan pembolehubah dalam atribut anda, atau memberikan pelbagai nilai kepada atribut. Kami akan menggunakan JavaScript di Pug di bahagian seterusnya. 
      <\/span>\n<\/span> lang=\"en\"<\/span>><\/span>\n<\/span>  ><\/span>\n<\/span>    ><\/span>Hello, World!<\/title<\/span>><\/span>\n<\/span>  <\/head<\/span>><\/span>\n<\/span>  

      亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱
      ><\/span>\n<\/span>    ><\/span>Hello, World!<\/h1<\/span>><\/span>\n<\/span>     class=\"remark\"<\/span>><\/span>\n<\/span>      ><\/span>Pug rocks!!<\/p<\/span>><\/span>\n<\/span>    <\/div<\/span>><\/span>\n<\/span>  <\/body<\/span>><\/span>\n<\/span><\/html<\/span>><\/span>\n<\/span><\/pre>\n
       blok teks dan teks biasa <\/p>\n
       PUG menyediakan pelbagai kaedah untuk menambahkan teks biasa terus ke HTML yang diberikan. <\/h3>\n
       kita sudah melihat cara menambah teks biasa: <\/p>\n
      \n<\/p> Cara lain adalah untuk awalan garis dengan watak paip (|): 
      div.remark<\/span>\n<\/span>  p Pug rocks!!\n<\/span><\/pre>\n
      \n<\/p> ini memberi kita perkara berikut: 
       class=\"remark\"<\/span>><\/span>\n<\/span>  ><\/span>Pug rocks!!<\/p<\/span>><\/span>\n<\/span><\/div<\/span>><\/span>\n<\/span><\/pre>\n
      \n<\/p> Apabila berurusan dengan blok besar teks, anda hanya boleh iklan titik. Sebaik sahaja nama tag, atau selepas kurungan penutup, jika tag mempunyai atribut: 
      div.remark<\/span>\n<\/span>p Pug rocks!!\n<\/span><\/pre>\n
      \n<\/p> ini hasil dalam: 
       class=\"remark\"<\/span>><\/span><\/div<\/span>><\/span>\n<\/span>><\/span>Pug rocks!!<\/p<\/span>><\/span>\n<\/span><\/pre>\n
      \n<\/p> Komen 
      nav\n<\/span>  navbar-default  div\n<\/span>    h1 My Website!\n<\/span>  ul\n<\/span>    li\n<\/span>      a Home\n<\/span>    li\n<\/span>      a Page 1\n<\/span>    li\n<\/span>      a Page 2\n<\/span>  input\n<\/span><\/pre>\n
       Akhirnya, komen boleh ditambah seperti: <\/h3>\n
      \n<\/p> komen ini akan ditambah kepada html yang diberikan: 
      ><\/span>\n<\/span>  ><\/span>\n<\/span>    ><\/span>My Website!<\/h1<\/span>><\/span>\n<\/span>  <\/div<\/span>><\/span>\n<\/span>  ><\/span>\n<\/span>    ><\/span>><\/span>Home<\/a<\/span>><\/span><\/li<\/span>><\/span>\n<\/span>    ><\/span>><\/span>Page 1<\/a<\/span>><\/span><\/li<\/span>><\/span>\n<\/span>    ><\/span>><\/span>Page 2<\/a<\/span>><\/span><\/li<\/span>><\/span>\n<\/span>  <\/ul<\/span>><\/span>\n<\/span>  \/><\/span>\n<\/span><\/nav<\/span>><\/span>\n<\/span><\/pre>\n
      \n<\/p> anda memulakan komen seperti SO: 
      nav#navbar-default<\/span>  \n<\/span>  div.container-fluid<\/span>\n<\/span>    h1.navbar-header<\/span> My Website!\n<\/span><\/pre>\n
      \n<\/p> Apabila anda melakukan ini, komen akan kekal dalam fail PUG tetapi tidak akan muncul di HTML. 
      nav#navbar-default<\/span>  \n<\/span>  .container-fluid<\/span>\n<\/span>    h1.navbar-header<\/span> My Website!\n<\/span><\/pre>\n
       Komen mesti muncul di barisan mereka sendiri. Di sini, komen akan dianggap sebagai teks biasa: <\/p>\n
      \n<\/p> komen multiline juga mungkin: 
       id=\"navbar-default\"<\/span>><\/span>\n<\/span>   class=\"container-fluid\"<\/span>><\/span>\n<\/span>     class=\"navbar-header\"<\/span>><\/span>My Website!<\/h1<\/span>><\/span>\n<\/span>  <\/div<\/span>><\/span>\n<\/span><\/nav<\/span>><\/span>\n<\/span><\/pre>\n
      npm i -g pug-cli\n<\/span><\/pre>\n
       Demo Sintaks Asas <\/h3>\n
       Di bawah ini anda boleh menemui demo susun atur gaya bootstrap yang menunjukkan teknik yang telah kami bincangkan setakat ini: <\/p>\n
       Lihat pena 
       Demo asas oleh SitePoint (@SitePoint) 
       pada codepen. <\/p>\n
       <\/p>\n
       menggunakan JavaScript dalam templat PUG HTML <\/h2>\n
       Salah satu perkara hebat tentang PUG adalah keupayaan untuk menjalankan JavaScript dalam templat anda. Ini menjadikannya mudah untuk memasukkan pembolehubah ke dalam templat kami, berulang di atas tatasusunan dan objek, menjadikan HTML secara kondusif, dan banyak lagi. <\/p>\n
       buffered vs code unbuffered <\/h3>\n
       Ini adalah perbezaan penting untuk mengetahui sebelum menggunakan JavaScript di PUG. <\/p>\n
       Kod Unbuffered bermula dengan tolak (-). Ia tidak secara langsung menambah apa -apa kepada output, tetapi nilai -nilainya boleh digunakan dari dalam PUG: <\/p>\n
      $ pug --version\n<\/span>pug version: 2.0.3\n<\/span>pug-cli version: 1.0.0-alpha6\n<\/span><\/pre>\n
       kod buffered, sebaliknya, bermula dengan sama (=). Ia menilai ungkapan JavaScript dan mengeluarkan hasilnya. <\/p>\n
      mkdir -p pug-examples\/html\n<\/span>cd pug-examples\n<\/span>touch index.pug\n<\/span><\/pre>\n
       kod di atas disusun untuk ini: <\/p>\n
      pug -w . -o .\/html -P\n<\/span><\/pre>\n
       Atas sebab keselamatan, kod buffered adalah HTML melarikan diri. <\/p>\n
      watching index.pug\nrendered \/home\/jim\/Desktop\/pug-examples\/html\/index.html\n<\/pre>\n
       kod di atas disusun untuk ini: <\/p>\n
      doctype html\n<\/span>html(lang='en'<\/span>)<\/span><\/span>\n<\/span> head\n<\/span>   title Hello, World!\n<\/span> body\n<\/span>   h1 Hello, World!\n<\/span>   div.remark<\/span>\n<\/span>     p Pug rocks!\n<\/span><\/pre>\n
       Interpolation <\/h3>\n
       Interpolasi String adalah proses menggantikan satu atau lebih ruang letak dalam templat dengan nilai yang sama. Seperti yang telah kita lihat, Input Buffered menawarkan satu kaedah untuk melakukan ini. Satu lagi menggunakan #{}. Di sini, Pug akan menilai sebarang kod antara kurungan keriting, melarikan diri, dan menjadikannya templat. <\/p>\n
      <\/span>\n<\/span> lang=\"en\"<\/span>><\/span>\n<\/span>  ><\/span>\n<\/span>    ><\/span>Hello, World!<\/title<\/span>><\/span>\n<\/span>  <\/head<\/span>><\/span>\n<\/span>  ><\/span>\n<\/span>    ><\/span>Hello, World!<\/h1<\/span>><\/span>\n<\/span>     class=\"remark\"<\/span>><\/span>\n<\/span>      ><\/span>Pug rocks!!<\/p<\/span>><\/span>\n<\/span>    <\/div<\/span>><\/span>\n<\/span>  <\/body<\/span>><\/span>\n<\/span><\/html<\/span>><\/span>\n<\/span><\/pre>\n
       kod di atas disusun untuk ini: <\/p>\n
      div.remark<\/span>\n<\/span>  p Pug rocks!!\n<\/span><\/pre>\n
       Sebagai kurungan keriting boleh mengandungi sebarang ungkapan JavaScript yang sah, ini membuka sekumpulan kemungkinan: <\/p>\n
       class=\"remark\"<\/span>><\/span>\n<\/span>  ><\/span>Pug rocks!!<\/p<\/span>><\/span>\n<\/span><\/div<\/span>><\/span>\n<\/span><\/pre>\n
       ini disusun untuk: <\/p>\n
      div.remark<\/span>\n<\/span>p Pug rocks!!\n<\/span><\/pre>\n
       Ia juga mungkin untuk menjadikan nilai -nilai yang tidak diselaraskan ke dalam templat anda menggunakan! {}. Tetapi ini bukan idea terbaik jika input berasal dari sumber yang tidak dipercayai. <\/p>\n
        NOTA: Apabila anda ingin memberikan nilai yang dipegang dalam pembolehubah kepada atribut elemen, anda boleh meninggalkan #{}. Sebagai contoh: img (alt = name). <\/em> <\/p>\n
       lelaran <\/h3>\n
       setiap kata kunci PUG menjadikannya mudah untuk melangkah ke atas tatasusunan: <\/p>\n
       class=\"remark\"<\/span>><\/span><\/div<\/span>><\/span>\n<\/span>><\/span>Pug rocks!!<\/p<\/span>><\/span>\n<\/span><\/pre>\n
       ini menghasilkan perkara berikut: <\/p>\n
      nav\n<\/span>  navbar-default  div\n<\/span>    h1 My Website!\n<\/span>  ul\n<\/span>    li\n<\/span>      a Home\n<\/span>    li\n<\/span>      a Page 1\n<\/span>    li\n<\/span>      a Page 2\n<\/span>  input\n<\/span><\/pre>\n
       anda juga boleh menggunakannya untuk melangkah ke atas kunci dalam objek: <\/p>\n
      ><\/span>\n<\/span>  ><\/span>\n<\/span>    ><\/span>My Website!<\/h1<\/span>><\/span>\n<\/span>  <\/div<\/span>><\/span>\n<\/span>  ><\/span>\n<\/span>    ><\/span>><\/span>Home<\/a<\/span>><\/span><\/li<\/span>><\/span>\n<\/span>    ><\/span>><\/span>Page 1<\/a<\/span>><\/span><\/li<\/span>><\/span>\n<\/span>    ><\/span>><\/span>Page 2<\/a<\/span>><\/span><\/li<\/span>><\/span>\n<\/span>  <\/ul<\/span>><\/span>\n<\/span>  \/><\/span>\n<\/span><\/nav<\/span>><\/span>\n<\/span><\/pre>\n
       ini hasil dalam: <\/p>\n
      nav#navbar-default<\/span>  \n<\/span>  div.container-fluid<\/span>\n<\/span>    h1.navbar-header<\/span> My Website!\n<\/span><\/pre>\n
       pug juga membolehkan anda menyediakan blok lain yang akan dilaksanakan jika array atau objek kosong: <\/p>\n
      nav#navbar-default<\/span>  \n<\/span>  .container-fluid<\/span>\n<\/span>    h1.navbar-header<\/span> My Website!\n<\/span><\/pre>\n
       Akhirnya, ambil perhatian bahawa anda boleh menggunakan sebagai alias untuk setiap. <\/p>\n
       Conditionals <\/h3>\n
       syarat menawarkan cara yang sangat berguna untuk memberikan HTML yang berbeza bergantung kepada hasil ekspresi JavaScript: <\/p>\n
      npm i -g pug-cli\n<\/span><\/pre>\n
       Dalam contoh ini, kami menyemak sama ada objek pekerja mempunyai harta extn, maka sama ada mengeluarkan nilai harta itu (jika ada), atau teks \"N\/A\". <\/p>\n
       javascript dalam demo pug <\/h3>\n
       Di bawah ini anda boleh menemui demo beberapa teknik yang telah dibincangkan dalam bahagian ini. Ini mempamerkan faedah Pug agak lebih daripada demo terdahulu, seperti yang perlu kita lakukan untuk menambah pekerja lebih lanjut adalah untuk menambah objek lebih lanjut ke array SitePoint Pekerja kami. <\/p>\n
       Lihat pena 
       javascript dalam demo pug oleh sitepoint (@sitePoint) 
       pada codepen. <\/p>\n
       <\/p>\n
       Contoh tangan <\/h2>\n
       Sekarang kita mempunyai idea yang munasabah mengenai sintaks Pug dan bagaimana ia berfungsi, mari kita selesaikan dengan membina aplikasi Express.js kecil untuk menunjukkan beberapa ciri yang lebih maju Pug. \n<\/a><\/p> Kod untuk contoh ini boleh didapati di GitHub. 
      \n<\/p> 
       NOTA: Jika anda tidak menggunakan Express sebelum ini, jangan risau. Ia adalah rangka kerja web untuk Node.js yang menyediakan satu set ciri yang mantap untuk membina aplikasi web. Jika anda ingin mengetahui lebih lanjut, lihat kami bermula dengan tutorial Express.  <\/em>\n<\/p> Pertama, mari buat projek baru dan pasang Express: 
      \n\n<\/p>\n
      $ pug --version\n<\/span>pug version: 2.0.3\n<\/span>pug-cli version: 1.0.0-alpha6\n<\/span><\/pre> seterusnya Buat fail app.js dalam folder PUG-Express: 
      \n<\/p>\n
      mkdir -p pug-examples\/html\n<\/span>cd pug-examples\n<\/span>touch index.pug\n<\/span><\/pre> kemudian tambahkan yang berikut: 
      \n<\/p>\n
      pug -w . -o .\/html -P\n<\/span><\/pre> di sini kita mengisytiharkan laluan (\/), yang akan bertindak balas terhadap permintaan dengan teks \"Hello, World!\" Kami boleh menguji ini dalam penyemak imbas kami, dengan memulakan pelayan dengan nod app.js dan kemudian melawat http: \/\/ localhost: 3000. 
      \n<\/p> Jika anda melihat sesuatu seperti ini, maka perkara -perkara telah merancang: 
      \n<\/p> 
       \n\"PUG Menambah beberapa data <\/s><\/p>\n
       Aplikasi Express ini tidak akan melakukan apa -apa yang terlalu hebat. Kami akan membina direktori kakitangan mudah yang mengambil senarai pekerja dari pangkalan data dan memaparkannya dalam jadual. Untuk itu berlaku, kami memerlukan pangkalan data dan beberapa data. <\/h3>\n
       Walau bagaimanapun ... memasang dan mengkonfigurasi pangkalan data adalah sedikit berat untuk contoh kecil ini, jadi saya akan menggunakan pakej yang dipanggil JSON-SERVER. Ini akan membolehkan kita membuat fail db.json yang akan menjadi API rehat yang kita boleh melakukan operasi CRUD terhadap. <\/p>\n
       Mari pasangnya: <\/p>\n
      \n<\/p> Sekarang buat fail DB.JSON yang disebutkan di dalam akar projek: 
      watching index.pug\nrendered \/home\/jim\/Desktop\/pug-examples\/html\/index.html\n<\/pre>\n
      \n<\/p> Akhirnya, kita memerlukan beberapa JSON untuk memisahkannya. Kami akan menggunakan penjana pengguna rawak, yang merupakan API sumber terbuka percuma untuk menghasilkan data pengguna rawak. Dua puluh lima orang harus lakukan untuk contoh kami, jadi pergi ke https:\/\/randomuser.me\/api\/?results=25 dan menyalin hasilnya ke db.json. 
      doctype html\n<\/span>html(lang='en'<\/span>)<\/span><\/span>\n<\/span> head\n<\/span>   title Hello, World!\n<\/span> body\n<\/span>   h1 Hello, World!\n<\/span>   div.remark<\/span>\n<\/span>     p Pug rocks!\n<\/span><\/pre>\n
       Akhirnya, mulakan pelayan dalam tetingkap terminal kedua dengan: <\/p>\n
      npm i -g pug-cli\n<\/span><\/pre>\n
       Ini akan menyebabkan JSON-Server bermula pada port 3001 dan menonton fail pangkalan data kami untuk perubahan. <\/p>\n
       Menyediakan Pug sebagai Enjin Templat <\/h3>\n
       Express mempunyai sokongan yang sangat baik untuk menggunakan PUG, jadi konfigurasi yang sangat sedikit diperlukan. <\/p>\n
       Pertama, mari tambahkan PUG ke projek kami: <\/p>\n
      $ pug --version\n<\/span>pug version: 2.0.3\n<\/span>pug-cli version: 1.0.0-alpha6\n<\/span><\/pre>\n
       kemudian di app.js kita perlu memberitahu Express untuk menggunakan PUG: <\/p>\n
      mkdir -p pug-examples\/html\n<\/span>cd pug-examples\n<\/span>touch index.pug\n<\/span><\/pre>\n
       Seterusnya, buat direktori pandangan, kemudian dalam direktori pandangan, tambahkan fail index.pug: <\/p>\n
      pug -w . -o .\/html -P\n<\/span><\/pre>\n
       tambahkan beberapa kandungan ke fail itu: <\/p>\n
      watching index.pug\nrendered \/home\/jim\/Desktop\/pug-examples\/html\/index.html\n<\/pre>\n
       kemudian ubah app.js seperti So: <\/p>\n
      doctype html\n<\/span>html(lang='en'<\/span>)<\/span><\/span>\n<\/span> head\n<\/span>   title Hello, World!\n<\/span> body\n<\/span>   h1 Hello, World!\n<\/span>   div.remark<\/span>\n<\/span>     p Pug rocks!\n<\/span><\/pre>\n
       Akhirnya, mulakan semula pelayan nod, kemudian muat semula penyemak imbas anda dan anda harus melihat ini: <\/p>\n
       \"PUG \n<\/s><\/p> Dan itu sahaja. Anda baik untuk pergi. 
      \n<\/p> Membina direktori kakitangan 
      \n<\/h3> Tugas seterusnya dalam senarai adalah untuk menyerahkan beberapa data ke templat PUG untuk dipaparkan. Untuk melakukan itu, kami memerlukan kaedah untuk mengambil data dari pelayan JSON. Malangnya, API Fetch tidak dilaksanakan dalam nod, jadi mari kita gunakan Axios, pelanggan HTTP yang popular sebaliknya: 
      \n<\/p>\n
      <\/span>\n<\/span> lang=\"en\"<\/span>><\/span>\n<\/span>  ><\/span>\n<\/span>    ><\/span>Hello, World!<\/title<\/span>><\/span>\n<\/span>  <\/head<\/span>><\/span>\n<\/span>  ><\/span>\n<\/span>    ><\/span>Hello, World!<\/h1<\/span>><\/span>\n<\/span>     class=\"remark\"<\/span>><\/span>\n<\/span>      ><\/span>Pug rocks!!<\/p<\/span>><\/span>\n<\/span>    <\/div<\/span>><\/span>\n<\/span>  <\/body<\/span>><\/span>\n<\/span><\/html<\/span>><\/span>\n<\/span><\/pre> kemudian ubah app.js seperti So: 
      \n<\/p>\n
      div.remark<\/span>\n<\/span>  p Pug rocks!!\n<\/span><\/pre> Ada beberapa perkara yang berlaku di sini. Kami telah menghidupkan pengendali laluan kami menjadi fungsi async, supaya kami dapat menunggu data pekerja dikembalikan dari pelayan JSON sebelum menyerahkannya ke templat.\n
       maka kami memberikan indeks seperti dahulu, tetapi kali ini kami menyampaikannya sebagai objek literal yang mengandungi semua data kami. <\/p>\n
       <\/p> NOTA: Anda perlu memulakan semula pelayan nod setiap kali anda membuat perubahan kepada app.js. Jika ini mula menjengkelkan, lihat Nodemon, yang akan melakukan ini untuk anda. 
       \n sekarang untuk pug. Tukar indeks.pug untuk kelihatan seperti berikut: <\/em>\n<\/s><\/p>\n
       sememangnya tidak ada yang mengejutkan berlaku di sini. Kami menggunakan semantik-UI-CSS untuk beberapa gaya, serta beberapa gaya kita sendiri. <\/p>\n
       class=\"remark\"<\/span>><\/span>\n<\/span>  ><\/span>Pug rocks!!<\/p<\/span>><\/span>\n<\/span><\/div<\/span>><\/span>\n<\/span><\/pre> Kemudian, dalam badan meja kita melelehkan pelbagai pekerja yang kita lalui dari app.js dan mengeluarkan butiran mereka ke meja. 
      \n<\/p> di bahagian bawah halaman adalah footer dengan tuntutan hak cipta kami dan tahun semasa. 
      \n<\/p> Jika anda menyegarkan halaman sekarang, anda harus melihat ini: 
      \n<\/p> 
       \n<\/s><\/p> warisan template 
      \n\"PUG Ini sudah cukup bagus, tetapi untuk mengelilingi perkara, saya akan menunjukkan bagaimana untuk menstrukturkan pandangan kami untuk menawarkan fleksibiliti maksimum apabila projek berkembang. <\/p>\n
       mari kita mulakan dengan membuat fail susun atur.pug dalam direktori pandangan: <\/h3>\n
      \n<\/p> kemudian tambahkan yang berikut: 
      \n<\/p>\n
      div.remark<\/span>\n<\/span>p Pug rocks!!\n<\/span><\/pre> Apa yang telah kami lakukan di sini ialah membuat fail susun atur daripada boleh dilanjutkan oleh fail PUG lain dalam projek kami. Apabila anda mempunyai sejumlah besar fail PUG, ini menjimatkan sejumlah besar kod. 
      <\/p>\n
       cara kerja ini adalah bahawa kami telah menentukan dua blok kandungan (kandungan blok dan footer blok) yang boleh diganti oleh template kanak -kanak. Dalam kes blok footer, kami juga telah menentukan beberapa kandungan sandaran yang akan diberikan jika templat kanak -kanak tidak mentakrifkan blok ini. <\/p>\n
       Sekarang kita boleh memberitahu fail index.pug kami untuk mewarisi dari susun atur kami: <\/p>\n
      npm i -g pug-cli\n<\/span><\/pre>\n
       Hasilnya adalah sama seperti yang kita ada sebelum ini, tetapi kod kini mempunyai struktur yang lebih baik. <\/p>\n
       Mixins <\/h3>\n
       Mixins membolehkan anda membuat blok PUG yang boleh diguna semula. Kita boleh menggunakannya untuk mengekstrak baris jadual kita ke dalam failnya sendiri. <\/p>\n3\n
      \n<\/p> Mixins diisytiharkan menggunakan kata kunci Mixin. Mereka disusun untuk fungsi dan boleh mengambil hujah. Tambahkan yang berikut ke pandangan\/mixins\/_tablerow.pug: 
      $ pug --version\n<\/span>pug version: 2.0.3\n<\/span>pug-cli version: 1.0.0-alpha6\n<\/span><\/pre>\n
      \n<\/p> sekarang alter index.pug Like So: 
      mkdir -p pug-examples\/html\n<\/span>cd pug-examples\n<\/span>touch index.pug\n<\/span><\/pre>\n
      \n<\/p> Seperti yang anda lihat, kami mengimport mixin di bahagian atas fail. Kami kemudian memanggilnya dengan mengutamakan namanya dengan simbol ditambah dan lulus objek pekerja kami untuk dipaparkan. 
      pug -w . -o .\/html -P\n<\/span><\/pre>\n
       Ini berlebihan untuk aplikasi kecil kami, tetapi ia menunjukkan ciri PUG yang sangat berguna yang membolehkan kami menulis kod yang boleh diguna semula. <\/p>\n
       Kesimpulan <\/p>\n
       dilakukan dengan baik jika anda telah membuatnya sejauh ini! Kami telah meliputi banyak tanah dalam tutorial ini. Kami telah melihat pemasangan PUG, sintaks asasnya, sokongan JavaScript dan pembinaan untuk penyebaran dan penyebaran bersyarat. Akhirnya, kami membina aplikasi Express yang berfungsi sepenuhnya yang menarik data dari sumber terpencil dan memakannya ke templat PUG. <\/h2>\n
       masih banyak lagi yang boleh dilakukan oleh Pug. Saya akan menggalakkan anda untuk menyemak dokumentasi yang sangat baik dan hanya mula menggunakannya dalam projek anda. Anda juga boleh menggunakannya dengan beberapa kerangka JS moden, seperti React atau Vue, dan ia juga telah dipindahkan ke beberapa bahasa lain. <\/p>\n
       Jika anda sedang mencari cabaran, mengapa tidak cuba memperluaskan direktori pekerja untuk menambah fungsi CRUD yang hilang. Dan jika anda terjebak dengan sintaks, jangan lupa bahawa bantuan sentiasa di tangan. <\/p>\n
       Soalan Lazim Mengenai Preprocessor Templat HTML PUG <\/p>\n
       Berikut adalah beberapa soalan yang sering ditanya mengenai PUG. <\/h2>\n\n
       Apakah preprocessor template PUG HTML? Ia memudahkan dan meningkatkan proses penulisan HTML dengan menyediakan sintaks yang lebih ringkas dan ekspresif. Ia membolehkan penstrukturan berasaskan indentasi, yang sering membawa kepada kod yang lebih bersih dan lebih teratur. Pug juga menyokong pembolehubah, campuran, dan termasuk, membuat penciptaan templat lebih cekap. <\/p>\n
       Apa yang digunakan oleh HTML PUG? PUG sering digunakan dalam projek pembangunan web untuk membuat templat HTML yang lebih mudah dibaca, menulis, dan menyelenggara. <\/h3> Walaupun PUG menawarkan banyak kelebihan, batasan utamanya adalah lengkung pembelajaran jika anda terbiasa dengan HTML tradisional. Di samping itu, bekerja di pasukan di mana tidak semua orang biasa dengan PUG mungkin memerlukan beberapa pelarasan. 
       Walaupun PUG direka khas untuk menghasilkan HTML, ia boleh digunakan bersamaan dengan pelbagai rangka depan seperti React, Sudut, atau Vue.Js. Walau bagaimanapun, dengan menggunakan PUG dengan rangka kerja ini mungkin memerlukan konfigurasi dan alat tambahan. <\/p> Ya, anda boleh mengintegrasikan templat PUG dengan mudah bersama fail HTML biasa dalam projek yang sama. Ini berguna apabila beralih dari satu format ke yang lain atau ketika bekerjasama dengan pemaju menggunakan pendekatan yang berbeza. 
       Untuk menggunakan PUG, anda perlu memasang pakej Node.js bernama \"Pug.\" Anda boleh memasangnya secara global atau tempatan dalam projek anda. Selepas pemasangan, anda boleh mula membuat templat PUG dengan lanjutan fail .pug. <\/h3><\/stributes><\/dana><\/st>"}	
	






	

      
    

      

	
	
      
		
      
			
      
							
      
					
      
						
      Jadual Kandungan
      
						
      
							
															
      
									 Enjin templat adalah program yang bertanggungjawab untuk menyusun templat (yang boleh ditulis menggunakan salah satu daripada beberapa bahasa) ke dalam HTML. Enjin templat biasanya akan menerima data dari sumber luaran, yang akan menyuntik ke dalam templat yang disusunnya. Ini digambarkan oleh rajah berikut. 
								
      
																
      
									 Sejarah sedikit 
								
      
																
      
									 Jika anda ingin mengikuti bersama -sama dengan contoh yang lebih mudah dalam tutorial ini, anda juga boleh menjalankannya di pelbagai taman permainan dalam talian. 
								
      
																
      
									 Nota: Perintah sentuh adalah spesifik Linux/macOS. Pengguna Windows akan melakukan echo.> Index.pug untuk mencapai perkara yang sama. 
								
      
																
      
									 Doctype 
								
      
																
      
									 tags 
								
      
																
      
									 Kelas, ID dan Atribut 
								
      
																
      
									 PUG menyediakan pelbagai kaedah untuk menambahkan teks biasa terus ke HTML yang diberikan. 
								
      
																
      
									 Akhirnya, komen boleh ditambah seperti: 
								
      
																
      
									 Demo Sintaks Asas 
								
      
																
      
									 menggunakan JavaScript dalam templat PUG HTML 
								
      
																
      
									 buffered vs code unbuffered 
								
      
																
      
									 Interpolation 
								
      
																
      
									 lelaran 
								
      
																
      
									 Conditionals 
								
      
																
      
									 javascript dalam demo pug 
								
      
																
      
									 Contoh tangan 
								
      
																
      
									 Aplikasi Express ini tidak akan melakukan apa -apa yang terlalu hebat. Kami akan membina direktori kakitangan mudah yang mengambil senarai pekerja dari pangkalan data dan memaparkannya dalam jadual. Untuk itu berlaku, kami memerlukan pangkalan data dan beberapa data. 
								
      
																
      
									 Menyediakan Pug sebagai Enjin Templat 
								
      
																
      
									 mari kita mulakan dengan membuat fail susun atur.pug dalam direktori pandangan: 
								
      
																
      
									 Mixins 
								
      
																
      
									 dilakukan dengan baik jika anda telah membuatnya sejauh ini! Kami telah meliputi banyak tanah dalam tutorial ini. Kami telah melihat pemasangan PUG, sintaks asasnya, sokongan JavaScript dan pembinaan untuk penyebaran dan penyebaran bersyarat. Akhirnya, kami membina aplikasi Express yang berfungsi sepenuhnya yang menarik data dari sumber terpencil dan memakannya ke templat PUG. 
								
      
																
      
									 Berikut adalah beberapa soalan yang sering ditanya mengenai PUG. 
								
      
																
      
									 Apa yang digunakan oleh HTML PUG? PUG sering digunakan dalam projek pembangunan web untuk membuat templat HTML yang lebih mudah dibaca, menulis, dan menyelenggara. 
								
      
																
      
									 Untuk menggunakan PUG, anda perlu memasang pakej Node.js bernama "Pug." Anda boleh memasangnya secara global atau tempatan dalam projek anda. Selepas pemasangan, anda boleh mula membuat templat PUG dengan lanjutan fail .pug. 
								
      
														
      
					
      
				
      
							
      
					
      
						Rumah
						
												hujung hadapan web
						
												tutorial css
						
						PUG HTML Template Engine: Panduan pemula ' s
					
      
					
					
      
						
      
							
      PUG HTML Template Engine: Panduan pemula ' s
      
							
							Feb 10, 2025 am	 11:27 AM
														
						
      
					
      
					
      
					
      
						
      
						
						
						

					
       PUG HTML Template Engine: Panduan pemula ' s 

       Sebagai pereka web atau pemaju, kita mungkin semua perlu menulis bahagian saksama HTML kita. Dan sementara ini bukan tugas yang paling sukar, ia sering kali merasakan sedikit membosankan atau berulang -ulang. Di sinilah preprocessor PUG HTML masuk. 
      

HTML juga statik, yang bermaksud bahawa jika anda ingin memaparkan data dinamik (diambil dari API, sebagai contoh), anda selalu berakhir dengan Mishmash HTML Stings di dalam JavaScript. Ini boleh menjadi mimpi ngeri untuk debug dan mengekalkan. Pug adalah enjin templat untuk nod dan untuk penyemak imbas. Ia dikumpulkan kepada HTML dan mempunyai sintaks mudah, yang boleh menjadikan anda lebih produktif dan kod anda lebih mudah dibaca. PUG memudahkan kedua -dua menulis HTML yang boleh diguna semula, dan juga membuat data ditarik dari pangkalan data atau API. 
      

       Dalam panduan ini, saya akan menunjukkan bagaimana untuk bangun dan berjalan dengan PUG. Kami akan bermula dengan memasangnya dari npm, pergi ke sintaks asasnya dan kemudian melihat beberapa contoh menggunakan JavaScript di Pug. Akhirnya, kami akan meneroka beberapa ciri yang lebih maju Pug dengan membina projek nod/ekspres mudah yang menggunakan PUG sebagai enjin templatnya. 
      


       Takeaways Key 
      



      

       Pug, yang sebelum ini dikenali sebagai Jade, adalah enjin templat yang dikumpulkan kepada HTML dan berguna untuk menulis kod yang lebih bersih, lebih mudah dibaca, terutama ketika berurusan dengan kandungan dinamik. 
        



      •  Ia memudahkan integrasi data dinamik ke HTML, menjadikannya pilihan yang baik untuk aplikasi yang didorong data, walaupun tidak diperlukan untuk tapak statik kecil atau kandungan dinamik yang minimum. 




        •  Pemasangan melibatkan penyediaan nod, npm, dan pakej pug-cli, dengan sintaks yang menyoroti editor anda yang disyorkan untuk kemudahan pembangunan. 
      • 



        •  PUG menggunakan sintaks mudah tanpa tag penutup dan bergantung pada lekukan untuk menyusun dokumen HTML, yang dapat mengurangkan jumlah kod bertulis dengan ketara. 
      • 



        •  Ia menyokong integrasi JavaScript untuk templat dinamik, yang membolehkan pembolehubah, lelaran, dan syarat secara langsung dalam fail PUG. 
      • 



        •  Tutorial disimpulkan dengan demonstrasi praktikal menggunakan PUG dalam projek nod/ekspres untuk membuat direktori kakitangan, mempamerkan ciri -ciri canggih seperti warisan templat dan campuran untuk kod yang boleh diguna semula.

      • 


        •  Apa yang digunakan oleh Pug? 
      • 

        •  Sebelum kita mula melihat PUG, mari kita ambil satu saat untuk memahami konsep yang terlibat. 
      

       Enjin templat adalah program yang bertanggungjawab untuk menyusun templat (yang boleh ditulis menggunakan salah satu daripada beberapa bahasa) ke dalam HTML. Enjin templat biasanya akan menerima data dari sumber luaran, yang akan menyuntik ke dalam templat yang disusunnya. Ini digambarkan oleh rajah berikut. 
      
PUG HTML Template Engine: Panduan pemula ' s
Kredit: DREFTYMAC, TEMPENGWEB016, CC BY-SA 3.0

       Pendekatan ini membolehkan anda menggunakan semula elemen laman web statik, sambil menentukan elemen dinamik berdasarkan data anda. Ia juga memudahkan pemisahan kebimbangan, menjaga logik aplikasi anda diasingkan dari logik paparan anda. 
      

       Anda lebih cenderung untuk mendapat manfaat daripada enjin templat jika laman web atau aplikasi web anda didorong data - seperti direktori kakitangan untuk mentadbir pekerja, kedai web yang menyenaraikan pelbagai produk untuk pengguna membeli, atau tapak dengan dinamik fungsi carian. 
      

       Anda tidak akan memerlukan enjin templat jika anda mengambil sedikit data dari API (dalam hal ini anda hanya boleh menggunakan rentetan templat asli JavaScript), atau jika anda membuat tapak statik kecil. 
      

       Sejarah sedikit 
      

       Ia juga perlu diperhatikan bahawa PUG digunakan untuk dipanggil Jade sehingga dipaksa untuk menukar namanya kerana tuntutan tanda dagangan pada tahun 2015. Perubahan nama berkuatkuasa dengan versi 2.0.

       Masih banyak bahan berkaitan jed yang tersedia dalam talian. Dan sementara sebahagian daripadanya mungkin masih cukup sah, hakikat bahawa perubahan nama bertepatan dengan bump versi utama bermakna sintaks Pug mempunyai beberapa perbezaan, pengurangan, dan penyingkiran berbanding dengan pendahulunya. Ini didokumenkan di sini. 
      

       Jika anda berminat untuk mengetahui lebih lanjut, anda boleh membaca pengumuman perubahan nama asal dalam isu GitHub ini. Jika tidak, pastikan anda menambah perkataan "templat" kepada carian Google yang berkaitan dengan PUG anda untuk mengelakkan hasil yang penuh dengan pooches. 
      

       Memasang PUG 
      

       Sebelum kita dapat menulis beberapa pug, kita perlu memasang nod, npm (yang dibundel dengan nod) dan pakej pug-cli. 
      

       Terdapat beberapa pilihan untuk memasang nod/npm. Sama ada pergi ke halaman utama projek dan muat turun binari yang betul untuk sistem anda, atau gunakan pengurus versi seperti NVM. Saya akan mengesyorkan menggunakan pengurus versi jika mungkin, kerana ini akan membolehkan anda memasang versi nod yang berbeza dan beralih di antara mereka mengikut kehendak. Ia juga akan menafikan sekumpulan kesilapan kebenaran yang berpotensi. 
      

       anda boleh menyemak tutorial kami "Memasang pelbagai versi Node.js menggunakan NVM" untuk panduan yang lebih mendalam. 
      

       sekali nod dan npm dipasang pada sistem anda, anda boleh memasang pakej pug-cli seperti SO: 
      

      

      <span>npm i -g pug-cli
</span>
       Anda boleh menyemak bahawa proses pemasangan berjalan dengan betul dengan menaip pug --versi ke terminal. Ini akan mengeluarkan versi PUG dan versi CLI yang telah anda pasang. 
      

       Pada masa penulisan, ini adalah seperti berikut: 
      

      

      $ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>
       sintaks yang menyoroti editor anda 
      

       Jika editor anda tidak menawarkan sintaks yang menonjol untuk PUG, ia akan menjadi idea yang baik untuk mencari lanjutan untuk menambah fungsi ini. 
      

       Saya sedang menggunakan teks Sublime 3 dan, keluar dari kotak, inilah fail .pug yang kelihatan seperti: 
      

       PUG HTML Template Engine: Panduan pemula ' s 

       Untuk memperbaiki ini, seseorang boleh memasang pakej pug yang mewah: 
      

       
       
PUG HTML Template Engine: Panduan pemula ' s sintaks penonjolan akan menjadikannya lebih mudah untuk bekerja dengan fail PUG, terutama yang panjangnya. 
      

       cuba pug html tanpa memasang 
      

       Jika anda ingin mengikuti bersama -sama dengan contoh yang lebih mudah dalam tutorial ini, anda juga boleh menjalankannya di pelbagai taman permainan dalam talian. 
      

       Codepen, sebagai contoh, mempunyai sokongan pug yang dibakar tepat. Ini akan membolehkan anda memasukkan kod PUG ke panel HTML dan melihat hasilnya muncul dalam masa nyata. 
      

       Sebagai bonus tambahan, anda boleh mengklik pada anak panah bawah dalam anak tetingkap HTML dan pilih  Lihat html  yang disusun untuk melihat markup yang dihasilkan oleh PUG. 
 sintaks asas PUG HTML 
      

       Sekarang bahawa kami telah dipasang PUG, mari kita cuba. Buat direktori baru bernama PUG-contoh dan ubah ke dalamnya. Kemudian buat direktori selanjutnya yang dipanggil HTML dan fail yang dipanggil index.pug: 


       
       Nota: Perintah sentuh adalah spesifik Linux/macOS. Pengguna Windows akan melakukan echo.> Index.pug untuk mencapai perkara yang sama. 
       
      

       Cara ini akan berfungsi ialah kami akan menulis kod PUG kami di index.pug dan mempunyai pug-cli menonton fail ini untuk perubahan. Apabila ia mengesan apa -apa, ia akan mengambil kandungan index.pug dan menjadikannya sebagai HTML dalam direktori HTML. 
      <span>npm i -g pug-cli
</span>
      

       Untuk menendang ini, buka terminal dalam direktori PUG-examples dan masukkan ini: 


       anda harus melihat sesuatu seperti yang berikut: 
      

      

       
       Nota: Dalam perintah di atas, pilihan -w bermaksud menonton, titik memberitahu Pug untuk menonton segala -galanya dalam direktori semasa ,-o ./html memberitahu PUG untuk mengeluarkan HTML dalam direktori HTML dan -P Pilihan mempercepatkan output. 
      $ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>
       
      

       Sekarang mari kita buat halaman dari tangkapan skrin di atas (yang mengadu tentang kekurangan sintaks yang menonjol). Masukkan yang berikut ke index.pug: 
      <span>mkdir -p pug-examples/html
</span><span>cd pug-examples
</span><span>touch index.pug
</span>
      

      
 simpan pug.index dan kemudian periksa kandungan ./html/index.html. Anda mesti melihat perkara berikut: 

      

       tidak buruk, eh? Pug CLI telah mengambil fail pug kami dan menjadikannya sebagai html biasa. 
      

      pug <span>-w . -o ./html -P
</span>
       Contoh ini berfungsi untuk menyerlahkan beberapa perkara penting mengenai PUG. Pertama, ia adalah sensitif ruang putih, yang bermaksud bahawa PUG menggunakan lekukan untuk mengerjakan tag yang bersarang di dalam satu sama lain. Contohnya: 

      

       kod di atas menghasilkan ini: 
      watching index.pug
rendered /home/jim/Desktop/pug-examples/html/index.html

      

      

       sekarang ambil kod ini: 
      

      

      <span>doctype html
</span><span>html<span><span>(lang=<span>'en'</span>)</span></span>
</span> <span>head
</span>   <span>title Hello, World!
</span> <span>body
</span>   <span>h1 Hello, World!
</span>   <span>div<span>.remark</span>
</span>     <span>p Pug rocks!
</span>
       Ini menghasilkan yang berikut: 
      

      

      <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>
</span>    <span><span><span><div</span> class<span>="remark"</span>></span>
</span>      <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
       Ia tidak semestinya tahap tahap lekukan yang anda gunakan (anda juga boleh menggunakan tab jika anda perlu), tetapi sangat disyorkan agar anda mengekalkan tahap lekukan konsisten. Dalam artikel ini saya akan menggunakan dua ruang. 
      

       Kedua, Pug tidak mempunyai sebarang tag penutup. Ini jelas akan menjimatkan beberapa ketukan kekunci yang adil dan memberikan sintaks yang bersih dan mudah dibaca. 
      

       Sekarang kita mendapat pegangan pada beberapa pug asas, mari kita cepat pergi ke sintaksnya. Jika mana-mana ini kelihatan mengelirukan, atau anda ingin pergi lebih mendalam, pastikan anda berunding dengan dokumentasi yang sangat baik projek. 
      

       Doctype 
      

       anda boleh menggunakan PUG untuk menghasilkan beberapa pengisytiharan jenis dokumen. 
      

       contohnya Doctype HTML akan disusun kepada , standard HTML5 DOCTYPE, sedangkan Doctype ketat akan memberi kami . Pug akan melakukan yang terbaik untuk memastikan outputnya sah untuk jenis dokumen. 
      

       tags 
      

       Seperti yang disebutkan, Pug tidak mempunyai tag penutup dan bergantung pada lekukan untuk bersarang. Ini mungkin mengambil sedikit masa untuk digunakan, tetapi apabila anda melakukannya, ia menjadikan kod yang bersih dan boleh dibaca. Contohnya: 
      

      <span>npm i -g pug-cli
</span>
      

       kod di atas disusun untuk ini: 
      

      $ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>
      

       Perhatikan bahawa PUG cukup pintar untuk menutup mana-mana tag penutupan diri (seperti  elemen) untuk kami. 
      

       Kelas, ID dan Atribut 
      

       Kelas dan ID dinyatakan menggunakan notasi .ClassName dan #IdName. Contohnya: 

      

      <span>mkdir -p pug-examples/html
</span><span>cd pug-examples
</span><span>touch index.pug
</span>
       Pug juga menawarkan jalan pintas yang berguna. Jika tiada tag ditentukan, ia akan menganggap elemen : 
      

      

      pug <span>-w . -o ./html -P
</span>
       Kedua -duanya menyusunnya kepada: 
      

      
 ditambah menggunakan kurungan: 
      watching index.pug
rendered /home/jim/Desktop/pug-examples/html/index.html

      

      

       ini menghasilkan perkara berikut: 
      <span>doctype html
</span><span>html<span><span>(lang=<span>'en'</span>)</span></span>
</span> <span>head
</span>   <span>title Hello, World!
</span> <span>body
</span>   <span>h1 Hello, World!
</span>   <span>div<span>.remark</span>
</span>     <span>p Pug rocks!
</span>
      


      

       Ada banyak lagi yang boleh dikatakan mengenai atribut. Sebagai contoh, anda boleh menggunakan JavaScript untuk memasukkan pembolehubah dalam atribut anda, atau memberikan pelbagai nilai kepada atribut. Kami akan menggunakan JavaScript di Pug di bahagian seterusnya. 
      <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>
</span>    <span><span><span><div</span> class<span>="remark"</span>></span>
</span>      <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
      

       blok teks dan teks biasa 
      

       PUG menyediakan pelbagai kaedah untuk menambahkan teks biasa terus ke HTML yang diberikan. 
      

       kita sudah melihat cara menambah teks biasa: 
      

      

       Cara lain adalah untuk awalan garis dengan watak paip (|): 
      <span>div<span>.remark</span>
</span>  <span>p Pug rocks!!
</span>
      

      

       ini memberi kita perkara berikut: 
      <span><span><span><div</span> class<span>="remark"</span>></span>
</span>  <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
</span><span><span><span></div</span>></span>
</span>
      

      

       Apabila berurusan dengan blok besar teks, anda hanya boleh iklan titik. Sebaik sahaja nama tag, atau selepas kurungan penutup, jika tag mempunyai atribut: 
      <span>div<span>.remark</span>
</span><span>p Pug rocks!!
</span>
      

      

       ini hasil dalam: 
      <span><span><span><div</span> class<span>="remark"</span>></span><span><span></div</span>></span>
</span><span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
</span>
      

      

       Komen 
      <span>nav
</span>  <span>navbar-default  div
</span>    <span>h1 My Website!
</span>  <span>ul
</span>    <span>li
</span>      <span>a Home
</span>    <span>li
</span>      <span>a Page 1
</span>    <span>li
</span>      <span>a Page 2
</span>  <span>input
</span>
      

       Akhirnya, komen boleh ditambah seperti: 
      

      

       komen ini akan ditambah kepada html yang diberikan: 
      <span><span><span><nav</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><h1</span>></span>My Website!<span><span></h1</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span>></span>Home<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span>></span>Page 1<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span>></span>Page 2<span><span></a</span>></span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span>  <span><span><span><input</span>/></span>
</span><span><span><span></nav</span>></span>
</span>
      

      

       anda memulakan komen seperti SO: 
      <span>nav<span>#navbar-default</span>  
</span>  <span>div<span>.container-fluid</span>
</span>    <span>h1<span>.navbar-header</span> My Website!
</span>
      

      

       Apabila anda melakukan ini, komen akan kekal dalam fail PUG tetapi tidak akan muncul di HTML. 
      <span>nav<span>#navbar-default</span>  
</span>  <span><span>.container-fluid</span>
</span>    <span>h1<span>.navbar-header</span> My Website!
</span>
      

       Komen mesti muncul di barisan mereka sendiri. Di sini, komen akan dianggap sebagai teks biasa: 
      

      

       komen multiline juga mungkin: 
      <span><span><span><nav</span> id<span>="navbar-default"</span>></span>
</span>  <span><span><span><div</span> class<span>="container-fluid"</span>></span>
</span>    <span><span><span><h1</span> class<span>="navbar-header"</span>></span>My Website!<span><span></h1</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></nav</span>></span>
</span>
      

      <span>npm i -g pug-cli
</span>
      

       Demo Sintaks Asas 
      

       Di bawah ini anda boleh menemui demo susun atur gaya bootstrap yang menunjukkan teknik yang telah kami bincangkan setakat ini: 
      

       Lihat pena 
       Demo asas oleh SitePoint (@SitePoint) 
       pada codepen. 
      

       
      

       menggunakan JavaScript dalam templat PUG HTML 
      

       Salah satu perkara hebat tentang PUG adalah keupayaan untuk menjalankan JavaScript dalam templat anda. Ini menjadikannya mudah untuk memasukkan pembolehubah ke dalam templat kami, berulang di atas tatasusunan dan objek, menjadikan HTML secara kondusif, dan banyak lagi. 
      

       buffered vs code unbuffered 
      

       Ini adalah perbezaan penting untuk mengetahui sebelum menggunakan JavaScript di PUG. 
      

       Kod Unbuffered bermula dengan tolak (-). Ia tidak secara langsung menambah apa -apa kepada output, tetapi nilai -nilainya boleh digunakan dari dalam PUG: 
      

      $ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>
      

       kod buffered, sebaliknya, bermula dengan sama (=). Ia menilai ungkapan JavaScript dan mengeluarkan hasilnya. 
      

      <span>mkdir -p pug-examples/html
</span><span>cd pug-examples
</span><span>touch index.pug
</span>
      

       kod di atas disusun untuk ini: 
      

      pug <span>-w . -o ./html -P
</span>
      

       Atas sebab keselamatan, kod buffered adalah HTML melarikan diri. 
      

      watching index.pug
rendered /home/jim/Desktop/pug-examples/html/index.html

      

       kod di atas disusun untuk ini: 
      

      <span>doctype html
</span><span>html<span><span>(lang=<span>'en'</span>)</span></span>
</span> <span>head
</span>   <span>title Hello, World!
</span> <span>body
</span>   <span>h1 Hello, World!
</span>   <span>div<span>.remark</span>
</span>     <span>p Pug rocks!
</span>
      

       Interpolation 
      

       Interpolasi String adalah proses menggantikan satu atau lebih ruang letak dalam templat dengan nilai yang sama. Seperti yang telah kita lihat, Input Buffered menawarkan satu kaedah untuk melakukan ini. Satu lagi menggunakan #{}. Di sini, Pug akan menilai sebarang kod antara kurungan keriting, melarikan diri, dan menjadikannya templat. 
      

      <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>
</span>    <span><span><span><div</span> class<span>="remark"</span>></span>
</span>      <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
      

       kod di atas disusun untuk ini: 
      

      <span>div<span>.remark</span>
</span>  <span>p Pug rocks!!
</span>
      

       Sebagai kurungan keriting boleh mengandungi sebarang ungkapan JavaScript yang sah, ini membuka sekumpulan kemungkinan: 
      

      <span><span><span><div</span> class<span>="remark"</span>></span>
</span>  <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
</span><span><span><span></div</span>></span>
</span>
      

       ini disusun untuk: 
      

      <span>div<span>.remark</span>
</span><span>p Pug rocks!!
</span>
      

       Ia juga mungkin untuk menjadikan nilai -nilai yang tidak diselaraskan ke dalam templat anda menggunakan! {}. Tetapi ini bukan idea terbaik jika input berasal dari sumber yang tidak dipercayai. 
      

        NOTA: Apabila anda ingin memberikan nilai yang dipegang dalam pembolehubah kepada atribut elemen, anda boleh meninggalkan #{}. Sebagai contoh: img (alt = name).  
      

       lelaran 
      

       setiap kata kunci PUG menjadikannya mudah untuk melangkah ke atas tatasusunan: 
      

      <span><span><span><div</span> class<span>="remark"</span>></span><span><span></div</span>></span>
</span><span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
</span>
      

       ini menghasilkan perkara berikut: 
      

      <span>nav
</span>  <span>navbar-default  div
</span>    <span>h1 My Website!
</span>  <span>ul
</span>    <span>li
</span>      <span>a Home
</span>    <span>li
</span>      <span>a Page 1
</span>    <span>li
</span>      <span>a Page 2
</span>  <span>input
</span>
      

       anda juga boleh menggunakannya untuk melangkah ke atas kunci dalam objek: 
      

      <span><span><span><nav</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><h1</span>></span>My Website!<span><span></h1</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  <span><span><span><ul</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span>></span>Home<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span>></span>Page 1<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span><li</span>></span><span><span><a</span>></span>Page 2<span><span></a</span>></span><span><span></li</span>></span>
</span>  <span><span><span></ul</span>></span>
</span>  <span><span><span><input</span>/></span>
</span><span><span><span></nav</span>></span>
</span>
      

       ini hasil dalam: 
      

      <span>nav<span>#navbar-default</span>  
</span>  <span>div<span>.container-fluid</span>
</span>    <span>h1<span>.navbar-header</span> My Website!
</span>
      

       pug juga membolehkan anda menyediakan blok lain yang akan dilaksanakan jika array atau objek kosong: 
      

      <span>nav<span>#navbar-default</span>  
</span>  <span><span>.container-fluid</span>
</span>    <span>h1<span>.navbar-header</span> My Website!
</span>
      

       Akhirnya, ambil perhatian bahawa anda boleh menggunakan sebagai alias untuk setiap. 
      

       Conditionals 
      

       syarat menawarkan cara yang sangat berguna untuk memberikan HTML yang berbeza bergantung kepada hasil ekspresi JavaScript: 
      

      <span>npm i -g pug-cli
</span>
      

       Dalam contoh ini, kami menyemak sama ada objek pekerja mempunyai harta extn, maka sama ada mengeluarkan nilai harta itu (jika ada), atau teks "N/A". 
      

       javascript dalam demo pug 
      

       Di bawah ini anda boleh menemui demo beberapa teknik yang telah dibincangkan dalam bahagian ini. Ini mempamerkan faedah Pug agak lebih daripada demo terdahulu, seperti yang perlu kita lakukan untuk menambah pekerja lebih lanjut adalah untuk menambah objek lebih lanjut ke array SitePoint Pekerja kami. 
      

       Lihat pena 
       javascript dalam demo pug oleh sitepoint (@sitePoint) 
       pada codepen. 
      

       
      

       Contoh tangan 
      

       Sekarang kita mempunyai idea yang munasabah mengenai sintaks Pug dan bagaimana ia berfungsi, mari kita selesaikan dengan membina aplikasi Express.js kecil untuk menunjukkan beberapa ciri yang lebih maju Pug. 

       Kod untuk contoh ini boleh didapati di GitHub. 
      

       
       NOTA: Jika anda tidak menggunakan Express sebelum ini, jangan risau. Ia adalah rangka kerja web untuk Node.js yang menyediakan satu set ciri yang mantap untuk membina aplikasi web. Jika anda ingin mengetahui lebih lanjut, lihat kami bermula dengan tutorial Express.  

       Pertama, mari buat projek baru dan pasang Express: 
      


      

      $ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>
       seterusnya Buat fail app.js dalam folder PUG-Express: 
      

      

      <span>mkdir -p pug-examples/html
</span><span>cd pug-examples
</span><span>touch index.pug
</span>
       kemudian tambahkan yang berikut: 
      

      

      pug <span>-w . -o ./html -P
</span>
       di sini kita mengisytiharkan laluan (/), yang akan bertindak balas terhadap permintaan dengan teks "Hello, World!" Kami boleh menguji ini dalam penyemak imbas kami, dengan memulakan pelayan dengan nod app.js dan kemudian melawat http: // localhost: 3000. 
      

       Jika anda melihat sesuatu seperti ini, maka perkara -perkara telah merancang: 
      

       
       
PUG HTML Template Engine: Panduan pemula ' s Menambah beberapa data 
      

       Aplikasi Express ini tidak akan melakukan apa -apa yang terlalu hebat. Kami akan membina direktori kakitangan mudah yang mengambil senarai pekerja dari pangkalan data dan memaparkannya dalam jadual. Untuk itu berlaku, kami memerlukan pangkalan data dan beberapa data. 
      

       Walau bagaimanapun ... memasang dan mengkonfigurasi pangkalan data adalah sedikit berat untuk contoh kecil ini, jadi saya akan menggunakan pakej yang dipanggil JSON-SERVER. Ini akan membolehkan kita membuat fail db.json yang akan menjadi API rehat yang kita boleh melakukan operasi CRUD terhadap. 
      

       Mari pasangnya: 
      

      

       Sekarang buat fail DB.JSON yang disebutkan di dalam akar projek: 
      watching index.pug
rendered /home/jim/Desktop/pug-examples/html/index.html

      

      

       Akhirnya, kita memerlukan beberapa JSON untuk memisahkannya. Kami akan menggunakan penjana pengguna rawak, yang merupakan API sumber terbuka percuma untuk menghasilkan data pengguna rawak. Dua puluh lima orang harus lakukan untuk contoh kami, jadi pergi ke https://randomuser.me/api/?results=25 dan menyalin hasilnya ke db.json. 
      <span>doctype html
</span><span>html<span><span>(lang=<span>'en'</span>)</span></span>
</span> <span>head
</span>   <span>title Hello, World!
</span> <span>body
</span>   <span>h1 Hello, World!
</span>   <span>div<span>.remark</span>
</span>     <span>p Pug rocks!
</span>
      

       Akhirnya, mulakan pelayan dalam tetingkap terminal kedua dengan: 
      

      <span>npm i -g pug-cli
</span>
      

       Ini akan menyebabkan JSON-Server bermula pada port 3001 dan menonton fail pangkalan data kami untuk perubahan. 
      

       Menyediakan Pug sebagai Enjin Templat 
      

       Express mempunyai sokongan yang sangat baik untuk menggunakan PUG, jadi konfigurasi yang sangat sedikit diperlukan. 
      

       Pertama, mari tambahkan PUG ke projek kami: 
      

      $ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>
      

       kemudian di app.js kita perlu memberitahu Express untuk menggunakan PUG: 
      

      <span>mkdir -p pug-examples/html
</span><span>cd pug-examples
</span><span>touch index.pug
</span>
      

       Seterusnya, buat direktori pandangan, kemudian dalam direktori pandangan, tambahkan fail index.pug: 
      

      pug <span>-w . -o ./html -P
</span>
      

       tambahkan beberapa kandungan ke fail itu: 
      

      watching index.pug
rendered /home/jim/Desktop/pug-examples/html/index.html

      

       kemudian ubah app.js seperti So: 
      

      <span>doctype html
</span><span>html<span><span>(lang=<span>'en'</span>)</span></span>
</span> <span>head
</span>   <span>title Hello, World!
</span> <span>body
</span>   <span>h1 Hello, World!
</span>   <span>div<span>.remark</span>
</span>     <span>p Pug rocks!
</span>
      

       Akhirnya, mulakan semula pelayan nod, kemudian muat semula penyemak imbas anda dan anda harus melihat ini: 
      

       PUG HTML Template Engine: Panduan pemula ' s 

       Dan itu sahaja. Anda baik untuk pergi. 
      

       Membina direktori kakitangan 
      

       Tugas seterusnya dalam senarai adalah untuk menyerahkan beberapa data ke templat PUG untuk dipaparkan. Untuk melakukan itu, kami memerlukan kaedah untuk mengambil data dari pelayan JSON. Malangnya, API Fetch tidak dilaksanakan dalam nod, jadi mari kita gunakan Axios, pelanggan HTTP yang popular sebaliknya: 
      

      

      <span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Hello, World!<span><span></title</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>
</span>    <span><span><span><div</span> class<span>="remark"</span>></span>
</span>      <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
       kemudian ubah app.js seperti So: 
      

      

      <span>div<span>.remark</span>
</span>  <span>p Pug rocks!!
</span>
       Ada beberapa perkara yang berlaku di sini. Kami telah menghidupkan pengendali laluan kami menjadi fungsi async, supaya kami dapat menunggu data pekerja dikembalikan dari pelayan JSON sebelum menyerahkannya ke templat.

       maka kami memberikan indeks seperti dahulu, tetapi kali ini kami menyampaikannya sebagai objek literal yang mengandungi semua data kami. 
      

       
       NOTA: Anda perlu memulakan semula pelayan nod setiap kali anda membuat perubahan kepada app.js. Jika ini mula menjengkelkan, lihat Nodemon, yang akan melakukan ini untuk anda. 
       
 sekarang untuk pug. Tukar indeks.pug untuk kelihatan seperti berikut: 

      

       sememangnya tidak ada yang mengejutkan berlaku di sini. Kami menggunakan semantik-UI-CSS untuk beberapa gaya, serta beberapa gaya kita sendiri. 
      

      <span><span><span><div</span> class<span>="remark"</span>></span>
</span>  <span><span><span><p</span>></span>Pug rocks!!<span><span></p</span>></span>
</span><span><span><span></div</span>></span>
</span>
       Kemudian, dalam badan meja kita melelehkan pelbagai pekerja yang kita lalui dari app.js dan mengeluarkan butiran mereka ke meja. 
      

       di bahagian bawah halaman adalah footer dengan tuntutan hak cipta kami dan tahun semasa. 
      

       Jika anda menyegarkan halaman sekarang, anda harus melihat ini: 
      

       
       

       warisan template 
      
PUG HTML Template Engine: Panduan pemula ' s Ini sudah cukup bagus, tetapi untuk mengelilingi perkara, saya akan menunjukkan bagaimana untuk menstrukturkan pandangan kami untuk menawarkan fleksibiliti maksimum apabila projek berkembang. 
      

       mari kita mulakan dengan membuat fail susun atur.pug dalam direktori pandangan: 
      

      

       kemudian tambahkan yang berikut: 
      

      

      <span>div<span>.remark</span>
</span><span>p Pug rocks!!
</span>
       Apa yang telah kami lakukan di sini ialah membuat fail susun atur daripada boleh dilanjutkan oleh fail PUG lain dalam projek kami. Apabila anda mempunyai sejumlah besar fail PUG, ini menjimatkan sejumlah besar kod. 
      

       cara kerja ini adalah bahawa kami telah menentukan dua blok kandungan (kandungan blok dan footer blok) yang boleh diganti oleh template kanak -kanak. Dalam kes blok footer, kami juga telah menentukan beberapa kandungan sandaran yang akan diberikan jika templat kanak -kanak tidak mentakrifkan blok ini. 
      

       Sekarang kita boleh memberitahu fail index.pug kami untuk mewarisi dari susun atur kami: 
      

      <span>npm i -g pug-cli
</span>
      

       Hasilnya adalah sama seperti yang kita ada sebelum ini, tetapi kod kini mempunyai struktur yang lebih baik. 
      

       Mixins 
      

       Mixins membolehkan anda membuat blok PUG yang boleh diguna semula. Kita boleh menggunakannya untuk mengekstrak baris jadual kita ke dalam failnya sendiri. 
      
3

      

       Mixins diisytiharkan menggunakan kata kunci Mixin. Mereka disusun untuk fungsi dan boleh mengambil hujah. Tambahkan yang berikut ke pandangan/mixins/_tablerow.pug: 
      $ pug <span>--version
</span>pug version: <span>2.0.3
</span>pug-cli version: <span>1.0.0-alpha6
</span>
      

      

       sekarang alter index.pug Like So: 
      <span>mkdir -p pug-examples/html
</span><span>cd pug-examples
</span><span>touch index.pug
</span>
      

      

       Seperti yang anda lihat, kami mengimport mixin di bahagian atas fail. Kami kemudian memanggilnya dengan mengutamakan namanya dengan simbol ditambah dan lulus objek pekerja kami untuk dipaparkan. 
      pug <span>-w . -o ./html -P
</span>
      

       Ini berlebihan untuk aplikasi kecil kami, tetapi ia menunjukkan ciri PUG yang sangat berguna yang membolehkan kami menulis kod yang boleh diguna semula. 
      

       Kesimpulan 
      

       dilakukan dengan baik jika anda telah membuatnya sejauh ini! Kami telah meliputi banyak tanah dalam tutorial ini. Kami telah melihat pemasangan PUG, sintaks asasnya, sokongan JavaScript dan pembinaan untuk penyebaran dan penyebaran bersyarat. Akhirnya, kami membina aplikasi Express yang berfungsi sepenuhnya yang menarik data dari sumber terpencil dan memakannya ke templat PUG. 
      

       masih banyak lagi yang boleh dilakukan oleh Pug. Saya akan menggalakkan anda untuk menyemak dokumentasi yang sangat baik dan hanya mula menggunakannya dalam projek anda. Anda juga boleh menggunakannya dengan beberapa kerangka JS moden, seperti React atau Vue, dan ia juga telah dipindahkan ke beberapa bahasa lain. 
      

       Jika anda sedang mencari cabaran, mengapa tidak cuba memperluaskan direktori pekerja untuk menambah fungsi CRUD yang hilang. Dan jika anda terjebak dengan sintaks, jangan lupa bahawa bantuan sentiasa di tangan. 
      

       Soalan Lazim Mengenai Preprocessor Templat HTML PUG 
      

       Berikut adalah beberapa soalan yang sering ditanya mengenai PUG. 
      


       Apakah preprocessor template PUG HTML? Ia memudahkan dan meningkatkan proses penulisan HTML dengan menyediakan sintaks yang lebih ringkas dan ekspresif. Ia membolehkan penstrukturan berasaskan indentasi, yang sering membawa kepada kod yang lebih bersih dan lebih teratur. Pug juga menyokong pembolehubah, campuran, dan termasuk, membuat penciptaan templat lebih cekap. 
      

       Apa yang digunakan oleh HTML PUG? PUG sering digunakan dalam projek pembangunan web untuk membuat templat HTML yang lebih mudah dibaca, menulis, dan menyelenggara. 
       Walaupun PUG menawarkan banyak kelebihan, batasan utamanya adalah lengkung pembelajaran jika anda terbiasa dengan HTML tradisional. Di samping itu, bekerja di pasukan di mana tidak semua orang biasa dengan PUG mungkin memerlukan beberapa pelarasan. 
       Walaupun PUG direka khas untuk menghasilkan HTML, ia boleh digunakan bersamaan dengan pelbagai rangka depan seperti React, Sudut, atau Vue.Js. Walau bagaimanapun, dengan menggunakan PUG dengan rangka kerja ini mungkin memerlukan konfigurasi dan alat tambahan. 
       Ya, anda boleh mengintegrasikan templat PUG dengan mudah bersama fail HTML biasa dalam projek yang sama. Ini berguna apabila beralih dari satu format ke yang lain atau ketika bekerjasama dengan pemaju menggunakan pendekatan yang berbeza. 
       Untuk menggunakan PUG, anda perlu memasang pakej Node.js bernama "Pug." Anda boleh memasangnya secara global atau tempatan dalam projek anda. Selepas pemasangan, anda boleh mula membuat templat PUG dengan lanjutan fail .pug. 
      Atas ialah kandungan terperinci PUG HTML Template Engine: Panduan pemula ' s. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
      


						
      
					
      
					
      
						
      Kenyataan Laman Web ini
      
						
      Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
      
					
      
				
      

				



				
      


				
    


					


											
      
							
      
								
      
									
									
      Alat AI Hot
      
								
      
								
      
																		
      
											
												Undress AI Tool
											
											
      
												
													
      Undress AI Tool
      
												      
												
      Gambar buka pakaian secara percuma
      
											
      
										
      
																		
      
											
												Undresser.AI Undress
											
											
      
												
													
      Undresser.AI Undress
      
												      
												
      Apl berkuasa AI untuk mencipta foto bogel yang realistik
      
											
      
										
      
																		
      
											
												AI Clothes Remover
											
											
      
												
													
      AI Clothes Remover
      
												      
												
      Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
      
											
      
										
      
																		
      
											
												Clothoff.io
											
											
      
												
													
      Clothoff.io
      
												      
												
      Penyingkiran pakaian AI
      
											
      
										
      
																		
      
											
												Video Face Swap
											
											
      
												
													
      Video Face Swap
      
												      
												
      Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
      
											
      
										
      
																
      
								
							
      
						
      
					


					


											
      
							
      
								
      
									
									
      Alat panas
      
								
      
								
      
																		
      
											
												Notepad++7.3.1
											
											
      
												
													
      Notepad++7.3.1
      
												      
												
      Editor kod yang mudah digunakan dan percuma
      
											
      
										
      
																			
      
											
												SublimeText3 versi Cina
											
											
      
												
													
      SublimeText3 versi Cina
      
												      
												
      Versi Cina, sangat mudah digunakan
      
											
      
										
      
																			
      
											
												Hantar Studio 13.0.1
											
											
      
												
													
      Hantar Studio 13.0.1
      
												      
												
      Persekitaran pembangunan bersepadu PHP yang berkuasa
      
											
      
										
      
																			
      
											
												Dreamweaver CS6
											
											
      
												
													
      Dreamweaver CS6
      
												      
												
      Alat pembangunan web visual
      
											
      
										
      
																			
      
											
												SublimeText3 versi Mac
											
											
      
												
													
      SublimeText3 versi Mac
      
												      
												
      Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
      
											
      
										
      
																	
      
								
							
      
						
      
										

					
					
				
      
			
      
							
      
					
      
						
						
      

													
      
								
									Tutorial CSS untuk membuat pemuatan dan animasi pemuatan
								
								Tutorial CSS untuk membuat pemuatan dan animasi pemuatan
								Jul 07, 2025 am	 12:07 AM
								
      Terdapat tiga cara untuk membuat pemutar pemuatan CSS: 1. Gunakan pemutar asas sempadan untuk mencapai animasi mudah melalui HTML dan CSS; 2. Gunakan pemutar tersuai pelbagai mata untuk mencapai kesan lompat melalui masa kelewatan yang berlainan; 3. Tambahkan pemutar dalam butang dan beralih kelas melalui JavaScript untuk memaparkan status pemuatan. Setiap pendekatan menekankan pentingnya butiran reka bentuk seperti warna, saiz, kebolehcapaian dan pengoptimuman prestasi untuk meningkatkan pengalaman pengguna.
      
							
      
														
      
								
									Menangani masalah dan awalan keserasian penyemak imbas CSS
								
								Menangani masalah dan awalan keserasian penyemak imbas CSS
								Jul 07, 2025 am	 01:44 AM
								
      Untuk menangani keserasian pelayar CSS dan isu awalan, anda perlu memahami perbezaan sokongan penyemak imbas dan menggunakan awalan vendor dengan munasabah. 1. Memahami masalah biasa seperti Flexbox dan sokongan grid, kedudukan: prestasi tidak sah, dan prestasi animasi adalah berbeza; 2. Periksa status sokongan ciri CANIUSE Ciri; 3. Gunakan dengan betul -webkit-, -moz-, -ms-, -o- dan awalan pengeluar lain; 4. Adalah disyorkan untuk menggunakan autoprefixer untuk menambah awalan secara automatik; 5. Pasang postcss dan konfigurasi penyemak imbas untuk menentukan penyemak imbas sasaran; 6. Secara automatik mengendalikan keserasian semasa pembinaan; 7. Ciri -ciri pengesanan moden boleh digunakan untuk projek lama; 8. Tidak perlu meneruskan konsistensi semua pelayar,
      
							
      
														
      
								
									Gaya yang dikunjungi pautan berbeza dengan CSS
								
								Gaya yang dikunjungi pautan berbeza dengan CSS
								Jul 11, 2025 am	 03:26 AM
								
      Menetapkan gaya pautan yang telah anda lawati dapat meningkatkan pengalaman pengguna, terutama di laman web yang berintensifkan kandungan untuk membantu pengguna menavigasi lebih baik. 1. Gunakan CSS: Kelas pseudo yang dilawati untuk menentukan gaya pautan yang dikunjungi, seperti perubahan warna; 2. Perhatikan bahawa penyemak imbas hanya membenarkan pengubahsuaian beberapa atribut disebabkan oleh sekatan privasi; 3. Pemilihan warna harus diselaraskan dengan gaya keseluruhan untuk mengelakkan ketangkasan; 4. Terminal mudah alih mungkin tidak memaparkan kesan ini, dan disyorkan untuk menggabungkannya dengan arahan visual lain seperti logo tambahan ikon.
      
							
      
														
      
								
									Membuat bentuk tersuai dengan laluan klip CSS
								
								Membuat bentuk tersuai dengan laluan klip CSS
								Jul 09, 2025 am	 01:29 AM
								
      Gunakan atribut clip-path CSS untuk menanam unsur-unsur ke dalam bentuk tersuai, seperti segitiga, takik bulat, poligon, dan lain-lain, tanpa bergantung pada gambar atau SVG. Kelebihannya termasuk: 1. Menyokong pelbagai bentuk asas seperti Circle, Ellipse, Polygon, dan lain -lain; 2. Pelarasan responsif dan boleh disesuaikan dengan terminal mudah alih; 3. Mudah untuk animasi, dan boleh digabungkan dengan hover atau javascript untuk mencapai kesan dinamik; 4. Ia tidak menjejaskan aliran susun atur, dan hanya tanaman kawasan paparan. Penggunaan umum adalah seperti laluan klip bulat: bulatan (50pxatcenter) dan triangle clip-path: polygon (50%0%, 100 0%, 0 0%). Notis
      
							
      
														
      
								
									Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris?
								
								Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris?
								Jul 11, 2025 am	 03:25 AM
								
      Themaindifferencesbetweendisplay: inline, block, andinline-blockinhtml/cssarelayoutbehavior, spaceusage, andstylingcontrol.1.inlineelementsflowwithtext, notstartonNewlines, abaikanwidth/height, andonyapplylylylylylinddding/
      
							
      
														
      
								
									Apakah API Lukisan CSS?
								
								Apakah API Lukisan CSS?
								Jul 04, 2025 am	 02:16 AM
								
      ThecsspaintingapienablesdynamicimageGenerationincsingjavascript.1.DevelopersCreateApaintWorkLetClassWithapaint () method.2.theyRegisteritViaregisterPaint ()
      
							
      
														
      
								
									Bagaimana untuk membuat imej responsif menggunakan CSS?
								
								Bagaimana untuk membuat imej responsif menggunakan CSS?
								Jul 15, 2025 am	 01:10 AM
								
      Untuk membuat imej responsif menggunakan CSS, ia boleh dicapai terutamanya melalui kaedah berikut: 1. Gunakan maksimum lebar: 100% dan ketinggian: auto untuk membolehkan imej menyesuaikan diri dengan lebar kontena sambil mengekalkan perkadaran; 2. Gunakan atribut SRCSET dan saiz HTML dengan bijak memuatkan sumber imej yang disesuaikan dengan skrin yang berbeza; 3. Gunakan objek-sesuai dan kedudukan objek untuk mengawal penanaman imej dan paparan fokus. Bersama -sama, kaedah ini memastikan bahawa imej dibentangkan dengan jelas dan indah pada peranti yang berbeza.
      
							
      
														
      
								
									Apa itu CSS dan apa yang ada?
								
								Apa itu CSS dan apa yang ada?
								Jul 03, 2025 am	 01:48 AM
								
      Css, orcascadingstylesheets, isthepartofwebdevelopmentthatthatcontrolsawebpage'svisualappeARance, termasuk colors, fon, jarak, andlayout
      
							
      
													
      

													
								See all articles