# Htmlc **Repository Path**: yswang/Htmlc ## Basic Information - **Project Name**: Htmlc - **Description**: Html template compile to html file for Sublime Text3 - **Primary Language**: Python - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 5 - **Forks**: 1 - **Created**: 2015-02-05 - **Last Updated**: 2025-05-16 ## Categories & Tags **Categories**: text-editor **Tags**: None ## README Htmlc(Html Compiler) ==================== # *Html template compile to html file for Sublime Text3* # ## **什么是 Htmlc** ## 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>
> >   
>   <div id="header">
>       <h2>Header</h2>
>   </div> 
> >   <div id="main-container">
>       {% block screen_body %}{% endblock %}
>   </div>
> >   
>   <div id="footer">
>       Copyright © 2015 -- yswang
>   </div> 
> >  </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>
> > 
> <div id="header">
> <h2>Header</h2>
> </div> 
> > <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>
> > 
> <div id="footer">
> Copyright © 2015 -- yswang
> </div> 
> ></body>
></html>
##Thank you