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

InterServer Web Hosting and VPS

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

我的博客是建立在 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

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

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

上面这段广告代码可以插入到 post.pugif theme.shareto == trueif theme.donate.enable == trueif 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!

  • 海报
  • 打赏
  • 分享
Pug 文件如何添加 HTML 广告代码插图
Pug 文件如何添加 HTML 广告代码插图2
海报图正在生成中...
分享到...
Pug 文件如何添加 HTML 广告代码插图
请选择打赏方式
Pug 文件如何添加 HTML 广告代码插图
Pug 文件如何添加 HTML 广告代码插图3 Pug 文件如何添加 HTML 广告代码插图4
  • 微信
  • 支付宝

标签

发表评论