开源软件名称:Htmlc
开源软件地址:https://gitee.com/yswang/Htmlc
开源软件介绍:
Htmlc(Html Compiler)Html template compile to html file for Sublime Text3什么是 HtmlcHtmlc(Html Compiler)是一个在Sublime Text3下使用Python-jinja2模板引擎将编写的Html模板(使用jinja2的模板语法)编译为静态html文件的工具插件。 我什么会开发这个插件?因为 懒 ! 诱因: 之前在开发一个互联网网站的静态html页面,该网站有几十个html页面,每个html页面都是四个部分组成(header/nav, side/menu, footer, main),其中 header/nav,side/menu,footer都是一样的,只有main块是变化的;我当时的做法是:先写好一个html页面,然后Ctrl+C/Ctrl+V下一个页面进行修改,就这样做下去。当全部做好给客户看时,客户说:在头部增加一个导航菜单项,在底部修改下Copyright等,然后我就开始把这几十个页面一个一个修改,直接把我搞的想吐! 然后就想:如果这些静态的html页面能够支持动态的 include header,side,footer就好了,这样我就只需要修改一处,然后重新把这些html页面编译下,就生成了全新的html页面,该多爽啊!O(∩_∩)O想想自己在使用Java开发时一直都在用Apache Velocity模板引擎来生成页面,Velocity支持layout,很方便开发动态页面。但是,我总不能因为要编译输出静态Html页面,而使用Java开发一个应用程序吧,显然很不方便。同时,我又是使用Sublime Text来编写静态Html页面的,Sublime太强大和方便了,在有了开发前一个[Lessc for Sublime Text3](http://git.oschina.net/yswang/lessc) 插件的基础上,自然想到再开发一个插件来达到我通过模板编译输出Html的目的。于是Google Sublime的类似插件,我没有找到(如果谁有更好的,可以告诉我,哈哈) ,接着Google Python的web模板引擎,发现了很多,最终选择了[Jinja2](http://jinja.pocoo.org/)模板引擎;最终通过一天多的开发、测试和整理,我的 Htmlc(Html Compiler)插件就诞生了,其达到的效果完全满足了我目前的需求(说不定以后会有更高的要求呢O(∩_∩)O~)!!! 如何使用?1.下载所有代码(Htmlc、jinja2、markupsafe)-Htmlc依赖jinja2,jinja2需要markupsafe 2.将 Htmlc 文件夹扔到 Sublime Text3安装目录\Data\Packages\ 下: your sublime Text3\Data\Packages\Htmlc
3.将 jinja2 和 markupsafe 文件夹扔到 Sublime Text3的安装根目录下 : your sublime Text3\jinja2 your sublime Text3\markupsafe
说明: Htmlc需要导入jinja2 类库使用:from jinja2 import * ,我在Sublime下测试了如何引入Python第三方库,发现只有将第三方库放到Sublime安装根目录下才能生效(我很想将jinja2和markupsafe放到我的Htmlc目录下,如果有谁知道可以放到插件目录下,很期待你告诉俺!)。 4.开始编写你的 xx.htmlc 文件(我定义了 .htmlc 扩展名,Htmlc只会编译此扩展名的文件)和 layout 文件,当你保存你的 xx.htmlc 文件时,你就会惊讶的发现:Htmlc帮你编译输出了xx.html 文件(包含了layout的布局文件内容)。 注意: layout文件的扩展名随意(比如:.tmpl, .layout等),但不能是.htmlc ,因为layout文件仅仅是用来做layout布局的,不需要单独编译输出为独立的html文件。 5.Htmlc的模板语法请参考 jinja2 的语法说明,同时我也在Htmlc下添加了一个 jinja2-docs.md 的中文翻译语法说明,可以在 sublime text3\Preferences\Package Settings\Htmlc\Jinja2 Template Docs 打开。
特性Htmlc的默认设置和设置项可以从 sublime text3\Preferences\Package Settings\Htmlc\Settings 看到和修改; Htmlc支持 自动编译(即时保存即时编译当前htmlc文件,由auto_compile:true|false 决定)、 手动编译 和 全部编译; 手动编译 和 全部编译 可以通过配置快捷键(sublime text3\Preferences\Package Settings\Htmlc\Key Bindings - Default )进行, 也可以在工具命令:sublime text3\Tools\Htmlc > html\Compile Current htmlc file | Compile All htmlc files 下触发进行。 Htmlc还支持 .sublime-project 项目私有化配置,这样可以为不同的项目进行不同的 Htmlc 的配置。
test.sublime-project 示例配置:
{ "folders":[ { "name": "test", "path":"." } ], "settings": { "htmlc": { "auto_compile": true, "encoding": "UTF-8", "output_dir": "D:\workspace\test\build", "template_dir": "D:\workspace\test\src\htmlc" } } }
以上述test.sublime-project 配置为例: 项目test的htmlc模板目录在D:\workspace\test\src\htmlc 目录下,编译后的html文件输出在 D:\workspace\test\build 目录下。 ##我的测试项目结构和配置 test └ build ├ css ├ images └ js
└ src └ htmlc └ layout └ default.layout └ news ├ news.htmlc └ china └ china.htmlc └ index.htmlc
└ test.sublime-project
当我对test项目进行htmlc全部编译后,在build下生成的目录结构如下: test └ build ├ css ├ images ├ js └ news ├ news.html └ china └ china.html └ index.html
附部分页面的代码default.layout <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title> {% block title %}{% endblock %} - Htmlc</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>
<body>
<!-- header --> <div id="header"> <h2>Header</h2> </div> <!-- /end header -->
<div id="main-container"> {% block screen_body %}{% endblock %} </div>
<!-- footer --> <div id="footer"> Copyright © 2015 -- yswang </div> <!-- /end footer -->
</body> </html>
index.htmlc {% extends "layout/default.layout" %} {% block title %}首页{% endblock %} {% block screen_body %} <div class="w"> <h1>哈哈,欢迎使用 Htmlc for Sublime Text 3 to compile templates to html files</h1> <h2>作者:yswang</h2> </div> {% endblock %}
news.htmlc {% extends "layout/default.layout" %} {% block title %}新闻动态{% endblock %} {% block screen_body %} <h1>这里展示全球最新新闻动态</h1> {% endblock %}
china.htmlc {% extends "layout/default.layout" %} {% block title %}国内新闻动态{% endblock %} {% block screen_body %} <h1>这里展示中国的新闻动态</h1> {% endblock %}
编译后的 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title> 首页 - Htmlc</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>
<body>
<!-- header --> <div id="header"> <h2>Header</h2> </div> <!-- /end header -->
<div id="main-container">
<div class="w"> <h1>哈哈,欢迎使用 Htmlc for Sublime Text 3 to compile templates to html files</h1> <h2>作者:yswang</h2> </div>
</div>
<!-- footer --> <div id="footer"> Copyright © 2015 -- yswang </div> <!-- /end footer -->
</body> </html>
##Thank you |
请发表评论