前端自动化系列(四)之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
白俊遥博客

白俊遥博客
请先登录后发表评论
  • latest comments
  • 总共35条评论
白俊遥博客

半夏微凉。 白俊遥博客

2016-12-29 16:33:52 回复

白俊遥博客

雷小天 :获取 Code是,里面的parms里面有几个参数,3个还是要加上state 4个参数

2016-12-24 14:20:21 回复

白俊遥博客

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

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

白俊遥博客 白俊遥博客

云淡风晴 :源代码已开源;可以随意使用;

2016-12-11 21:55:33 回复

白俊遥博客

Berger 白俊遥博客

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,改成{$v['addtime']}即可,在php里面已经做过处理了,不能|data=....

2016-12-05 22:02:48 回复

白俊遥博客 白俊遥博客

云淡风晴 :回调地址:http://baijunyao.com/index.php/Api/Index/oauth/type/qq 可以对照着改试试;

2016-12-05 22:21:21 回复

白俊遥博客 白俊遥博客

云淡风晴 :多谢提醒;已经修复;

2016-12-05 22:30:21 回复

白俊遥博客

雷小天 :我的PC端不行,手机端就行,这是怎么回事啊

2016-12-24 10:59:58 回复

白俊遥博客

雷小天 :http://www.100txy.com/index.php/Api/Index/oauth/type/qq

2016-12-24 11:02:00 回复

白俊遥博客 白俊遥博客

云淡风晴 :我看了下;提示的是说缺少参数code;你查看下到哪的时候;丢了;

2016-12-24 11:26:34 回复

白俊遥博客

雷小天 :好的,我去看下

2016-12-24 12:19:57 回复

白俊遥博客

雷小天 :// 第三方平台登陆    public function oauth_login(){        $type=I('get.type');        import("Org.ThinkSDK.ThinkOauth");        $sdk=\ThinkOauth::getInstance($type);        redirect($sdk->getRequestCodeURL());    }最终:$sdk->getRequestCodeURL()的地址为:string(197) "https://graph.qq.com/oauth2.0/authorize?client_id=101360377&redirect_uri=http%3A%2F%2Fwww.100txy.com%2Findex.php%2FApi%2FIndex%2Foauth%2Ftype%2Fqq&response_type=code&scope=get_user_info%2Cadd_share"请博主帮忙看下哪里出问题了

2016-12-24 13:41:18 回复

白俊遥博客

CI :我的url上有code  但是页面是404  为什么

2016-12-25 17:18:24 回复

白俊遥博客

CI :我的url上有code  但是页面是404  为什么

2016-12-25 17:18:38 回复

白俊遥博客 白俊遥博客

云淡风晴 :先把debug打开;看下报的什么错;

2016-12-25 17:37:39 回复

白俊遥博客

CI :我打开了。没有报错  就是404  

2016-12-25 17:38:13 回复

白俊遥博客 白俊遥博客

云淡风晴 :链接是什么?

2016-12-25 17:39:23 回复

白俊遥博客

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

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

白俊遥博客 白俊遥博客

云淡风晴 :改default_src目录下的文件;使用gulp会在自动压缩生成到default下面;容最近忙完;写文章详讲;

2016-12-05 22:22:52 回复

白俊遥博客

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

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

白俊遥博客 白俊遥博客

云淡风晴 :看是否有写入权限;

2016-12-05 22:23:25 回复

白俊遥博客 白俊遥博客

云淡风晴 :会自动截取第一张图片做封面;不用专门上传;当然;这就要求每篇文章必须至少有一张图片;否则就是问号了;

2016-12-05 23:28:04 回复

白俊遥博客

null :alert('lalala')

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

白俊遥博客

QQ机器人 :alert('lalala')

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 回复

白俊遥博客

Vivian :博主价格QQ:1370373713

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

白俊遥博客

雷小天 :66666

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

白俊遥博客

雷小天 :77777

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