在前端界,作為快速生成代碼的Emmet插件相當給力。最近在學bootstrap，需要頻繁生成html頭文件，我就想着自定義模板。國內只有基礎教程，只好自己讀英文文檔了。
Emmet國內基礎教程地址：
http://www.w3cplus.com/tools/emmet-cheat-sheet.html
http://blog.wpjam.com/m/emmet/
讀了一些發現一個解決方案，原文是自定義emmet模板。
工具欄打開Preferences -> Package Settings -> Emmet -> Setting - Default菜單(我這里是line 101)，這個是參考
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json "snippets": { // "html": { // "abbreviations": { // "example": "<div class='example' title='Custom element example'>" // } // } }
用戶配置文件中修改。我們打開Preferences -> Package Settings -> Emmet -> Setting - User文件，添加如下代碼：
{ // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json "snippets": { "html": { "abbreviations": { "example": "<div class='example' title='Custom element example'>", "mydoc": "html>(head>meta[charset='utf-8']+title{${1:文檔標題}})+body", "!!": "!!!+mydoc[lang='zh-Hans']" } } } }
注：
1.example是快捷鍵，后面是生成的內容
2.引用mydoc的內容 mydoc[lang='zh-Hans']中可以指定語言
自定義模板
可寫入自己需要的css,js文件(庫)
代碼如下:
{ // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json "snippets": { "html": { "snippets": { "myfavicon": "<!-- favicon，可更改圖片類型 -->\n<link rel=\"shortcut icon\" type=\"image/ico\" href=\"/favicon.ico\" />\n", "mycompat": "<!-- 優先使用 IE 最新版本和 Chrome -->\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n", "360compat": "\n<!-- 360 使用Google Chrome Frame -->\n<meta name=\"renderer\" content=\"webkit\">\n", "mykeywords": "<!-- SEO頁面關鍵詞 -->\n<meta name=\"keywords\" content=\"your keywords\">\n", "mydesc": "<!-- SEO頁面描述 -->\n<meta name=\"description\" content=\"your description\">\n", "myviewport": "<!-- 開啟響應式 -->\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n", }, "abbreviations": { "example": "<div class='example' title='Custom element example'>", "mydoc": "html>(head>meta[charset='utf-8']+title{${1:文檔標題}}+360compat+mycompat+myviewport+mykeywords+mydesc+myfavicon)+body>jq+u", "!!": "!!!+mydoc[lang='zh-cmn-Hans']", "$": "<script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.js\"></script>", "jq": "<script src=\"http://libs.baidu.com/jquery/1.9.0/jquery.js\"></script>", "u": "<script src=\"http://libs.baidu.com/underscore/1.3.3/underscore.js\"></script>", "_": "<script src=\"http://libs.baidu.com/underscore/1.3.3/underscore.js\"></script>" } } } }
snippets是指head頭部的片段
addbreviations是body內的片段
在mydoc中引用要使用的片段，最終!!引用mydoc，如果需要多套模板，可按需定制。
生成如下代碼：
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"> <title>文檔標題</title> <!-- 360 使用Google Chrome Frame --> <meta name="renderer" content="webkit"> <!-- 優先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 開啟響應式 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SEO頁面關鍵詞 --> <meta name="keywords" content="your keywords"> <!-- SEO頁面描述 --> <meta name="description" content="your description"> <!-- favicon，可更改圖片類型 --> <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> </head> <body> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://libs.baidu.com/underscore/1.3.3/underscore.js"></script> </body> </html>
下面是本人定制的模板：
{ // Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/snippets.json "snippets": { "html": { "snippets": { "myfavicon": "<!-- favicon，可更改圖片類型 -->\n<link rel=\"shortcut icon\" type=\"image/ico\" href=\"/favicon.ico\" />\n", "bscss3":"<link rel=\"stylesheet\" href=\"http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css\">", "mycompat": "<!-- 優先使用 IE 最新版本和 Chrome -->\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\" />\n", "360compat": "\n<!-- 360 使用Google Chrome Frame -->\n<meta name=\"renderer\" content=\"webkit\">\n", "mykeywords": "<!-- SEO頁面關鍵詞 -->\n<meta name=\"keywords\" content=\"your keywords\">\n", "mydesc": "<!-- SEO頁面描述 -->\n<meta name=\"description\" content=\"your description\">\n", "myviewport": "<!-- 開啟響應式 -->\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n", }, "abbreviations": { "mydoc": "html>(head>meta[charset='utf-8']+title{${1:文檔標題}}+mycompat+myviewport+mykeywords+mydesc+bscss3)+body>bsjq2+bs3", "!!bs": "!!!+mydoc[lang='zh-cmn-Hans']", "bsjq2":"<script src=\"http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js\"></script>", "bs3":"<script src=\"http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js\"></script>" } } } }
生成如下代碼：
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8"> <title>文檔標題</title> <!-- 優先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 開啟響應式 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SEO頁面關鍵詞 --> <meta name="keywords" content="your keywords"> <!-- SEO頁面描述 --> <meta name="description" content="your description"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> </head> <body> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body> </html>
注：
1.插入代碼時，編輯器沒有json一項，我選的XML
2.個人並不喜歡重寫(抄襲)別人的代碼，只是emmet自定義模板我找了好久，不容易，希望給需要的朋友一點幫助。
3.如有其他問題請在下方留言。