Jade：模仿简单的 PHP 函数

Question

我目前正在尝试将 PHP 文件转换为 Jade 文件以减少服务器负载*，但是运行在转换主 PHP 函数时遇到了一些问题 -该页面首先不是 HTML 文件的原因 - 进入 Jade。

该函数简化了 "items" 的列表，并接受多个参数以填充 HTML 代码的不同部分。

<?php
 function item( $name, $category, $url, $color, $partner=NULL ) {
    # convert åäö -> aao (lower- and uppercase)
    $filename = preg_replace(array('/å/','/ä/','/ö/','/Å/','/Ä/','/Ö/', '/\s+/'), array('a','a','o','A','A','O', '-'), $name);
    $filename = strtolower($filename);
  ?>
  <div class="projekt__item item-<?php echo $filename ?>" style="background-color: <?php echo $color; ?>">
    <div class="item__logo item__logo--<?php echo $filename ?>"></div>

    <div class="item__figcaption">
      <span class="item__figtext">
        <?php echo $category; ?><br>
        <?php if ($partner) : ?>
          <br>
          <span class="item__figtext--sub">
            <strong>Partner: </strong> <?php echo $partner; ?>
          </span>
        <?php endif; ?>
      </span>
    </div>

    <a href="<?php echo $url ?>" rel="nofollow" target="_blank"></a>
  </div> <!-- /item -->
<?php } ?>

我发现 PHP 代码的不同组成部分很难在 Jade 中复制。它们是：

给其中一个可传递的 a 变量一个默认值（例如 partner=NULL）
将“åäö”转换为 "aao_" 大小写字母
在没有语法错误的代码中使用传递给 mixin 的变量

我已经设置了一个 pen 包含我到目前为止的进展（这不是很多 - 它只是抛出一些对我没有帮助的错误）

如果有人能帮助我，我将不胜感激。

*我知道还有其他方法可以减少服务器负载，而缓存应该可以使这种方法变得多余。不过，这也是学玉备后之事，我很想解决这个问题，而不是抛之脑后:)

更新： 感谢@laggingreflex，问题已经解决。最终解决方案如下：

mixin item(name, category, url, color, partner)
  - var filename = name.replace(/å/g,'a').replace(/ä/g,'a').replace(/ö/g,'o').replace(/Å/g,'A').replace(/Ä/g,'A').replace(/Ö/g,'O').replace(/\s+/g,'-')
  - filename = filename.toLowerCase()

  div(class='projekt__item item-#{filename}' style="background-color: #{color};")
     div(class='item__logo item__logo--#{filename}')
     div.item__figcaption
       span.item__figtext
         | #{category}
         if (partner)
           br
           span.item__figtext--sub
             strong Partner: #{partner}
     a(href=url rel="nofollow" target="_blank")

Answer 1

你的 Jade syntax

有几个错误

定义混合方法时，您不能为参数分配默认值。

item(name, category, url, color, partner=NULL) // error
item(name, category, url, color, partner)

顺便说一句，如果你不传递参数，默认情况下它是 undefined。

在某些地方，您实际上并没有插入变量的值，而只是将变量名称输出为纯字符串

span.item__figtext
  | category // will output the text "category"
  | #{category} // will output the value stored in the variable category

分号不是 Jade 语法的一部分（* 除非你在做内联 JavaScript）

+item( "Intern...", ... ); // error
+item( "Intern...", ... )

更新并提出更多建议

当您想要将变量值分配给您不想将它们放在引号中的属性时

a(href="url" //  will output <a href="url"
a(href=url   //  will output <a href="http://example.com"

在class名称中使用变量时，不能使用点.class表示法，因此要将其定义为属性

div.item-filename    // will output <div class="item-filename"
div.item-#{filename} // will result in error
div(class="item-#{filename}" // this is what you want

至于PHP的preg_replace，.replace是JavaScript的等价物，虽然它不支持数组所以你必须将它们链接起来，并且您必须具体指定 /g 正则表达式修饰符。

还要在 Jade 中内联 JavaScript 代码，您希望它以连字符开头 -

- var filename = name.replace(/å/g,'a').replace(/ä/g,'a').…

这就是您完成的 Jade 应该看起来的样子

mixin item(name, category, url, color, partner)
  //- convert "åäö B C" -> "aao-b-c" (lower- and uppercase)
  - var filename = name.replace(/å/g,'a').replace(/ä/g,'a').replace(/ö/g,'o').replace(/Å/g,'A').replace(/Ä/g,'A').replace(/Ö/g,'O').replace(/\s+/g,'-')
  - filename = filename.toLowerCase()

  div(class='projekt__item item-#{filename}' style="background-color: #{color};") #{filename}
    div(class='item__logo item__logo--#{filename}')
    div.item__figcaption
      span.item__figtext
        | #{category}
        if (partner)
          br
          span.item__figtext--sub
            strong Partner: #{partner}
    a(href=url rel="nofollow" target="_blank")

+item( "Example Name 1 åäö", "Design & Utveckling", "http://www.example_url.com/", "#45c0ae", "Example Partner" )
+item( "Example Name 2", "Design & Utveckling", "http://www.example_url.com/", "#346b98" )
+item( "Example Name 3", "Design & Utveckling", "http://www.example_url.com/", "#8191b2", "Example Partner" )
+item( "Example Name 4", "Design & Utveckling", "http://www.example_url.com/", "#485230", "Example Partner" )

Jade：模仿简单的 PHP 函数

Jade: mimick simple PHP function

javascript

php

pug