帕格入门

2020年12月30日11:12:54 发表评论 36 次浏览

本文概述

现在是时候为我们的网页创建模板了。 HTML就是通过许多不同的工具和框架使动态内容变为静态的静态内容。

即使对于静态网站, 也很难重复使用整个网站上相同的页面片段。在许多情况下, 必须使用服务器端机制。

使用Pug, 重复使用页面片段要容易得多。

哈巴狗是一个高性能模板引擎, 受HTML的影响很大, 并使用JavaScript实现了Node.js和浏览器。但是还有其他语言的端口, 例如Java, Python, Ruby等。

它的语法简单, 快速, 灵活, 不仅简化了HTML代码的创建过程, 而且还简化了HTML代码的重用。如果你熟悉Node.js, 那简直就是小菜一碟。

在本文中, 我们将向你展示Pug的工作原理。我们将不关注其选项, 设置和属性:为此, 我们已经有了官方文档, 这很棒。相反, 我们将通过从头开始创建自己的模板来了解其在实际中的工作方式。

为了推断出样式, 让我们放弃它的力量Bootstrap。在本文结尾处, 目标是实现以下目标:

最后的帕格例子。

最后的例子。

该设计取自Bootstrap的官方示例之一(专辑范例)。我们将重新创建相同的结构和设计, 但仅限于Pug。

数据将从随机用户生成API, 这是一个用于生成随机用户数据的免费API。就像洛雷姆·伊普苏姆(Lorem Ipsum)一样, 但对人而言。当你不想只为测试或采样设置整个API结构时, 此功能非常有用。

该结构基本上由Express服务器组成, 该服务器在Node.js中托管我们的localhost应用程序, 而该服务器仅具有一条路由。此路由将重定向到我们的Pug模板, 该模板将装入最终的HTML输出。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

帕格入门1

在继续之前, 建议你检查一下Bootstrap示例页面的完整源代码, 以便你可以将每个标记和CSS样式与相应的Pug样式进行匹配。

设定

本教程的设置非常简单:我们只需要Node.js和npm(已经在Node中)。

如果你使用Visual Studio Code作为IDE, 建议你安装帕格美化插件, 因为它在代码突出显示和代码片段生成方面非常有帮助。

在vscode中安装Pug。

在vscode中安装Pug beautify插件。

在你选择的文件夹中, 运行以下命令:

npm init -y
npm install express pug axios

首先是使用package.json, 第二个将安装所需的npm依赖项。

我们将利用轴距作为我们对请求的HTTP客户端随机用户API。它功能强大且易于使用。

现在, 请确保你的文件夹和文件结构与我的匹配, 以免发生进一步的错误。

这是它的外观:

LogRocket哈巴狗文件和文件夹。

项目文件和文件夹。

的意见文件夹是与Pug相关的所有内容的放置位置。成功安装Pug beautify插件后, 每个Pug文件(也以.pug扩展名, 将使该图标正确识别。

的包括当我们需要将最后一页的内容分解为"包含"时, 该文件夹将非常有用。这些文件中可以包含任何Pug文件。但是, 帕格并不是唯一可以做到这一点的人。你可以包括图像, HTML文件以及所需的任何其他类型的文件。

的混合蛋白文件夹很有趣, 因为它存储哈巴狗mixins。 Pug mixins允许你创建可重复使用的Pug块。它们基本上是外部JavaScript函数, 可以将参数作为参数, 并可以在Pug文件中的任何位置重复使用。

它们在模板列表元素中非常有用, 例如ul和olor桌子。在这里, 我们将使用它们来遍历用户并安装每个用户的卡。

卡混搭

让我们从卡片混合开始。具体来说, _thumbCard.pug文件。在继续编写代码之前, 请先看一下随机用户API输出这样你就可以看到我们将在此mixin中处理的JSON。

将以下代码放在此处:

mixin thumbCard(user)
  .col-md-4
    .card.mb-4.shadow-sm
      svg.bd-placeholder-img.card-img-top&attributes({"width": "100%"}, {"height": "225"}, {"focusable": "false"}, {"role": "img"})
        title #{user.name.first} #{user.name.last}
        rect(width="100%" height="100%" fill="#55595c")
        text(x="50%" y="50%" fill="#eceeef" dy=".3em") #{user.name.first} #{user.name.last}
      .card-body
        .card-text #{user.location.street.number} #{user.location.street.name}
        .card-text #{user.location.city}, #{user.location.state} #{user.location.postcode}
        .card-text.mb-4 #{user.location.country}
        .d-flex.justify-content-between.align-items-center
          .btn-group
            button.btn.btn-sm.btn-outline-secondary View
            button.btn.btn-sm.btn-outline-secondary Edit
          small.text-muted 9 mins

每个mixin以保留字开头混合。它类似于JavaScript函数, 并且此函数正在接收用户作为参数。

该模板遵循一行一元素(HTML元素)的规则。而且, 缩进当然也很重要(两个空格)。

每个Pug模板行都必须以要添加到其中的HTML元素的类型开头。如果你不通知它, 引擎将创建一个div。每个元素必须在声明之后立即放置其属性。

例如, ".col-md-4"对应于此元素的CSS类。 CSS类前面加一个点, ids前面加一个#, 就像我们正常映射CSS一样。

每个缩进级别都是一个新的内部元素。看看svg最后一个代码清单中的元素。在CSS声明之后, 我们有&attributes()。这是在Pug中映射HTML属性的可能方法之一。后续直肠和文本元素显示了另一种方法(在括号内)。

的#{}operator是Pug绑定运算符, 即你如何将JavaScript对象注入Pug模板。

请注意, 我们正在使用此功能来打印用户的名字和姓氏以及下面的位置。你还可以放置纯文本(请参见视图和编辑纽扣)。

包括

现在, 我们将包含。让我们从header.pug文件:

header
  .collapse.bg-dark#navbarHeader
    .container
      .row
        .col-sm-8.col-md-7.py-4
          h4.text-white Hidden Content
          p.text-muted Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.
        .col-sm-4.offset-md-1.py-4
          h4.text-white Contact
          ul.list-unstyled
            li
              a.text-white(href='#') Facebook
            li
              a.text-white(href='#') Twitter
            li
              a.text-white(href='#') Instagram
  nav.navbar.navbar-dark.bg-dark.shadow-sm
    .container.d-flex.justify-content-between
      a.navbar-brand.d-flex.align-items-center
        //- Including the svg logo
        include logo.svg
        strong notlogy Pug Example
      button.navbar-toggler.collapsed&attributes({'data-toggle': 'collapse'}, {'data-target': '#navbarHeader'})
        span.navbar-toggler-icon

在这里, 我们有类似的组成。你会看到代码有些冗长, 尤其是因为我们试图模仿与Bootstrap完全相同的设计, 后者使用了许多CSS类。

在这里要特别注意href链接声明。如果你不将其放在此处, Pug会生成与内部文本以外的其他任何链接。而且, Bootstrap不适用于这样的贫血链接。

在代码中, 你可以看到我们包含了第一个外部文件, 即logo.svg(你可以在本文末尾的GitHub链接中找到它), 通过保留字包括.

让我们转到另一个包含文件, 页脚。这是代码:

footer.text-muted
  .container
    p.float-right
      a(href="#") Back to top
    p Album example is © Bootstrap, but please download and customize it for yourself!
    p New to Bootstrap? #[a(href="https://getbootstrap.com/") Visit the homepage] or read our #[a(href="https://getbootstrap.com/docs/4.4/getting-started/introduction/") getting started guide].

这里唯一的新事物是使用哈巴狗的插值。 Pug为操作员提供了几种插值需求。你可以插入转义和未转义的字符串以及标签。

在我们的示例中, 我们需要再次将包含HTML元素, 纯文本和HTML元素的序列放在同一行中。为此, 有必要使用#[]运算符, 将新的HTML元素内容包装在其中。简单吧?

让我们转到最后一个Pug包含文件, 巨型火箭:

section.jumbotron.text-center
    .container
        h1 notlogy Pug Example
        p.lead.text-muted Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.
        p
          a.btn.btn-primary.m-2(href="#") Main call to action
          a.btn.btn-secondary.m-2(href="#") Secondary action

接下来, 让我们建立layout.pug文件。内容如下:

doctype html
html
  head
    title notlogy Pug Example
    link(rel='stylesheet' href='https://getbootstrap.com/docs/4.4/dist/css/bootstrap.min.css')
    style.
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      footer {
        padding-top: 3rem;
        padding-bottom: 3rem;
      }

      footer p {
        margin-bottom: .25rem;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

  body
    include includes/header.pug

    main#main
      include includes/jumbotron.pug

      block content

    include includes/footer.pug
    
    script(src='https://code.jquery.com/jquery-3.4.1.slim.min.js')
    script(src='https://getbootstrap.com/docs/4.4/dist/js/bootstrap.bundle.min.js')

请注意此处我们如何导入外部CSS和JavaScript文件。与HTML中的常规操作非常相似。

要在Pug中插入内联CSS样式, 你需要先插入风格片段。然后, 其他所有内容都被视为CSS。

在正文中, 我们包括页眉, 巨型文件和页脚文件。但是请注意, 我们还将插入块内容。

Pug支持模板继承。模板继承通过块和延伸关键字。在模板中, 块只是Pug的一个"块", 可以替换为子模板。

此过程是递归的。

换一种说法, index.pug是主文件, 它将从layout.pug进而包含其他Pug文件来构成自己。

看一下内容index.pug:

extends layout.pug
include mixins/_thumbCard

block content
  .album.py-5.bg-light
    .container
      .row
        each user in users
          +thumbCard(user)

第一行陈述了我们刚才所说的内容。在这里, 我们还遍历了使用者(此对象必须注入到index.js文件)。我们在这里也称为创建的混合, 在迭代过程中传递每个用户。

最后, 我们有index.js内容:

const express = require("express");
const axios = require("axios");
const app = express();

app.set("view engine", "pug");

app.get("/", async (req, res) => {
  const query = await axios.get("https://randomuser.me/api/?results=9");
  res.render("index", { users: query.data.results });
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}...`);
});

这里没什么特别的:仅设置Express服务器以及默认路由, 然后依次调用随机用户JSON。

结果必须作为第二个参数render()功能。另外, 要覆盖默认设置, 你必须设置视图引擎(在我们的示例中, 哈巴狗)。

就是这个。要进行测试, 请通过节点index.js命令并在以下位置检查结果http://本地主机:3000 /地址。

总结

你可以找到该项目的最终源代码这里.

希望你觉得这有用。在实践中, 学习Pug或其他任何方法都比仅阅读随机术语要好。

官方文档和StackOverFlow的论坛也是增加你对Pug的知识和经验的绝佳选择。

本质上, Pug非常易于使用。一旦了解了模板动态, 它就会顺利进行。只要确保将你的整个模板视为由几个较小的块组成的化合物, 这些块可以具有其他嵌套的较小块, 依此类推。

祝你编码愉快!

只有200 监视生产中失败和缓慢的网络请求

部署基于节点的Web应用程序或网站很容易。确保你的Node实例继续为你的应用程序提供资源是一件很困难的事情。如果你希望确保成功完成对后端或第三方服务的请求,

尝试notlogy

.

LogRocket网络请求监控

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR一样, 实际上记录了你网站上发生的一切。无需猜测问题发生的原因, 你可以汇总并报告有问题的网络请求, 以快速了解根本原因。

notlogy用你的应用程序记录基线性能计时, 例如页面加载时间, 到第一个字节的时间, 缓慢的网络请求, 并记录Redux, NgRx和Vuex的操作/状态。

免费开始监控

.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: