Pug 文件如何添加 HTML 广告代码

最近，笔者想在自己的独立博客网站添加一段广告代码。

我的博客是建立在 Github Page 上的静态页面，采用的是 Hexo 方案，前端模版使用的是 Pug 引擎。

Pug（以前被称为 Jade ）是一种高性能的模板引擎，用于将简洁的文本模板转换为 HTML 、XML 或其他格式的输出。它具有简洁的语法和强大的功能，使得在构建 Web 应用程序和生成动态内容时更加便捷和可读性更高。以下是一些 Pug 的主要特点和优势：

1. 简洁的语法: Pug 使用缩进和标签的层次结构来表示HTML结构，而不是使用传统的封闭标签。这样可以减少代码量和视觉噪声，提高代码的可读性。

2. 嵌入式 JavaScript: Pug 允许你在模板中嵌入 JavaScript 代码，以进行动态内容的生成和逻辑控制。你可以在模板中使用变量、循环、条件语句等功能，使模板更加灵活和功能丰富。

3. 模板继承: Pug 支持模板继承，可以定义一个父模板，然后在子模板中扩展和重写部分内容。这样可以实现模板的复用和分层管理，提高代码的可维护性。

4. 混入（Mixins）: Pug 的混入功能允许你定义可重用的代码块，类似于函数。你可以定义一个混入，并在需要的地方使用它，避免重复编写相同的代码。

5. 过滤器（Filters）: Pug 支持过滤器，可以将文本通过特定的过滤器进行处理，例如Markdown、CoffeeScript等。这使得在模板中处理不同类型的内容变得更加方便。

6. 动态属性: Pug 允许你在属性中使用动态表达式，从而使属性值可以根据运行时的数据进行动态计算。这使得生成动态和可定制的HTML属性变得更加容易。

7. 扩展性: Pug 可以与 Express、Koa等流行的Node.js框架无缝集成，使得在Web应用程序中使用模板更加方便和高效。

因此，在 Pug 文件中添加 HTML 代码非常简单。Pug 使用缩进和特定的语法来表示 HTML 结构，关键是根据 Pug 的缩进规则，确保缩进正确，使其成为父元素的子元素。

本案例具体操作如下：

我的 post.pug 文件中部分代码如下：

if theme.shareto == true
  script(type='text/javascript', src=url_for(theme.js) + '/share.js' + '?v=' + theme.version, async)
  a.article-share-link(data-url=page.permalink, data-id=page._id, data-qrcode=qrcode(page.permalink))= __('shareto')

if theme.donate.enable == true
  iframe(src='/donate/?AliPayQR=' + theme.donate.alipay_qr + '&WeChatQR=' + theme.donate.wechat_qr + '&GitHub=' + theme.donate.github + '&BTCQR=' + theme.donate.btc_qr + '&BTCKEY='+ theme.donate.btc_key + '&PayPal=' + theme.donate.paypal_url, style='overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;', frameborder='0', scrolling='no')

include _partial/tag.pug
include _partial/post_nav.pug

if page.comments
  include _partial/comments.pug

考虑到最常用的谷歌广告联盟支付方式传统，需要通过电汇途径很麻烦，我选择了一家加密货币广告联盟，从而有机会获得一些加密货币。

注册账户后，我生成了一个广告单元，代码如下：

<iframe data-aa='2218236' src='//acceptable.a-ads.com/2218236' style='border:0px; padding:0; width:100%; height:100%; overflow:hidden; background-color: transparent;'></iframe>

上面这段广告代码可以插入到 post.pug 的 if theme.shareto == true 、if theme.donate.enable == true、if page.comments 之前，也可以直接放到文档最末即可。

<iframe></iframe> 这个框架需要稍微处理后，如下所示：

// 插入 <iframe> 代码
   iframe(data-aa='2218236' src='//acceptable.a-ads.com/2218236' style='border:0px; padding:0; width:100%; height:100%; overflow:hidden; background-color: transparent;')

保存 post.pug 文件并重新渲染网站以后，就可以看到目标广告页面了。Bingo！