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

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

半夏微凉。白俊遥博客

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,改成<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 回复
白俊遥博客
  • 雷小天 回复 云淡风晴:我的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 回复
白俊遥博客
  • 云淡风晴 回复 CI:先把debug打开;看下报的什么错;
  • 2016-12-25 17:37:39 回复
白俊遥博客
  • CI 回复 云淡风晴:我打开了。没有报错  就是404  
  • 2016-12-25 17:38:13 回复
白俊遥博客
  • 云淡风晴 回复 CI:链接是什么?
  • 2016-12-25 17:39:23 回复
白俊遥博客
  • CI 回复 云淡风晴:http://www.chensenlin.cn/index.php/Api/Index/oauth/type/qq
  • 2016-12-25 17:39:53 回复
白俊遥博客
  • 云淡风晴 回复 CI:我测试你这个把回调链接改成:http://www.chensenlin.cn/Api/Index/oauth/type/qq  登录成功了;顺便评论了一条;
  • 2016-12-25 17:43:28 回复
白俊遥博客
  • CI 回复 云淡风晴:那就是“index.php”的问题了
  • 2016-12-25 17:51:23 回复
白俊遥博客

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 回复
  • 本站使用自主开发的laravel-bjyblog开源博客程序搭建 © 2014-2017 baijunyao.com 版权所有 ICP证:豫ICP备14009546号-3
  • 联系邮箱:baijunyao@baijunyao.com