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.0Webpack：4.12.0
webpack-cli: 3.0.8webpack-cli：3.0.8
npm: 6.1.0npm：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/