前端自动化系列(四)之jade预编译html

刚开始写这篇文章的时候;

其实我是拒绝的;

因为在 前端自动化系列(二)之less、scss、sass、stylus css预处理器 中;

我已经表明了我的态度;

我是不喜欢那种靠缩进来体现等级层次感的语法;

但是考虑到css、js都有了现代化的写法;

单单把html落下不好;或者有童鞋喜欢呢?

毕竟jade还是有一大堆的追随者的;

于是;我还是决定讲一下 Jade ;


老规矩;先安装;

cnpm install -g jade

然后创建 test.jade 文件;输入如下内容;

doctype html
html
    head
        meta(charset="UTF-8")
        title 白俊遥博客
    body
        h2 这里是白俊遥的博客
        a#blog.blog(href="http://baijunyao.com") 点击go

        script.
            function test() {
                alert(1);
            }
            test();

命令行运行:

jade test.jade -P

生成 test.html 文件;内容如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>白俊遥博客</title>
  </head>
  <body>
    <h2>这里是白俊遥的博客</h2>
    <a id="blog" href="http://baijunyao.com" class="blog">点击go</a>
    <script>
      function test() {
          alert(1);
      }
      test();
    </script>
  </body>
</html>

好了;又是一个看一眼就学会了的东西;


那接着写点稍微高级点的用法;

<!-- 引入其他文件 -->
include test2.jade

include 都有了;那定义变量 、循环呢?

- var data = ['白俊遥', '帅白'];
ul
    each val, index in data
        li= index + ': ' + val

生成:

<ul>
  <li>0: 白俊遥</li>
  <li>1: 帅白</li>
</ul>



那 extends 、 if 、else 等等自然一个都不能少;

好了;介绍到这;有兴趣的;官网在这: https://pugjs.org


白俊遥博客

白俊遥博客
请先登陆后发表评论
  • 最新评论
  • 总共10条评论
白俊遥博客

富士山下:大神你的博客系统大家能用吗?

2016-12-10 20:25:36 回复

白俊遥博客

The丶fool白俊遥博客

2016-12-10 09:39:18 回复

白俊遥博客

{"name":"路人黄"}白俊遥博客

2016-12-07 18:21:36 回复

白俊遥博客

雷小天:qq第三方登入,怎么老报redirect uri is illegal(100010)错啊,请问回调地址怎么写的

2016-12-02 20:51:48 回复

白俊遥博客
  • evan 回复 雷小天:我也是这问题,还有个bug,template\default\admin\article\index.html,改成<td>{$v['addtime']}</td>即可,在php里面已经做过处理了,不能|data=....
  • 2016-12-05 22:02:48 回复
白俊遥博客
  • 云淡风晴 回复 雷小天:回调地址:http://baijunyao.com/index.php/Api/Index/oauth/type/qq 可以对照着改试试;
  • 2016-12-05 22:21:21 回复
白俊遥博客
  • 云淡风晴 回复 evan:多谢提醒;已经修复;
  • 2016-12-05 22:30:21 回复
白俊遥博客

evan:老板,模板下面的default和default_src是怎么用的,要同时改2个文件吗?

2016-11-30 12:13:02 回复

白俊遥博客
  • 云淡风晴 回复 evan:改default_src目录下的文件;使用gulp会在自动压缩生成到default下面;容最近忙完;写文章详讲;
  • 2016-12-05 22:22:52 回复
白俊遥博客

evan:老板,你的博客代码安装后发博文,为什么封面没有地址上传的?发完以后封面图片未知。

2016-11-29 21:31:31 回复

白俊遥博客
  • 云淡风晴 回复 evan:看是否有写入权限;
  • 2016-12-05 22:23:25 回复
白俊遥博客
  • 云淡风晴 回复 evan:会自动截取第一张图片做封面;不用专门上传;当然;这就要求每篇文章必须至少有一张图片;否则就是问号了;
  • 2016-12-05 23:28:04 回复
白俊遥博客

Only Strive:<script>alert('lalala')</script>

2016-11-29 17:19:23 回复

白俊遥博客
  • QQ机器人 回复 Only Strive:<script>alert('lalala')</script>
  • 2016-12-02 12:00:31 回复
白俊遥博客

神秘人:试一下

2016-11-27 02:25:59 回复

白俊遥博客

雷小天:6

2016-11-23 13:09:37 回复

白俊遥博客
  • 雷小天 回复 雷小天:77
  • 2016-11-23 13:09:55 回复
白俊遥博客
  • 雷小天 回复 雷小天:77788
  • 2016-11-23 13:10:02 回复
白俊遥博客
  • QQ机器人 回复 雷小天白俊遥博客
  • 2016-12-02 11:59:03 回复
白俊遥博客

BlueSky:博主价格QQ:1370373713

2016-11-17 11:41:36 回复

白俊遥博客
  • 雷小天 回复 BlueSky:66666
  • 2016-11-23 13:09:10 回复
白俊遥博客
  • 雷小天 回复 雷小天:77777
  • 2016-11-23 13:09:18 回复