1 Star 0 Fork 1

山哥 / Htmlc

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
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.将 jinja2markupsafe 文件夹扔到 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

空文件

简介

Html template compile to html file for Sublime Text3 展开 收起
Python
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
Python
1
https://gitee.com/yswang/Htmlc.git
git@gitee.com:yswang/Htmlc.git
yswang
Htmlc
Htmlc
master

搜索帮助

14c37bed 8189591 565d56ea 8189591