平时一般新建一个html文档时，我都是html:xt生成一个html文档，大概两年前我就这么写了，今天看了老马的视频，发现他能定义生成的内容，此时，我也想自己实现以下，但是，我居然把这个是什么的关键字给忘了，大概花了十分钟，才查出来这叫zen coding，后来改成了emmet，这当初记得好好的，两年不管，啥都不记得了，所以真的是验证了好记性不如烂笔头，更何况我记性还不好，所以写下这篇文章记录以下，哪天忘了还可以拿出来查查
添加自定义的html文档
步骤
sublimeText->Preferences->Package setting->Emmet->Setting -User，打开之后，加入以下代码
{
// 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'>",
"style":"<style></style>",
"js":"<script type='text/javascript'>console.log(1)</script>",
"mydoc": "html>(head>meta[charset='utf-8']+title{${1:文档标题}}+360compat+mycompat+myviewport+mykeywords+mydesc+myfavicon)+body>jq+u",
"canvas": "html>(head>meta[charset='utf-8']+title{${1:文档标题}}+myviewport+mykeywords+mydesc+style)+body>ca+js",
"!!": "!!!+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>",
"ca": "<canvas width='500' height='500' ></canvas>"
}
}
}
}
其中的canvas是我自己新增的，主要加了ca，style，js，最后执行canvas时，生成的代码如下
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<!-- 开启响应式 -->
<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">
<style></style>
</head>
<body>
<canvas width="500" height="500"></canvas>
<script type="text/javascript"></script>
</body>
</html>
另外发现，我想在style中加上*{margin:0;padding:0}和在js中加上console.log(1)是不行的，没去研究了，如果有知道的，还望多多留言
参考文档
https://gist.github.com/zxhfighter/00c1d140249215efd236
https://gist.github.com/zxhfighter/00c1d140249215efd236
网友评论