$belong[layout.vm]
<style>
    .bg-primary{padding: .5em;border-radius: 6px;}
</style>
<section class="container row">
    <div class="col-md-3">
        <div id="sidebar" class="my_sidebar">
            <ul class="nav">
                <li class="sidebar_head_li"><a href="#introduce">简介</a></li>
                <li class="sidebar_head_li"><a href="#install">安装使用</a></li>
                <li class="sidebar_head_li"><a href="#use-freemarker">使用freemarker</a></li>
                <li class="sidebar_head_li"><a href="#mdppt">在线ppt</a></li>
                <li class="sidebar_head_li"><a href="#extend">扩展和issue</a></li>
            </ul>
            $include[ads.html]
        </div>
    </div>

    <div class="page_content col-md-9" role="main">
        <section id="introduce">
            <h2>简介</h2>
            <p>f2e-server 通过中间件的方式支持动态的编译LESS/CoffeeScript/Jade/Markdown等类型代码</p>
            <p>建议了解一下markdown, less, jade等, 这里主要针对这些类型文本进行的编译</p>
        </section>
        
        <section id="install">
            <h2>安装使用 <span class="not-important bg-primary">下载版已经全部安装插件</span></h2>
            <p>在安装目录中使用 <code>$ npm install</code> 命令将package.json中的开发依赖全部安装</p>
            <p>或者分别安装 less、 coffee-script、jade、markdown、freemarker.js</p>
            <p>
                安装完成开启服务器, 在服务器下直接访问指定后缀名资源,将能够获取编译后的结果 <code>查看如下 phone.less </code>
            </p>
            <p><iframe src="http://webfuture.cn/wfQuery/demo/arrangement" frameborder="0" style="width:100%;height:300px;"></iframe></p>
            <p>如果需要对需要编译的源文本进行简单修改(绝大多数场景不需要), 可使用如下配置:</p>
            <pre class="language-javascript"><code>exports["localhost"] = {
    "root": "D:\\doc\\",
    "middleware": {
        get: function(rs){
            return rs.replace(/\&lt;%(.*?)%\&gt;/g,"");
        }
    }
}</code></pre>
        </section>

        <section id="use-freemarker">
            <h2>使用freemarker</h2>
            <p>
                <span class="bg-primary"> 注 </span>:
                在windows下面使用freemarker.js, 除了需要安装Java环境(一般操作系统都自带了1.6以上的jre)以外,
                还需要安装 <a href="http://ant.apache.org/" target="_blank">Apache Ant</a>
            </p>
            <p><img src="images/middleware-ant-download.gif" alt="安装Ant"></p>
            <p>进入下载页面,并下载</p>
            <p><img src="images/middleware-ant-zip.gif" alt="下载Ant"></p>
            <p>因为freemarker.js要求ant安装目录为 <code>c:/ant</code> 需要将下载完成的 zip 文件解压到这个目录</p>
            <p><img src="images/middleware-ant-save.gif" alt="解压Ant"></p>

            <p><span class="bg-primary"> 例 </span>:</p>
            <p><code>app.ftl</code></p>
            <pre class="language-markup"><code>&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Welcome!&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;#-- Greet the user with his/her name --&gt;
  &lt;h1&gt;Welcome ${user!}!&lt;/h1&gt;
  &lt;#include "123.ftl"&gt;
  &lt;p&gt;We have these animals:
  &lt;ul&gt;
  &lt;#list applicants as applicant&gt;
  &lt;li&gt;${applicant.name} (age: ${applicant.age})
    &lt;ul&gt;
      &lt;#list applicant.skills as skill&gt;
      &lt;li&gt;
        - ${skill}
      &lt;/li&gt;  
      &lt;/#list&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/#list&gt;
  &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt; </code></pre>
            <p><code>app.json</code></p>
            <pre class="language-javascript"><code>{
    "applicants":[
      {
        "name": "Jean Test",
        "maidenName": "Jean Test",
        "age": 20,
        "skills": [ "HTML", "CSS" ],
        "testResults": { "a": 10.5, "b": 20, "c": 30 },
        "decided": true
      },
      {
        "name": "José Test",
        "maidenName": null,
        "age": 30,
        "skills": [ "Ruby", "C++", "Cuda" ],
        "testResults": { "a": 20, "b": 30, "c": 40 },
        "decided": false
      }
    ]
}</code></pre>
            <p><code>123.ftl</code></p>
            <pre class="language-markup"><code>&lt;button&gt;include 123&lt;/button&gt;</code></pre>
            <p>输出结果:</p>
            <p><img src="images/middleware-ftl.gif" alt="freemarker welcome you"></p>
        </section>

        <section id="mdppt">
            <h2>在线ppt</h2>
            <p>f2e-server内置<a href="https://github.com/ksky521/nodePPT" target="_blank">nodePPT</a></p>
            <p>支持使用markdown语法书写漂亮的PPT文档</p>
            <p><iframe src="http://webfuture.cn/web-study/ppt" frameborder="0" style="width:100%;height:400px;"></iframe></p>
        </section>

        <section id="extend">
            <h2>扩展和issue</h2>
            <p>f2e-server 内置多种中间件实现 <a href="https://github.com/shy2850/node-server/blob/master/nodeLib/filter/middleware.js" target="_blank">nodeLib/filter/middleware.js</a></p>
            <pre class="language-javascript"><code>register('jade', 'html', function(req, resp, rs, pathname, DEBUG){
    var output = require('jade').render(rs, {pretty: true});
    this.out(output.toString());
});
register('md', 'html', function(req, resp, rs, pathname, DEBUG){
    var output = require('marked')(rs + '');
    this.out(output);
});
register('mdppt', 'html', function(req, resp, rs, pathname, DEBUG){
    var mdppt = require('mdppt');
    mdppt.cfg.base = req.util.staticServer + '/node_modules/mdppt/assets/';
    var output = mdppt(rs + '');
    this.out(output);
});
register('coffee', 'js', function(req, resp, rs, pathname, DEBUG){
    var scriptStr = require("coffee-script").compile( rs );
    this.out(scriptStr);
});
register('less', 'css', function(req, resp, rs, pathname, DEBUG){
    var out = this.out;
    require("less").render(rs, {
        paths: [ pathname.replace(/(\/[^\/]+?)$/,"") ],
        compress: !DEBUG
    }, function (err, output) {
        if (err) { throw err; }
        else{
            out(output.css);
        }
    });
});</code></pre>
            <p>从上面的4个样例中, 可以比较清楚的了解怎么扩展一个中间件</p>
            <p>事实上, 在配置文件中也支持添加middleware</p>
            <pre class="language-javascript"><code>var baseDir = __dirname;
var ssi = require('ssi');   // 请先全局安装 ssi (npm install -g ssi)
var parser = new ssi(baseDir, baseDir, '/**/**/*.shtml');

exports.setup = function (server) {
    var middleware = server.middleware;
    // babel 自动编译jsx因此只需要配置babel就可以了, 这里只需要配置后缀映射
    middleware.register('jsx', 'js');
    // SSI 封装
    middleware.register('shtml', 'html', function(req, resp, rs, pathname, DEBUG){
        return parser.parse(pathname, rs.toString()).contents;
    });
    // 如果需要封装成异步输出模式, 可以使用this.out(resultStr);
    middleware.register('scss', 'css', function(req, resp, rs, pathname, DEBUG){
        var out = this.out;
        require('node-sass').render({
            file: pathname,
            outFile: pathname.replace(/(\.scss)$/,".css"),
            includePaths: [ pathname.replace(/(\/[^\/]+?)$/,"") ],
            outputStyle: (!DEBUG ? "compressed" : "expanded")
        }, function (err, output) {
            if (err) { throw err; }
            else{
                out(output.css.toString());
            }
        });
    });
};</code></pre>
        </section>
</div>
<div class="page_bottom col-md-9 pull-right">
    <a href="agent.html" class="pull-left">上一节: 代理</a>
    <a href="build.html" class="pull-right">下一节: 项目输出</a>
</div>
</section>