Htmlc(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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型