pug跳轉到另一個pug

受到真實故事的啟發 (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.

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

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

the message and it looks pretty normal.

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

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

我們迫切需要開發者從今天開始。

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

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

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

在按下該發送按鈕的五分鐘內，您會接到一個電話。 10分鐘后，您就可以訪問服務器了。

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

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

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.

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

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的上帝)運行它。 清理干凈了，但是還有更多問題。 這是一個靜態HTML網站，這意味著您對全局內容(頁眉，頁腳等)進行的每個更改都必須復制到每個文件中。 天啊。

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.

很簡單，您將創建一個Webpack文件來處理編寫HTML的棘手部分，并且您將快速完成該工作。

這是您需要熟悉的內容： (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！ (因為這就是互聯網的組成部分)
• CSS! (because who likes ugly things?)
  CSS！ (因為誰喜歡丑陋的東西？)
• pug! (because that’s the point of this article!)
  哈巴狗！ (因為這就是本文的重點！)
• npm (because it is God)
  npm(因為它是上帝)
• Basic command line knowledge (because doing stuff via downloads is stupid…)
  基本的命令行知識(因為通過下載進行操作很愚蠢……)
• Know who Jim Carrey is (because gifs)
  知道吉姆·卡里(Jim Carrey)是誰(因為GIF)

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.

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

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
  節點：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.

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

步驟1.組織項目結構 (Step 1. Organize your project structure)

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

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

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放到一個不會意外刪除的單獨文件夾中。 Webpack比說的Gulp好一點，我在？之前刪除了整個文件夾。 這種結構足以使我們入門。

第2步。升級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恢復到npm 。 其中之一是它停止工作了，我幾乎沒有耐心讓它再次工作。 如果您想了解更多，請在這里寫有趣的文章。

Anyways, init that npm.

無論如何，初始化那個npm。

npm init -y

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

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

安裝開發依賴項。 (Install development dependencies.)

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

不用擔心，我們將在進行解釋時對每一個進行解釋。

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.

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

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

這是我要包括的兩個。 第一個將在開發模式下運行Webpack(注意：--mode標志是Webpack 4的新增功能)，并監視文件更改。 第二個是當我們要在生產中運行Webpack時，這通常可以減少工作量。

It should look something like this:

它看起來應該像這樣：

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

創建幾個入門文件以測試我們的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需要一個入口點，所以讓我們做一個。 在src /文件夾中創建一個app.js。 可以為空白。 沒關系 它還需要一個初始pug文件進行編譯。 同樣 ，在src /文件夾中創建一個index.pug文件。

在根目錄中創建和設置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，那么我將逐一遍歷每個部分，以使您(并希望我)在此配置文件中了解wtf。

First, let’s declare our dependencies.

首先，讓我們聲明依賴項。

// 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是本機Node依賴項，因此您不必擔心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如何工作的專家。 據我了解，由于它旨在使用JavaScript，因此我們必須在配置文件中安裝加載程序，以提取HTML和CSS之類的內容。 HtmlWebpackPlugin是我們如何處理從加載程序中提取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使用 ，我真的很喜歡，所以我使用它。 我們必須定義有關如何處理某些文件類型(例如.pug或.css)的規則。 我認為，將其放入變量可以使其更清晰。 無論如何，我們使用正則表達式設置測試用例，然后定義我們要使用的加載程序。 無論出于何種原因，裝載機的排列順序與您的想法相反。 我敢肯定有一個解釋，但我找不到。

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 。 但是，實際上，當代碼運行時，它首先運行pug loader ，然后運行HTML loader 。 是的

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

注意：暫時不要擔心?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文件進入的位置。 這不是我們HTML文件所在的位置。 如上所述， 路徑是節點模塊。 __dirname是我們可以從Node獲得的變量。 文件名就是我們要調用的JS文件。 [name]是一個替換。 在這種情況下，它將使用條目文件的文件名。 如果需要唯一標識符，也可以使用[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定義了不同的模塊。 就本教程而言，只有一個模塊具有一組規則。 規則定義了我們將用于該模塊的規則。 我們將之前制作的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.

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

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文件被調用的名稱。 template是正在編譯的pug文件。 注入是：“將所有資產注入給定模板。” 我將其設置為false是因為……嗯，老實說，我不記得了。

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.

關于HtmlWebpackPlugin的最糟糕的事情之一是，您必須為每個 HTML文件創建一個條目。 我試圖找到解決方法，但是沒有找到簡單的解決方案。

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

在繼續之前，請確保我們的代碼有效！ 運行腳本。

npm run dev

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

如果一切順利，您應該會看到類似以下內容：

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

我們已經走了很長一段路。 這是禮物：

步驟3.將頁面分成部分 (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.

這就是魔術開始發生的地方。 我知道似乎我們已經工作了一段時間，但收獲很少，但是請相信我……這是值得的。

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.

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

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

讓我們做幾個文件。 您應該已經創建了index.pug文件，但讓我們再創建一個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.

布局文件基本上是整個站點的主要模板。 它將包含所有全局內容，例如頁眉，頁眉和頁腳。

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

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

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文件，您會看到一些熟悉HTML標記和不熟悉HTML標記。 我強烈建議在您選擇的編輯器中下載pug的語法突出顯示。 如果您使用的是VSCode，則默認情況下應隨附它。 謝謝微軟。

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.

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

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是正常的標簽，但是block是什么呢？ 塊是我們定義動態內容的方式。 基本上，這是告訴哈巴狗一些內容會在這里。 希望當我們創建單個頁面文件時，它會更有意義。

步驟5.創建更多的局部 (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.

查看我們的索引文件，對于整個HTML頁面而言，它似乎很小。 那是因為那家伙延伸得很少。 extended告訴pug，在我們的案例布局中 ，您想使用另一個pug文件作為模板。 然后在該塊目錄下面引用我們放在layout.pug文件中的內容。

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仍在后臺運行，則應重新編譯，然后在dist /文件夾中獲得一個新的index.html 。 如果不是，請再次運行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.

這些入門文件很好用，但我們需要取得一些實際進展。 我們需要開始獲取HTML并使用它！ 幸運的是，pug會識別常規的舊HTML標記，因此您可以從字面上復制所需的所有HTML內容，然后將其粘貼到其中。

It might look something like this:

它可能看起來像這樣：

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

Alright, it’s not really that simple.

好吧，這并不是那么簡單。

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.

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

步驟7.開始優化 (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:

我不會撒謊，當您第一次使用HTML時，Webpack不會喜歡它。 這里有一些注意事項：

圖片 (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 /”，則通常會失敗

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

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

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

這是html-loader網站上的簡介，解釋了它的作用。

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

要完全禁用標簽屬性處理(例如，如果要在客戶端上處理圖像加載)，則可以傳入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在腳本標簽中不能與JS配合使用。 如果您要粘貼常規的打開和關閉JS腳本標簽，則可以正常工作。 但是，如果要使用pug script標記，只需確保在末尾添加一個句點即可，如下所示：

步驟8.制作更多頁面并開始轉換為哈巴狗標簽 (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.

顯然，如果僅執行索引頁，則它是無用的。 無論您做什么，都只需要為每個頁面創建一個新文件。 另外，請確保在Webpack的“ 插件”部分中創建新的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.

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

包括 (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.

如果我們不談論包含，這將不是一個很好的教程。 還記得布局文件中的那些塊嗎？ 好吧，如果您不希望布局文件太大，則可以創建單獨的文件，這些文件將在編譯時拉入。 例如，如果要制作一個包含所有標題信息的文件。 用這種方法將其分解也可以大大減少縮進。

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

在新文件夾“ includes”中創建一個新文件“ header”：

src/ -- includes/header.pug

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

在該文件中，將您想要的內容放在標題中。

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

Now go back to layout.pug and include it.

現在回到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可以做更多的事情。 但是，我認為基本知識已經結束。 不過，請查看mixins 。 那些事真是太神奇了。

結語 (Wrapping Up)

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

我強烈建議緩慢引入HTML，否則您將一次調試1000個錯誤。

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

pug跳轉到另一個pug

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。