pug跳轉(zhuǎn)到另一個(gè)pug

受到真實(shí)故事的啟發(fā) (Inspired by a true story)

讓我們一起去旅行吧… (Let’s take a journey…)

Imagine you are on the call list for a freelance agency in a city of your choosing. Now let’s say you get a nice message in your inbox. You open up the message and it looks pretty normal.

想象一下，您在所選城市的自由職業(yè)者的通話清單中。 現(xiàn)在，假設(shè)您在收件箱中收到一條不錯(cuò)的消息。 您打開該消息，它看起來很正常。

We have an immediate need for a Developer to get started today.我們迫切需要開發(fā)者從今天開始。

the message and it looks pretty normal.

該消息，它看起來很正常。

We have an immediate need for a Developer to get started today.

我們迫切需要開發(fā)者從今天開始。

Being a person who enjoys eating food to survive, you type in some info and apply.

作為一個(gè)喜歡吃食物以求生存的人，您輸入一些信息并提出申請(qǐng)。

Within five minutes of hitting that send button, you get a call. 10 minutes after that, you’re getting the server access.

在按下該發(fā)送按鈕的五分鐘內(nèi)，您會(huì)接到一個(gè)電話。 10分鐘后，您就可以訪問服務(wù)器了。

Needless to say, you’re on a deadline. That deadline is by the end of the day.

不用說，您已經(jīng)到了最后期限。 截止日期是一天的盡頭。

You open up the HTML files and look into them…in horror.

您打開HTML文件并驚恐地看著它們。

The code is all over the place, messy and disorganized. Not to mention, you have to make adjustments to the header and footer…on five different pages.

代碼到處都是，雜亂無章。 更不用說，您必須在五個(gè)不同的頁(yè)面上調(diào)整頁(yè)眉和頁(yè)腳。

The first thing you do is run it through Prettify (Thank god for Prettify). That cleaned it up, but there are some more problems. This is a static HTML site, which means every change you make to the global stuff (header, footer, and so on), you’re going to have to copy in EVERY file. Oh, my.

您要做的第一件事就是通過Prettify (感謝Prettify的上帝)運(yùn)行它。 清理干凈了，但是還有更多問題。 這是一個(gè)靜態(tài)HTML網(wǎng)站，這意味著您對(duì)全局內(nèi)容(頁(yè)眉，頁(yè)腳等)進(jìn)行的每個(gè)更改都必須復(fù)制到每個(gè)文件中。 天啊。

What are you gonna do???

你要去做什么？？？

Simple, you’re gonna whip up a Webpack file to handle the crappy part of writing HTML, and you’re gonna do it quickly.

很簡(jiǎn)單，您將創(chuàng)建一個(gè)Webpack文件來處理編寫HTML的棘手部分，并且您將快速完成該工作。

這是您需要熟悉的內(nèi)容： (Here’s what you’re gonna need to be familiar with:)

• Javascript! (because of Webpack)
  Javascript！ (由于Webpack)
• HTML! (because that’s what the internet is made of)
  HTML！ (因?yàn)檫@就是互聯(lián)網(wǎng)的組成部分)
• CSS! (because who likes ugly things?)
  CSS！ (因?yàn)檎l喜歡丑陋的東西？)
• pug! (because that’s the point of this article!)
  哈巴狗！ (因?yàn)檫@就是本文的重點(diǎn)！)
• npm (because it is God)
  npm(因?yàn)樗巧系?
• Basic command line knowledge (because doing stuff via downloads is stupid…)
  基本的命令行知識(shí)(因?yàn)橥ㄟ^下載進(jìn)行操作很愚蠢……)
• Know who Jim Carrey is (because gifs)
  知道吉姆·卡里(Jim Carrey)是誰(因?yàn)镚IF)

If you aren’t familiar with pug, you can still manage your way through this. But if you’ve got time, read up on it. I recommend learning pug with pugs. Or their docs. Those are alright too, I guess.

如果您不熟悉哈巴狗，仍然可以通過這種方式來管理自己的方式。 但是，如果您有時(shí)間，請(qǐng)仔細(xì)閱讀。 我建議和哈巴狗一起學(xué)習(xí)哈巴狗 。 或他們的文檔 。 我猜那些也沒關(guān)系。

Here’s the versions I used for this:

這是我為此使用的版本：

• html-loader: 0.5.5,
  html-loader：0.5.5，
• html-webpack-plugin: 3.2.0,
  html-webpack-plugin：3.2.0，
• pug-html-loader: 1.1.5,
  pug-html-loader：1.1.5，
• Webpack: 4.12.0
  Webpack：4.12.0
• webpack-cli: 3.0.8
  webpack-cli：3.0.8
• npm: 6.1.0
  npm：6.1.0
• node: 10.4.0
  節(jié)點(diǎn)：10.4.0

Update: I made a video! Check it out if you don’t want to read, but would rather listen to my voice for 30 minutes.

更新：我拍了一個(gè)視頻！ 如果您不想閱讀，可以檢查一下，但寧愿聽30分鐘我的聲音。

步驟1.組織項(xiàng)目結(jié)構(gòu) (Step 1. Organize your project structure)

This is how I like to organize my folder for these types of projects.

這就是我喜歡為這些類型的項(xiàng)目組織文件夾的方式。

src/ oldHTML/ dist/ images/ css/ webpack.config

I like to put all the original HTML into a separate folder that I can’t accidentally delete. Webpack is a bit kinder than say, Gulp, which I’ve had delete an entire folder before ?. This structure is good enough to get us started.

我喜歡將所有原始HTML放到一個(gè)不會(huì)意外刪除的單獨(dú)文件夾中。 Webpack比說的Gulp好一點(diǎn)，我在？之前刪除了整個(gè)文件夾。 這種結(jié)構(gòu)足以使我們?nèi)腴T。

第2步。升級(jí)npm引擎 (Step 2. Rev up the npm engine)

Aside: I recently reverted back to npm from yarn for a few reasons. One of which was that it stopped working and I had little patience to make it work again. Interesting article here, if you want to read more.

旁白：出于npm原因，我最近從yarn恢復(fù)到npm 。 其中之一是它停止工作了，我?guī)缀鯖]有耐心讓它再次工作。 如果您想了解更多，請(qǐng)?jiān)谶@里寫有趣的文章。

Anyways, init that npm.

無論如何，初始化那個(gè)npm。

npm init -y

Note: (the -y is if you don’t want to answer any of its questions)

注意：(- y是如果您不想回答任何問題)

安裝開發(fā)依賴項(xiàng)。 (Install development dependencies.)

Don’t worry, I’ll explain each one as we go.

不用擔(dān)心，我們將在進(jìn)行解釋時(shí)對(duì)每一個(gè)進(jìn)行解釋。

npm install -D webpack webpack-cli pug-html-loader html-webpack-plugin html-loader

將一些腳本添加到package.json (Add some scripts to the package.json)

By default, package.json has one script, but we need to add a few.

默認(rèn)情況下，package.json具有一個(gè)腳本，但是我們需要添加一些腳本。

"dev": "webpack --watch --mode development", "prod": "webpack --mode production"

These are the two that I like to include. The first will run Webpack in development mode (note: the --mode flag is new to Webpack 4) and watch for file changes. The second is when we want to run Webpack in production, this usually minifies stuff.

這是我要包括的兩個(gè)。 第一個(gè)將在開發(fā)模式下運(yùn)行Webpack(注意：--mode標(biāo)志是Webpack 4的新增功能)，并監(jiān)視文件更改。 第二個(gè)是當(dāng)我們要在生產(chǎn)中運(yùn)行Webpack時(shí)，這通常可以減少工作量。

It should look something like this:

它看起來應(yīng)該像這樣：

"name": "pugTut", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test":"dev": "webpack --watch --mode development","prod": "webpack --mode production" }, .....more code

創(chuàng)建幾個(gè)入門文件以測(cè)試我們的Webpack配置 (Create a couple starter files to test our Webpack config)

Webpack needs an entry point, so let’s make one. Create an app.js in the src/ folder. It can be blank. Doesn’t matter. It also needs an initial pug file to compile. Create a index.pug file in the src/ folder, as well.

Webpack需要一個(gè)入口點(diǎn)，所以讓我們做一個(gè)。 在src /文件夾中創(chuàng)建一個(gè)app.js。 可以為空白。 沒關(guān)系 它還需要一個(gè)初始pug文件進(jìn)行編譯。 同樣 ，在src /文件夾中創(chuàng)建一個(gè)index.pug文件。

在根目錄中創(chuàng)建和設(shè)置webpack.config.js (Create and setup webpack.config.js in root directory)

Alright, if you haven’t used Webpack before, I’m going to walk through each part individually to give you (and hopefully me) an idea of wtf is going on in this config file.

好吧，如果您以前從未使用過Webpack，那么我將逐一遍歷每個(gè)部分，以使您(并希望我)在此配置文件中了解wtf。

First, let’s declare our dependencies.

首先，讓我們聲明依賴項(xiàng)。

// webpack.config.js const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin');

path is a native Node dependency, so you shouldn’t have to worry about that being required in your package.json.

path是本機(jī)Node依賴項(xiàng)，因此您不必?fù)?dān)心package.json中的要求。

Webpack is, well Webpack…

Webpack很好，Webpack…

HtmlWebpackPlugin is how we extract HTML. I’m not an expert on how Webpack works. From what I understand, since it is designed to consume JavaScript, we have to have loaders in our config file to pull out things like HTML and CSS. HtmlWebpackPlugin is how we do something useful with the HTML that gets extracted from the loaders.

HtmlWebpackPlugin是我們提取HTML的方式。 我不是Webpack如何工作的專家。 據(jù)我了解，由于它旨在使用JavaScript，因此我們必須在配置文件中安裝加載程序，以提取HTML和CSS之類的內(nèi)容。 HtmlWebpackPlugin是我們?nèi)绾翁幚韽募虞d程序中提取HTML的有用方法。

Cool? Next step…

涼？ 下一步…

const pug = {test: /\.pug$/,use: ['html-loader?attrs=false', 'pug-html-loader'] };

This method is used by Wes Bos and I really like it, so I use it. We have to define rules on how to handle certain file types, for example .pug or .css. Putting it into a variable makes it more legible, in my opinion. Anyways, we setup a test case with a regexp, then define the loaders we want to use. For whatever reason, the loaders are listed in reverse order of what you’d think. I’m sure there is an explanation but I couldn’t find it.

這種方法由Wes Bos使用 ，我真的很喜歡，所以我使用它。 我們必須定義有關(guān)如何處理某些文件類型(例如.pug或.css)的規(guī)則。 我認(rèn)為，將其放入變量可以使其更清晰。 無論如何，我們使用正則表達(dá)式設(shè)置測(cè)試用例，然后定義我們要使用的加載程序。 無論出于何種原因，裝載機(jī)的排列順序與您的想法相反。 我敢肯定有一個(gè)解釋，但我找不到。

Confused? What that means is, if we want to use pug to compile to HTML, we write it in the order above: our html loader -> pug loader. However, in reality when the code runs, it runs the pug loader first…then the HTML loader. Yep.

困惑？ 這就是說，如果我們要使用pug編譯為HTML，則按照上面的順序編寫它： html loader- > pug loader 。 但是，實(shí)際上，當(dāng)代碼運(yùn)行時(shí)，它首先運(yùn)行pug loader ，然后運(yùn)行HTML loader 。 是的

Note: Don’t worry about ?attrs=false for right now, I’ll explain it a bit later.

注意：暫時(shí)不要擔(dān)心?attrs=false ，我將在稍后解釋。

Cool? Next step…

涼？ 下一步…

const config = {entry: './src/app.js',output: {path: path.resolve(__dirname, 'dist'),filename: '[name].bundle.js'},module: {rules: [pug]},plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: 'src/index.pug',inject: false})] }; module.exports = config;

Holy Crap. That’s a lot of stuff. Let’s break it down.

哇靠。 有很多東西。 讓我們分解一下。

entry is simply the entry point for our JS file.

entry只是我們JS文件的入口。

output defines where we want our JS file to go. This is not where our HTML files will go. As mentioned above, path is a node module. __dirname is a variable we can get from Node. The filename is what we want to call our JS file. The [name] is a substitution. In this case, it uses the file name of the entry file. You can also use [hash] if you want a unique identifier.

輸出定義了我們希望JS文件進(jìn)入的位置。 這不是我們HTML文件所在的位置。 如上所述， 路徑是節(jié)點(diǎn)模塊。 __dirname是我們可以從Node獲得的變量。 文件名就是我們要調(diào)用的JS文件。 [name]是一個(gè)替換。 在這種情況下，它將使用條目文件的文件名。 如果需要唯一標(biāo)識(shí)符，也可以使用[hash] 。

module defines the different modules. For the purpose of this tutorial, there is only one module with one set of rules. rules defines the rules we will use for that module. We throw the pug variable we made earlier into there. So nice, so clean.

module定義了不同的模塊。 就本教程而言，只有一個(gè)模塊具有一組規(guī)則。 規(guī)則定義了我們將用于該模塊的規(guī)則。 我們將之前制作的pug變量扔到那里。 很好，很干凈。

Finally, plugins is where we get to add any third party stuff. In our case, we are using HtmlWebpackPlugin to do something with our pug files.

最后，插件是我們可以添加任何第三方內(nèi)容的地方。 在我們的例子中，我們使用HtmlWebpackPlugin對(duì)我們的pug文件進(jìn)行操作。

filename is what we want our HTML file to be called. template is the pug file that are compiling. inject is: “inject all assets into the given template.” I have it set to false because…well, honestly I don’t remember.

filename是我們希望我們HTML文件被調(diào)用的名稱。 template是正在編譯的pug文件。 注入是：“將所有資產(chǎn)注入給定模板。” 我將其設(shè)置為false是因?yàn)椤?#xff0c;老實(shí)說，我不記得了。

One of the crappiest things about HtmlWebpackPlugin is that you have to create an entry for EVERY HTML file. I tried to figure a way around it, but found no simple solutions.

關(guān)于HtmlWebpackPlugin的最糟糕的事情之一是，您必須為每個(gè) HTML文件創(chuàng)建一個(gè)條目。 我試圖找到解決方法，但是沒有找到簡(jiǎn)單的解決方案。

// webpack.config.js const path = require('path'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const pug = {test: /\.pug$/,use: ['html-loader?attrs=false', 'pug-html-loader'] }; const config = {entry: './src/app.js',output: {path: path.resolve(__dirname, 'dist'),filename: '[name].bundle.js'},module: {rules: [pug]},plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: 'src/index.pug',inject: false})] }; module.exports = config;

Before we move on, let’s make sure our code works! Run the script.

在繼續(xù)之前，請(qǐng)確保我們的代碼有效！ 運(yùn)行腳本。

npm run dev

If all went well, you should see something like this:

如果一切順利，您應(yīng)該會(huì)看到類似以下內(nèi)容：

We’ve come a long way. Here’s a present:

我們已經(jīng)走了很長(zhǎng)一段路。 這是禮物：

步驟3.將頁(yè)面分成部分 (Step 3. Break up the pages into partials)

This is where magic starts happening. I know it seems like we’ve been working for a while with very little gain, but trust me…it was worth it.

這就是魔術(shù)開始發(fā)生的地方。 我知道似乎我們已經(jīng)工作了一段時(shí)間，但收獲很少，但是請(qǐng)相信我……這是值得的。

One of the most important features for pug is the partials. The idea is to have one file that holds most of your global code (head, header, footer, nav, and so on) and have individual files for all your content.

哈巴狗最重要的特征之一就是局部。 想法是擁有一個(gè)文件，其中包含您的大多數(shù)全局代碼(標(biāo)頭，標(biāo)頭，頁(yè)腳，導(dǎo)航等)，并為所有內(nèi)容提供單獨(dú)的文件。

Let’s make a couple files. You should have created the index.pug file already, but let’s make one more, layout.pug.

讓我們做幾個(gè)文件。 您應(yīng)該已經(jīng)創(chuàng)建了index.pug文件，但讓我們?cè)賱?chuàng)建一個(gè)layout.pug 。

src/ - index.pug - layout.pug

步驟4.安裝布局文件 (Step 4. Setup layout file)

The layout file is basically the main template for your whole site. It will have hold all the global stuff, for example head, header and footer.

布局文件基本上是整個(gè)站點(diǎn)的主要模板。 它將包含所有全局內(nèi)容，例如頁(yè)眉，頁(yè)眉和頁(yè)腳。

//- layout.pug doctype html htmlheadtitle I'm a titlebodyblock headerblock contentblock footerscript(src="somescript.js")

I guess something to explain is that pug is all based on indentation, similar to YAML. It is glorious, because that means no more closing tags! However, this can throw some, especially those with crappy indentation to begin with. So just make sure to start slow and make sure everything is indented correctly and you’ll be fine.

我想解釋一下，哈巴狗都是基于縮進(jìn)的，類似于YAML。 這是光榮的，因?yàn)檫@意味著不再需要關(guān)閉標(biāo)簽！ 但是，這可能會(huì)引發(fā)一些問題，尤其是那些凹痕較淺的情況。 因此，只要確保開始緩慢，并確保所有縮進(jìn)正確就可以了。

Looking at our layout.pug file, you’ll see some familiar HTML tags mixed with unfamiliar ones. I highly suggest downloading syntax highlighting for pug in your editor of choice. If you’re using VSCode, it should come with it by default. Thanks Microsoft.

查看我們的layout.pug文件，您會(huì)看到一些熟悉HTML標(biāo)記和不熟悉HTML標(biāo)記。 我強(qiáng)烈建議在您選擇的編輯器中下載pug的語法突出顯示。 如果您使用的是VSCode，則默認(rèn)情況下應(yīng)隨附它。 謝謝微軟。

I think it’s pretty easy to figure out, but let’s take a look at the meat of the document to make sure we know what’s going on.

我認(rèn)為很容易弄清楚，但是讓我們看一下文檔的內(nèi)容以確保我們知道發(fā)生了什么。

headtitle I'm a title bodyblock headerblock contentblock footer script(src="somescript.js")

head, body, title and script are normal tags, but what the hell is block? block is how we define dynamic content. Basically, this is telling pug that some content is going to go in here. Hopefully it’ll make more sense when we create our individual page files.

head ， body ， title和script是正常的標(biāo)簽，但是block是什么呢？ 塊是我們定義動(dòng)態(tài)內(nèi)容的方式。 基本上，這是告訴哈巴狗一些內(nèi)容會(huì)在這里。 希望當(dāng)我們創(chuàng)建單個(gè)頁(yè)面文件時(shí)，它會(huì)更有意義。

步驟5.創(chuàng)建更多的局部 (Step 5. Create more partials)

Let’s make use of that index.pug file.

讓我們使用該index.pug文件。

//- index.pug extends layout block contentp Woah.

Looking at our index file, it seems awfully small for a whole HTML page. That’s because of that little extends fella. extends tells pug that you want to use another pug file as the template, in our case layout. Then below that block content is in reference to what we put in our layout.pug file.

查看我們的索引文件，對(duì)于整個(gè)HTML頁(yè)面而言，它似乎很小。 那是因?yàn)槟羌一?strong>延伸得很少。 extended告訴pug，在我們的案例布局中 ，您想使用另一個(gè)pug文件作為模板。 然后在該塊目錄下面引用我們放在layout.pug文件中的內(nèi)容。

If you have your Webpack still running in the background, it should recompile and you’ll get a fresh new index.html in your dist/ folder. If not, run Webpack again.

如果您的Webpack仍在后臺(tái)運(yùn)行，則應(yīng)重新編譯，然后在dist /文件夾中獲得一個(gè)新的index.html 。 如果不是，請(qǐng)?jiān)俅芜\(yùn)行Webpack。

第6步。獲取所有舊HTML (Step 6. Grab all the old HTML)

Those starter files are fine and dandy, but we need to make some real progress. We need to start grabbing that HTML and using it! Luckily, pug will recognize regular old HTML tags, so you can literally copy all the HTML content you want and just paste it in there.

這些入門文件很好用，但我們需要取得一些實(shí)際進(jìn)展。 我們需要開始獲取HTML并使用它！ 幸運(yùn)的是，pug會(huì)識(shí)別常規(guī)的舊HTML標(biāo)記，因此您可以從字面上復(fù)制所需的所有HTML內(nèi)容，然后將其粘貼到其中。

It might look something like this:

它可能看起來像這樣：

extends layout block content<h1>blerb</h1><p>Woah.</p>

Alright, it’s not really that simple.

好吧，這并不是那么簡(jiǎn)單。

Like I mentioned, pug is based on indentation. To make life easier on yourself, I suggest removing all indentation from the HTML file before pasting into the pug file. It will mostly work, but you’ll probably have to finagle it a bit. Lucky for us, pug-html-loader will tell us what’s wrong with it when it tries to compile. There are some examples of common problems in the next Step.

就像我提到的，哈巴狗基于縮進(jìn)。 為了使您的生活更輕松，建議您在粘貼到pug文件之前從HTML文件中刪除所有縮進(jìn)。 它通常會(huì)起作用，但是您可能需要稍微調(diào)整一下它。 對(duì)我們來說幸運(yùn)的是， pug-html-loader會(huì)在嘗試編譯時(shí)告訴我們它有什么問題。 下一步中有一些常見問題的示例。

步驟7.開始優(yōu)化 (Step 7. Start optimizing)

I’m not gonna lie, when you first throw in HTML, Webpack is not gonna like it. Here are a few things to look out for:

我不會(huì)撒謊，當(dāng)您第一次使用HTML時(shí)，Webpack不會(huì)喜歡它。 這里有一些注意事項(xiàng)：

圖片 (Images)

Make sure the links to the images are good. For whatever reason, it often fails if the src = “images/” instead of src= “/images/”

確保指向圖像的鏈接正確。 無論出于何種原因，如果src =“ images /”而不是src =“ / images /”，則通常會(huì)失敗

2. I promised earlier to get back to what ?attrs=false was, well, here we are!

2.我早些時(shí)候曾保證會(huì)回到什么?attrs=false ，好了，我們到了！

This is the blurb from the html-loader site explaining what that does.

這是html-loader網(wǎng)站上的簡(jiǎn)介，解釋了它的作用。

To completely disable tag-attribute processing (for instance, if you’re handling image loading on the client side) you can pass in attrs=false.

要完全禁用標(biāo)簽屬性處理(例如，如果要在客戶端上處理圖像加載)，則可以傳入attrs=false 。

html-loader?attrs=false

Java腳本 (Javascript)

pug doesn’t play nice with JS in script tags. If you are pasting in regular opening and closing JS script tags, it may work okay. However, if you want to make use of the pug script tag, just make sure to add a period on the end, like this:

pug在腳本標(biāo)簽中不能與JS配合使用。 如果您要粘貼常規(guī)的打開和關(guān)閉JS腳本標(biāo)簽，則可以正常工作。 但是，如果要使用pug script標(biāo)記，只需確保在末尾添加一個(gè)句點(diǎn)即可，如下所示：

步驟8.制作更多頁(yè)面并開始轉(zhuǎn)換為哈巴狗標(biāo)簽 (Step 8. Make more pages and start converting to pug tags)

Clearly it’s useless if you are only doing the index page. For whatever you’re doing, just create a new file for each page you want. Also, make sure to make new HtmlWebpackPlugin entries in the plugins section in Webpack.

顯然，如果僅執(zhí)行索引頁(yè)，則它是無用的。 無論您做什么，都只需要為每個(gè)頁(yè)面創(chuàng)建一個(gè)新文件。 另外，請(qǐng)確保在Webpack的“ 插件”部分中創(chuàng)建新的HtmlWebpackPlugin條目。

It’ll end up looking like this:

最終看起來像這樣：

//webpack.config.js ...previous code... plugins: [new HtmlWebpackPlugin({filename: 'index.html',template: 'src/index.pug',inject: false}),new HtmlWebpackPlugin({filename: 'contact.html',template: 'src/contact.pug',inject: false})] ...more code...

You don’t have to convert everything to pug format immediately. In fact, if you have a huge site with a crap ton of HTML, then you can do it as you go, but it does make it easier.

您不必立即將所有內(nèi)容都轉(zhuǎn)換為pug格式。 實(shí)際上，如果您有一個(gè)龐大HTML站點(diǎn)，那么就可以隨心所欲地做到這一點(diǎn)，但這確實(shí)使它變得更加容易。

包括 (Includes)

This wouldn’t be a very good tutorial if we didn’t talk about includes. Remember those blocks in the layout file? Well, if you don’t want the layout file to be giant, you can create separate files that will be pulled in at compile time. For instance, if you want to make a single file that holds all the header info. Breaking it up this way also helps substantially with indentation.

如果我們不談?wù)摪?#xff0c;這將不是一個(gè)很好的教程。 還記得布局文件中的那些塊嗎？ 好吧，如果您不希望布局文件太大，則可以創(chuàng)建單獨(dú)的文件，這些文件將在編譯時(shí)拉入。 例如，如果要制作一個(gè)包含所有標(biāo)題信息的文件。 用這種方法將其分解也可以大大減少縮進(jìn)。

Create a new file “header” in a new folder “includes”:

在新文件夾“ includes”中創(chuàng)建一個(gè)新文件“ header”：

src/ -- includes/header.pug

In that file, put whatever you want to be in the header.

在該文件中，將您想要的內(nèi)容放在標(biāo)題中。

//- header.pug headerh1 I'm a header

Now go back to layout.pug and include it.

現(xiàn)在回到layout.pug并包含它。

//- layout.pug doctype html htmlheadtitle I'm a titlebodyblock headerinclude includes/headerblock contentblock footerscript(src="somescript.js")

第7步。想得到花式嗎？ (Step 7. Want to get Fancy?)

There’s a ton more stuff you can do with pug and webpack. However, I think we’ve reached the end of the basics. Still, check out mixins. Those things are amazing.

哈巴狗和webpack可以做更多的事情。 但是，我認(rèn)為基本知識(shí)已經(jīng)結(jié)束。 不過，請(qǐng)查看mixins 。 那些事真是太神奇了。

結(jié)語 (Wrapping Up)

I highly suggest bringing in HTML slowly, otherwise you’ll end up debugging 1,000 errors at once.

我強(qiáng)烈建議緩慢引入HTML，否則您將一次調(diào)試1000個(gè)錯(cuò)誤。

翻譯自: https://www.freecodecamp.org/news/make-multipage-html-development-suck-less-with-pug-fb23bc8e7874/

pug跳轉(zhuǎn)到另一個(gè)pug

總結(jié)

以上是生活随笔為你收集整理的pug跳转到另一个pug_使用Pug减少多页HTML开发的负担的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。