-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
285 lines (171 loc) · 141 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>LeeBolt的博客</title>
<subtitle>用我三生烟火，换你一世迷离.</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="https://cczeng.github.io/"/>
<updated>2021-12-03T08:29:39.714Z</updated>
<id>https://cczeng.github.io/</id>
<author>
<name>LeeBolt</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>zTree表格化组件</title>
<link href="https://cczeng.github.io/2021/12/03/plugin/ztreeTable/"/>
<id>https://cczeng.github.io/2021/12/03/plugin/ztreeTable/</id>
<published>2021-12-03T08:29:39.714Z</published>
<updated>2021-12-03T08:29:39.714Z</updated>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>曾经有一次项目中需要一次性以表格分级方式展示所有后台返回的数据，当然毫无疑问应该直接使用jQuery.treeTable插件了，然而使用后发现却不尽人意，因为当数据量很大时，treeTable初始化表格会花费很多的时间，最后使用了jQuery.zTree插件，把其封装成Table格式，性能方面对比前者有很大提升。<br><a id="more"></a></p><h1 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h1><p>zTree表格化组件jQuery.plugins.zTreeTable-bolt</p><h1 id="组件效果展示"><a href="#组件效果展示" class="headerlink" title="组件效果展示"></a>组件效果展示</h1><p><img src="/img/plugin/zTreeTable.png" alt="zTreeTable效果图"> </p><h1 id="组件使用说明"><a href="#组件使用说明" class="headerlink" title="组件使用说明"></a>组件使用说明</h1><h2 id="使用环境"><a href="#使用环境" class="headerlink" title="使用环境"></a>使用环境</h2><pre><code><link rel="stylesheet" href="../css/common/awesome/css/font-awesome.min.css">(组件有使用此图标)<link rel="stylesheet" href="../css/common/commonBolt.css">(组件公共样式)<link rel="stylesheet" href="../css/common/ztree/zTreeStyle.css">(jQuery.zTree)<link rel="stylesheet" href="../css/plugins/jQuery.plugins.zTreeTable-bolt.css"><script type='text/javascript' src='../js/common/jquery/jquery.min.js'></script><script type='text/javascript' src='../js/common/ztree/jquery.ztree.all.min.js'></script>(jQuery.zTree)<script type='text/javascript' src='../js/plugins/jQuery.plugins.zTreeTable-bolt.js'></script></code></pre><blockquote><p><a href="http://www.treejs.cn/v3/api.php" target="_blank" rel="noopener">ztree官网地址</a></p></blockquote><h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><pre><code><div class="ztreeTable"></div>自定义class="ztreeTable"用于方法调用</code></pre><p>通过JavaScript调用菜单组件:</p><pre><code>$(".ztreeTable").ztreeTableBolt(options,ztreeData);</code></pre><h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><h3 id="1-ztreeData"><a href="#1-ztreeData" class="headerlink" title="1.ztreeData"></a>1.ztreeData</h3><p>可以是制定格式的数据,亦可以是返回指定格式数据的Function,function中返回数据需要ajax请求结束后，可能需要使用同步请求方式(array/function).</p><h4 id="数据格式"><a href="#数据格式" class="headerlink" title="数据格式"></a>数据格式</h4><pre><code>var treeTData=[ { open:true,//默认是否展开,显示子节点 id:"0",//id pId:"1",//父类id selected:true,//默认选中此行，背景高亮 highLight:true,//是否高亮显示此行字体 parameter:{//数据项展示内容，参数名称与options.columns的filed字段值对应匹配 name:"Tomcat Servlet Process", funPara:"/paas/operator/redis/service/node", startTime:"17:33:18 469", gap:"0", eTime:"696", className:"", apiType:"TOMCAT", appNode:"dev_bcm", appName:"dev_bcm", icon:"fa-warning" } }, ...]</code></pre><h3 id="2-options"><a href="#2-options" class="headerlink" title="2.options"></a>2.options</h3><p>options(object)。</p><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">必传</th><th style="text-align:left">默认值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">displayW</td><td style="text-align:center">number</td><td style="text-align:left">false</td><td style="text-align:left">1</td><td style="text-align:left">需要在父级元素下展示表格内容的宽度比,取值 >0&&<=1</td></tr><tr><td style="text-align:center">class</td><td style="text-align:center">string</td><td style="text-align:left">false</td><td style="text-align:left">“”</td><td style="text-align:left">用户可以在父级元素上添加多个class,空格隔离。组件默认提供1.table-click:点击每行数据高亮; 2.table-hover：鼠标悬浮每行数据高亮</td></tr><tr><td style="text-align:center">columns</td><td style="text-align:center">array</td><td style="text-align:left">true</td><td style="text-align:left">[]</td><td style="text-align:left">表格头部信息</td></tr><tr><td style="text-align:center">callback</td><td style="text-align:center">object</td><td style="text-align:left">false</td><td style="text-align:left">{}</td><td style="text-align:left">各种事件后的回调函数</td></tr></tbody></table><h4 id="options-columns"><a href="#options-columns" class="headerlink" title="options.columns"></a>options.columns</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line"> {</span><br><span class="line"> field: 'name',//列数据项字段，用于数据匹配</span><br><span class="line"> title: '名称',//列数据项名称</span><br><span class="line"> align:'left',//列数据项内容对齐方式(left,center,right)</span><br><span class="line"> width:"30%"//列数据项宽度</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> field: 'memory',</span><br><span class="line"> title: '内存使用量（GiB）',</span><br><span class="line"> align:'center',</span><br><span class="line"> width:"20%"</span><br><span class="line"> },</span><br><span class="line"> ...</span><br><span class="line">]</span><br></pre></td></tr></table></figure><h4 id="options-callback"><a href="#options-callback" class="headerlink" title="options.callback"></a>options.callback</h4><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">参数</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">onClick</td><td style="text-align:center">function</td><td style="text-align:left">$this(行元素),param(后台返回的此行数据信息)</td><td style="text-align:left">点击数据行后的回调函数</td></tr><tr><td style="text-align:center">onExpand</td><td style="text-align:center">function</td><td style="text-align:left">$this,param</td><td style="text-align:left">展开数据行后的回调函数</td></tr><tr><td style="text-align:center">onCollapse</td><td style="text-align:center">function</td><td style="text-align:left">$this,param</td><td style="text-align:left">收缩数据行后的回调函数</td></tr></tbody></table><h2 id="对象方法"><a href="#对象方法" class="headerlink" title="对象方法"></a>对象方法</h2><table><thead><tr><th style="text-align:center">方法名称</th><th style="text-align:center">类型</th><th style="text-align:left">返回值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">getSelectedParam</td><td style="text-align:center">function</td><td style="text-align:left">param(ztree行信息以及后台返回的此行数据信息)</td><td style="text-align:left">获取当前选中行的信息</td></tr><tr><td style="text-align:center">getSelectedElem</td><td style="text-align:center">function</td><td style="text-align:left">$this(行元素)</td><td style="text-align:left">获取当前选中的行元素</td></tr></tbody></table><pre><code>var zTreeTableObj=$(".ztreeTable").ztreeTableBolt(options,treeTData);var param=zTreeTableObj.getSelectedParam();var $this=zTreeTableObj.getSelectedElem();</code></pre><h2 id="代码地址"><a href="#代码地址" class="headerlink" title="代码地址"></a>代码地址</h2><blockquote><p><a href="https://github.com/leebolt528/blogic-plugins.git" target="_blank" rel="noopener">https://github.com/leebolt528/blogic-plugins.git</a></p></blockquote>]]></content>
<summary type="html">
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>曾经有一次项目中需要一次性以表格分级方式展示所有后台返回的数据，当然毫无疑问应该直接使用jQuery.treeTable插件了，然而使用后发现却不尽人意，因为当数据量很大时，treeTable初始化表格会花费很多的时间，最后使用了jQuery.zTree插件，把其封装成Table格式，性能方面对比前者有很大提升。<br>
</summary>
<category term="plugin" scheme="https://cczeng.github.io/tags/plugin/"/>
<category term="zTree" scheme="https://cczeng.github.io/tags/zTree/"/>
</entry>
<entry>
<title>raphael编排+活动图组件</title>
<link href="https://cczeng.github.io/2021/12/03/plugin/raphael/"/>
<id>https://cczeng.github.io/2021/12/03/plugin/raphael/</id>
<published>2021-12-03T08:29:39.713Z</published>
<updated>2021-12-03T08:29:39.713Z</updated>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>raphael.js同D3.js一样都是基于SVG画布的。主要使用raphael实现了组件的编排(左侧拖取组件元素使用jquery-ui.min.js中的draggable和droppable)和编排运行后的活动图状态展示(需要编排过成生成的节点位置等信息)。<br><a id="more"></a></p><h1 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h1><p>raphael编排+活动图组件jQuery.plugins.rephael-bolt</p><h1 id="组件效果展示"><a href="#组件效果展示" class="headerlink" title="组件效果展示"></a>组件效果展示</h1><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_raphaelMapping.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><blockquote><p>option.model=null<br>编排生成关系图,包括映射等信息。 </p></blockquote><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_raphaelState.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><blockquote><p>option.model=”state”<br>加入状态事件等信息后的回显活动图。</p></blockquote><blockquote><p><span style="color:red">因为业务性较强,所以是在项目中直接开发的，尽快整理出来一份，不过此文档主要针对option.model=”state”的说明！！！</span></p></blockquote><h1 id="组件使用说明"><a href="#组件使用说明" class="headerlink" title="组件使用说明"></a>组件使用说明</h1><h2 id="使用环境"><a href="#使用环境" class="headerlink" title="使用环境"></a>使用环境</h2><pre><code><link rel="stylesheet" href="../css/common/commonBolt.css">(组件公共样式)<link rel="stylesheet" href="../css/plugins/jQuery.plugins.raphael-bolt.css"><script type='text/javascript' src='../js/common/jquery/jquery.min.js'></script><script type='text/javascript' src='../js/plugins/jQuery.plugins.raphael-bolt.js'></script></code></pre><blockquote><p><a href="http://dmitrybaranovskiy.github.io/raphael/" target="_blank" rel="noopener">raphael官网</a><br><a href="https://www.jianshu.com/p/1acf11dea10e" target="_blank" rel="noopener">raphael基础1</a><br><a href="https://www.jianshu.com/p/1acf11dea10e" target="_blank" rel="noopener">raphael基础2</a><br><a href="https://www.jianshu.com/p/ad139e13bbd0" target="_blank" rel="noopener">raphael文档2</a><br><a href="http://blog.sina.com.cn/s/blog_6f0e8cc10101k1wx.html" target="_blank" rel="noopener">raphael避免入坑点</a></p></blockquote>]]></content>
<summary type="html">
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>raphael.js同D3.js一样都是基于SVG画布的。主要使用raphael实现了组件的编排(左侧拖取组件元素使用jquery-ui.min.js中的draggable和droppable)和编排运行后的活动图状态展示(需要编排过成生成的节点位置等信息)。<br>
</summary>
<category term="plugin" scheme="https://cczeng.github.io/tags/plugin/"/>
<category term="raphael" scheme="https://cczeng.github.io/tags/raphael/"/>
</entry>
<entry>
<title>treeTable扩展异步加载组件</title>
<link href="https://cczeng.github.io/2021/12/03/plugin/treeTable/"/>
<id>https://cczeng.github.io/2021/12/03/plugin/treeTable/</id>
<published>2021-12-03T08:29:39.713Z</published>
<updated>2021-12-03T08:29:39.713Z</updated>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>之前的项目中有一些数据需要使用jQuery.treeTable表格分级展示，但是返回的数据量很大，因此不可以一次性返回所有数据。后续基于jQuery.treeTable插件进行了封装，具体实现为在支持原有同步加载的基础上实现可先异步展示指定部分数据，在点击事件上通过异步加载请求展示需要查看的数据。<br><a id="more"></a></p><h1 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h1><p>treeTable扩展异步加载组件jQuery.plugins.treeTable-bolt</p><h1 id="组件效果展示"><a href="#组件效果展示" class="headerlink" title="组件效果展示"></a>组件效果展示</h1><p><img src="/img/plugin/treeTableError.png" alt="ajax请求异常"><br><span>ajax请求异常</span> </p><p><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_treeTable.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video></p><h1 id="组件使用说明"><a href="#组件使用说明" class="headerlink" title="组件使用说明"></a>组件使用说明</h1><h2 id="使用环境"><a href="#使用环境" class="headerlink" title="使用环境"></a>使用环境</h2><pre><code><link rel="stylesheet" href="../css/common/awesome/css/font-awesome.min.css">(组件加载动画使用此图标)<link rel="stylesheet" href="../css/common/commonBolt.css">(组件公共样式)<link rel="stylesheet" href="../css/common/treetable/jquery.treetable.css">(jQuery.treeTable)<link rel="stylesheet" href="../css/plugins/jQuery.plugins.treeTable-bolt.css"><script type='text/javascript' src='../js/common/jquery/jquery.min.js'></script><script type='text/javascript' src='../js/common/treetable/jquery.treetable.js'></script>(jQuery.treeTable)<script type='text/javascript' src='../js/plugins/jQuery.plugins.treeTable-bolt.js'></script></code></pre><blockquote><p><a href="http://plugins.jquery.com/treetable/" target="_blank" rel="noopener">jQuery 官网链接</a><br><a href="http://ludo.cubicphuse.nl/jquery-treetable/" target="_blank" rel="noopener">API 地址</a><br>treeTable参考文档：<br><a href="http://www.ijquery.cn/?p=1563" target="_blank" rel="noopener">jquery.treetable.js的使用</a> <br><a href="https://www.cnblogs.com/telwanggs/p/7434526.html" target="_blank" rel="noopener">jQuery.treetable使用及异步加载</a></p></blockquote><h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><pre><code><div class="treeTable"></div>自定义class="treeTable"用于方法调用</code></pre><p>通过JavaScript调用菜单组件:</p><pre><code>$(".treeTable").treeTableBolt(options,treeTData);</code></pre><h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><h3 id="1-treeTData"><a href="#1-treeTData" class="headerlink" title="1.treeTData"></a>1.treeTData</h3><p>可以是制定格式的数据,亦可以是返回指定格式数据的Function,function中返回数据需要ajax请求结束后，可能需要使用同步请求方式(array/function).</p><h4 id="数据格式"><a href="#数据格式" class="headerlink" title="数据格式"></a>数据格式</h4><pre><code>var treeTData=[ { "id" : "default",//id "idP" : "",//父类id "selected":true,//默认选中此行，背景高亮 "img" : "",//数据项前展示的小图标 "last" : false,//是否为叶子节点 "synChild" : true,//默认是否展开,显示子节点 "ajax" : "/app/monitor/orchestration/ajax/deployments",//用于请求子节点 "parameterName" : "namespace",//级别分类，表示该数据属于第几级，用于异步请求数据参数使用 "subResourceCount" : "1",//该节点下的子节点数,若场景不需要或获取不到默认返回1 "data" : {//数据项展示内容，参数名称与options.columns的filed字段值对应匹配 "name" : "default", "cpu" : "0.04794590946692686", "memory" : "463245312", "diskReadRate" : "0", "diskWriteRate" : "0", "networkReceive" : "142576.61410056025", "networkTransmit" : "24045.73368741528" } }, ...]</code></pre><blockquote><p>异步请求说明：<br>表格数据项请求子节点数据时，使用以上数据中ajax参数值;<br>请求参数为一个对象,包含节点本身以及所有的父级节点键值对{以上数据中的parameterName字段值：data.name} (基于项目后台需求的,如果不符合你的使用场景可自行修改源码)<br>eg:<br>{pod: “redis-operator-5bbb7f78bf-48j9f”, byname: “redis-operator”, namespace: “default”}</p></blockquote><h3 id="2-options"><a href="#2-options" class="headerlink" title="2.options"></a>2.options</h3><p>options(object)。</p><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">必传</th><th style="text-align:left">默认值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">displayW</td><td style="text-align:center">number</td><td style="text-align:left">false</td><td style="text-align:left">1</td><td style="text-align:left">需要在父级元素下展示表格内容的宽度比,取值 >0&&<=1</td></tr><tr><td style="text-align:center">startUrl</td><td style="text-align:center">string</td><td style="text-align:left">false(async:true时，需要传入ajax)</td><td style="text-align:left">“”</td><td style="text-align:left">初始化表格时，用于请求数据的ajax,需配合async参数使用</td></tr><tr><td style="text-align:center">async</td><td style="text-align:center">boolean</td><td style="text-align:left">false</td><td style="text-align:left">false</td><td style="text-align:left">初始化表格时,async=true,使用startUrl请求数据;async=false,使用treeTData数据.</td></tr><tr><td style="text-align:center">class</td><td style="text-align:center">string</td><td style="text-align:left">false</td><td style="text-align:left">“”</td><td style="text-align:left">用户可以在父级元素上添加多个class,空格隔离。组件默认提供1.table-click:点击每行数据高亮; 2.table-hover：鼠标悬浮每行数据高亮</td></tr><tr><td style="text-align:center">columns</td><td style="text-align:center">array</td><td style="text-align:left">true</td><td style="text-align:left">[]</td><td style="text-align:left">表格头部信息</td></tr><tr><td style="text-align:center">callback</td><td style="text-align:center">object</td><td style="text-align:left">false</td><td style="text-align:left">{}</td><td style="text-align:left">各种事件后的回调函数</td></tr></tbody></table><h4 id="options-columns"><a href="#options-columns" class="headerlink" title="options.columns"></a>options.columns</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line"> {</span><br><span class="line"> field: 'name',//列数据项字段，用于数据匹配</span><br><span class="line"> title: '名称',//列数据项名称</span><br><span class="line"> align:'left',//列数据项内容对齐方式(left,center,right)</span><br><span class="line"> width:"30%"//列数据项宽度</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> field: 'memory',</span><br><span class="line"> title: '内存使用量（GiB）',</span><br><span class="line"> align:'center',</span><br><span class="line"> width:"20%"</span><br><span class="line"> },</span><br><span class="line"> ...</span><br><span class="line">]</span><br></pre></td></tr></table></figure><h4 id="options-callback"><a href="#options-callback" class="headerlink" title="options.callback"></a>options.callback</h4><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">参数</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">onClick</td><td style="text-align:center">function</td><td style="text-align:left">$this(行元素),param(后台返回的此行数据信息)</td><td style="text-align:left">点击数据行后的回调函数</td></tr><tr><td style="text-align:center">onExpand</td><td style="text-align:center">function</td><td style="text-align:left">$this,param</td><td style="text-align:left">展开数据行后的回调函数</td></tr><tr><td style="text-align:center">onCollapse</td><td style="text-align:center">function</td><td style="text-align:left">$this,param</td><td style="text-align:left">收缩数据行后的回调函数</td></tr></tbody></table><h2 id="对象方法"><a href="#对象方法" class="headerlink" title="对象方法"></a>对象方法</h2><table><thead><tr><th style="text-align:center">方法名称</th><th style="text-align:center">类型</th><th style="text-align:left">返回值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">getSelectedParam</td><td style="text-align:center">function</td><td style="text-align:left">param(后台返回的此行数据信息)</td><td style="text-align:left">获取当前选中行的信息</td></tr><tr><td style="text-align:center">getSelectedElem</td><td style="text-align:center">function</td><td style="text-align:left">$this(行元素)</td><td style="text-align:left">获取当前选中的行元素</td></tr></tbody></table><pre><code>var treeTableObj=$(".treeTable").treeTableBolt(options,treeTData);var param=treeTableObj.getSelectedParam();var $this=treeTableObj.getSelectedElem();</code></pre><h2 id="代码地址"><a href="#代码地址" class="headerlink" title="代码地址"></a>代码地址</h2><p>使用代码时需将temvar变量相关局部代码删除，setTimeout方法中的注释代码放开,并且删除setTimeout(静态页面使用setTimeout模拟ajax效果)</p><blockquote><p><a href="https://github.com/leebolt528/blogic-plugins.git" target="_blank" rel="noopener">https://github.com/leebolt528/blogic-plugins.git</a></p></blockquote>]]></content>
<summary type="html">
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>之前的项目中有一些数据需要使用jQuery.treeTable表格分级展示，但是返回的数据量很大，因此不可以一次性返回所有数据。后续基于jQuery.treeTable插件进行了封装，具体实现为在支持原有同步加载的基础上实现可先异步展示指定部分数据，在点击事件上通过异步加载请求展示需要查看的数据。<br>
</summary>
<category term="plugin" scheme="https://cczeng.github.io/tags/plugin/"/>
<category term="treeTable" scheme="https://cczeng.github.io/tags/treeTable/"/>
</entry>
<entry>
<title>右侧滑出模态框组件</title>
<link href="https://cczeng.github.io/2021/12/03/plugin/sideModal/"/>
<id>https://cczeng.github.io/2021/12/03/plugin/sideModal/</id>
<published>2021-12-03T08:29:39.713Z</published>
<updated>2021-12-03T08:29:39.713Z</updated>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>之前项目都是用的bootstrap弹出模态框，UI设计之后模态框都要从右侧滑出，所以这么频繁使用到的东西还时封装一下比较好,一劳永逸嘛，使用和维护都方便。<br><a id="more"></a></p><h1 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h1><p>右侧滑出模态框jQuery.plugins.sideModal-bolt</p><h1 id="组件效果展示"><a href="#组件效果展示" class="headerlink" title="组件效果展示"></a>组件效果展示</h1><p><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_sideModal.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video></p><h1 id="组件使用说明"><a href="#组件使用说明" class="headerlink" title="组件使用说明"></a>组件使用说明</h1><h2 id="使用环境"><a href="#使用环境" class="headerlink" title="使用环境"></a>使用环境</h2><pre><code><link rel="stylesheet" href="../css/common/commonBolt.css">(组件公共样式)<script type='text/javascript' src='../js/common/jquery/jquery.min.js'></script><script type='text/javascript' src='../js/plugins/jQuery.plugins.sideModal-bolt.js'></script></code></pre><h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><blockquote><p>在页面加载开始执行$.sideModalFun(),否则页面首次弹出侧边栏无过渡效果</p></blockquote><p>在点击事件中直接通过JavaScript调用组件:</p><pre><code>$.sideModalFun(options)</code></pre><h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><h3 id="options"><a href="#options" class="headerlink" title="options"></a>options</h3><p>options可不传将使用内置默认(object为空)。</p><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">默认值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">headText</td><td style="text-align:center">string</td><td style="text-align:left">“”</td><td style="text-align:left">头部文本</td></tr><tr><td style="text-align:center">btnSwitch</td><td style="text-align:center">boolean</td><td style="text-align:left">true</td><td style="text-align:left">是否添加按钮</td></tr><tr><td style="text-align:center">classList</td><td style="text-align:center">string</td><td style="text-align:left">“”</td><td style="text-align:left">自定义的class,多个空格分开，默认designer_detail</td></tr><tr><td style="text-align:center">imgPath</td><td style="text-align:center">string</td><td style="text-align:left">“”</td><td style="text-align:left">关闭和加载图标的路径前缀</td></tr><tr><td style="text-align:center">callback</td><td style="text-align:center">object</td><td style="text-align:left">{}</td><td style="text-align:left">各种事件后的回调函数</td></tr></tbody></table><h4 id="options-callback"><a href="#options-callback" class="headerlink" title="options.callback"></a>options.callback</h4><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">参数</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">clickConfirm</td><td style="text-align:center">function</td><td style="text-align:left">$rightModel</td><td style="text-align:left">点击确认按钮后的回调函数</td></tr><tr><td style="text-align:center">clickCancel</td><td style="text-align:center">function</td><td style="text-align:left">$rightModel</td><td style="text-align:left">点击取消，关闭按钮后的回调函数，默认消失</td></tr><tr><td style="text-align:center">clickMask</td><td style="text-align:center">function</td><td style="text-align:left">$rightModel</td><td style="text-align:left">点击阴影后的回调函数，默认消失</td></tr></tbody></table><blockquote><p>$rightModel是返回的右侧模态框。</p></blockquote><h2 id="对象方法"><a href="#对象方法" class="headerlink" title="对象方法"></a>对象方法</h2><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">参数</th><th style="text-align:left">返回值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">showSideModal</td><td style="text-align:center">无</td><td style="text-align:left">无</td><td style="text-align:left">右侧模态框和阴影出现</td></tr><tr><td style="text-align:center">hideSideModal</td><td style="text-align:center">无</td><td style="text-align:left">无</td><td style="text-align:left">右侧模态框和阴影消失</td></tr><tr><td style="text-align:center">addHtml</td><td style="text-align:center">需要添加的文本</td><td style="text-align:left">无</td><td style="text-align:left">添加除头部和底部按钮的内容</td></tr><tr><td style="text-align:center">getPaDom</td><td style="text-align:center">无</td><td style="text-align:left">无</td><td style="text-align:left">获取右侧模态框元素</td></tr></tbody></table><h2 id="代码地址"><a href="#代码地址" class="headerlink" title="代码地址"></a>代码地址</h2><blockquote><p><a href="https://github.com/leebolt528/blogic-plugins.git" target="_blank" rel="noopener">https://github.com/leebolt528/blogic-plugins.git</a></p></blockquote>]]></content>
<summary type="html">
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>之前项目都是用的bootstrap弹出模态框，UI设计之后模态框都要从右侧滑出，所以这么频繁使用到的东西还时封装一下比较好,一劳永逸嘛，使用和维护都方便。<br>
</summary>
<category term="plugin" scheme="https://cczeng.github.io/tags/plugin/"/>
<category term="sideModal" scheme="https://cczeng.github.io/tags/sideModal/"/>
</entry>
<entry>
<title>D3关系图组件</title>
<link href="https://cczeng.github.io/2021/12/03/plugin/relativeD3/"/>
<id>https://cczeng.github.io/2021/12/03/plugin/relativeD3/</id>
<published>2021-12-03T08:29:39.713Z</published>
<updated>2021-12-03T08:29:39.713Z</updated>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>由于关系图的灵活度较高，具体规则需求不一致，一般而言任何库估计也没有封装好的成品。于是我使用了免费并且灵活度很高的D3.js绘制关系图，期间需求一直该改改，但最终确实也没运用到生产环境中去，不过我还是将自己写的这部分总结了一下。<br><a id="more"></a></p><h1 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h1><p>relativeD3组件jQuery.plugins.relativeD3-bolt</p><h1 id="组件效果展示"><a href="#组件效果展示" class="headerlink" title="组件效果展示"></a>组件效果展示</h1><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_relativeD3Line.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><blockquote><p>option.mode=”line”<br>重点展示数据中edges中的status,关系线根据status值不同呈现不同的颜色。</p></blockquote><video id="video1" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_relativeD3Node.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><blockquote><p>option.mode=”node”<br>重点展示数据中nodes中的status,节点边框根据status值不同用faultColor值颜色高亮，并且显示直线此节点的关系线同样显示不可使用。</p></blockquote><h1 id="组件使用说明"><a href="#组件使用说明" class="headerlink" title="组件使用说明"></a>组件使用说明</h1><h2 id="使用环境"><a href="#使用环境" class="headerlink" title="使用环境"></a>使用环境</h2><pre><code><link rel="stylesheet" href="../css/common/commonBolt.css">(组件公共样式)<script type='text/javascript' src='../js/common/jquery/jquery.min.js'></script><script type="text/javascript" src="../js/common/D3/d3.min.js"></script>(d3库)<script type='text/javascript' src='../js/plugins/jQuery.plugins.relativeD3-bolt.js'></script></code></pre><blockquote><p><a href="https://d3js.org/" target="_blank" rel="noopener">D3官网</a><br><a href="http://www.decembercafe.org/" target="_blank" rel="noopener">D3入门</a></p></blockquote><h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><pre><code><div id="canvas"></div>自定义id="canvas"用于方法调用</code></pre><p>通过JavaScript调用菜单组件:</p><pre><code>$.relativeD3(id,d3Data,[options]);</code></pre><h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><h3 id="1-id"><a href="#1-id" class="headerlink" title="1.id"></a>1.id</h3><p>容器id值</p><h3 id="2-d3Data"><a href="#2-d3Data" class="headerlink" title="2.d3Data"></a>2.d3Data</h3><p>可以是制定格式的数据,亦可以是返回指定格式数据的Function,function中返回数据需要ajax请求结束后，可能需要使用同步请求方式(array/function).</p><h4 id="数据格式"><a href="#数据格式" class="headerlink" title="数据格式"></a>数据格式</h4><pre><code>var d3Data={ "nodes": [{ "name": "存量营销(同网)",//节点名称 "image": "../img/plugins/relativeD3/user.png",//节点图片 "key": "11",//节点唯一标识id "status": "1"//节点状态 0:正常;1:不正常，此属性仅在options.mode=="node"下使用 }, { "name": "营销活动接口服务", "image": "../img/plugins/relativeD3/tomcat.png", "key": "22", "status": "1" }, ... ], "edges": [{ "source": "00",//关系线的入口节点,值为节点的key值 "target": "11",//关系线的出口节点 "relation": "17",//关系线上展示的信息 "status": "fast"//关系线的状态"fast","slow","normal",此属性仅在options.mode=="line"下使用 }, ... ]}</code></pre><h3 id="3-options"><a href="#3-options" class="headerlink" title="3.options"></a>3.options</h3><p>options,非必传项(object)。</p><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">必传</th><th style="text-align:left">默认值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">style</td><td style="text-align:center">object</td><td style="text-align:left">false</td><td style="text-align:left"></td><td style="text-align:left">交互过程中的样式颜色</td></tr><tr><td style="text-align:center">blankClear</td><td style="text-align:center">boolean</td><td style="text-align:left">false</td><td style="text-align:left">true</td><td style="text-align:left">点击画布空白处,是否清除选中的节点和关系线效果</td></tr><tr><td style="text-align:center">modalSwitch</td><td style="text-align:center">boolean</td><td style="text-align:left">false</td><td style="text-align:left">false</td><td style="text-align:left">点击节点和线是否出现模态框</td></tr><tr><td style="text-align:center">mode</td><td style="text-align:center">string</td><td style="text-align:left">false</td><td style="text-align:left">“node”</td><td style="text-align:left">共有”line”和”node”两个值,这两种模式下图的展示侧重点不同</td></tr><tr><td style="text-align:center">freedom</td><td style="text-align:center">boolean</td><td style="text-align:left">false</td><td style="text-align:left">false</td><td style="text-align:left">是否允许元素可以出现在可是范围以外</td></tr><tr><td style="text-align:center">callback</td><td style="text-align:center">object</td><td style="text-align:left">false</td><td style="text-align:left">{}</td><td style="text-align:left">各种事件后的回调函数</td></tr></tbody></table><h4 id="options-style"><a href="#options-style" class="headerlink" title="options.style"></a>options.style</h4><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">必传</th><th style="text-align:left">默认值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">lineColorNor</td><td style="text-align:center">string</td><td style="text-align:left">false</td><td style="text-align:left">“#A9A9A9”</td><td style="text-align:left">edges.status==”normal”的线颜色(options.mode==”line”);关系线颜色(options.mode==”node”)</td></tr><tr><td style="text-align:center">lineColorSlow</td><td style="text-align:center">string</td><td style="text-align:left">false</td><td style="text-align:left">“#CC0000”</td><td style="text-align:left">edges.status==”slow”的线颜色(options.mode==”line”)</td></tr><tr><td style="text-align:center">lineColorFast</td><td style="text-align:center">string</td><td style="text-align:left">false</td><td style="text-align:left">“#228B22”</td><td style="text-align:left">edges.status==”fast”的线颜色(options.mode==”line”)</td></tr><tr><td style="text-align:center">highLColor</td><td style="text-align:center">string</td><td style="text-align:left">false</td><td style="text-align:left">“#0099CC”</td><td style="text-align:left">点击悬浮高亮颜色</td></tr><tr><td style="text-align:center">textColor</td><td style="text-align:center">string</td><td style="text-align:left">false</td><td style="text-align:left">“#696969”</td><td style="text-align:left">文本颜色</td></tr><tr><td style="text-align:center">fillColor</td><td style="text-align:center">string</td><td style="text-align:left">false</td><td style="text-align:left">“#ccc”</td><td style="text-align:left">节点背景色</td></tr><tr><td style="text-align:center">faultColor</td><td style="text-align:center">string</td><td style="text-align:left">false</td><td style="text-align:left">“#CC0000”</td><td style="text-align:left">问题节点node.status=1标识颜色(options.mode==”node”)</td></tr><tr><td style="text-align:center">strokeW</td><td style="text-align:center">number</td><td style="text-align:left">false</td><td style="text-align:left">0</td><td style="text-align:left">节点边框宽度</td></tr></tbody></table><h4 id="options-callback"><a href="#options-callback" class="headerlink" title="options.callback"></a>options.callback</h4><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">参数</th><th style="text-align:left">返回值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">onClickNode</td><td style="text-align:center">function</td><td style="text-align:left">node(当前点击的节点对象)</td><td style="text-align:left">需要在弹出模态框中添加的html</td><td style="text-align:left">点击节点后的回调函数</td></tr><tr><td style="text-align:center">onClickEdge</td><td style="text-align:center">function</td><td style="text-align:left">edge</td><td style="text-align:left">需要在弹出模态框中添加的html</td><td style="text-align:left">点击关系线后的回调函数</td></tr><tr><td style="text-align:center">onClickCanvas</td><td style="text-align:center">function</td><td style="text-align:left">无</td><td style="text-align:left">无</td><td style="text-align:left">点击空白画布后的回调函数</td></tr></tbody></table><h2 id="代码地址"><a href="#代码地址" class="headerlink" title="代码地址"></a>代码地址</h2><blockquote><p><a href="https://github.com/leebolt528/blogic-plugins.git" target="_blank" rel="noopener">https://github.com/leebolt528/blogic-plugins.git</a></p></blockquote>]]></content>
<summary type="html">
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>由于关系图的灵活度较高，具体规则需求不一致，一般而言任何库估计也没有封装好的成品。于是我使用了免费并且灵活度很高的D3.js绘制关系图，期间需求一直该改改，但最终确实也没运用到生产环境中去，不过我还是将自己写的这部分总结了一下。<br>
</summary>
<category term="plugin" scheme="https://cczeng.github.io/tags/plugin/"/>
<category term="D3" scheme="https://cczeng.github.io/tags/D3/"/>
</entry>
<entry>
<title>左侧三级导航菜单组件</title>
<link href="https://cczeng.github.io/2021/12/03/plugin/menuLeft/"/>
<id>https://cczeng.github.io/2021/12/03/plugin/menuLeft/</id>
<published>2021-12-03T08:29:39.712Z</published>
<updated>2021-12-03T08:29:39.712Z</updated>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>之前的项目中自己也封装了一些比较实用的小组件,一直想整理来着就这样拖到了来年。我终于不能忍自己啦，虽然最近项目上不算轻松，但我还是毅然决然地开始了“蓄谋已久”的事情来告别拖延。然而却发现之前的代码写的是多么潦草和随意，简直不忍直视，就这样接下来也花费了远比我预估多多的时间。<br><a id="more"></a></p><h1 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h1><p>左侧三级菜单jQuery.plugins.menuLeft-bolt</p><h1 id="组件效果展示"><a href="#组件效果展示" class="headerlink" title="组件效果展示"></a>组件效果展示</h1><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_menuLeft.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><h1 id="组件使用说明"><a href="#组件使用说明" class="headerlink" title="组件使用说明"></a>组件使用说明</h1><h2 id="使用环境"><a href="#使用环境" class="headerlink" title="使用环境"></a>使用环境</h2><pre><code><link rel="stylesheet" href="../css/common/awesome/css/font-awesome.min.css">(组件中有使用此图标)<link rel="stylesheet" href="../css/common/commonBolt.css">(组件公共样式)<link rel="stylesheet" href="../css/plugins/jQuery.plugins.menuLeft-bolt.css"><script type='text/javascript' src='../js/common/jquery/jquery.min.js'></script><script type='text/javascript' src='../js/plugins/jQuery.plugins.menuLeft-bolt.js'></script></code></pre><h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><pre><code><div class="menuLeft"></div>自定义class="menuLeft"用于方法调用</code></pre><p>通过JavaScript调用菜单组件:</p><pre><code>$(".menuLeft").menuLeftBolt([options],menuLeftData);</code></pre><h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><h3 id="1-menuLeftData"><a href="#1-menuLeftData" class="headerlink" title="1.menuLeftData"></a>1.menuLeftData</h3><p>可以是制定格式的数据,亦可以是返回指定格式数据的Function,function中返回数据需要ajax请求结束后，可能需要使用同步请求方式(array/function).</p><h4 id="数据格式"><a href="#数据格式" class="headerlink" title="数据格式"></a>数据格式</h4><pre><code>var menuLeftData=[ {"id":"1","name":"时间选择","fa":"fa-home","href":"selectTime.html","children":[]}, {"id":"2","name":"规则链库","fa":"fa-link","href":"#","children":[ {"id":"2-1","name":"规则链库1","fa":"fa-home","href":"#","children":[]}, {"id":"2-2","name":"规则链库2","fa":"fa-home","href":"#","children":[]}, ... ]}, {"id":"3","name":"设备管理","fa":"fa-link","href":"#","children":[ {"id":"3-1","name":"设备管理1","fa":"fa-home","href":"#","children":[ {"id":"3-1-1","name":"设备管理1-1","fa":"fa-home","href":"#","children":[]}, ... ]}, {"id":"3-2","name":"设备管理2","fa":"fa-home","href":"#","children":[]}, {"id":"3-3","name":"设备管理3","fa":"fa-home","href":"#","children":[]}, {"id":"3-4","name":"设备管理4","fa":"fa-home","href":"#","children":[]}, ... ]}, ...]</code></pre><table><thead><tr><th style="text-align:center">参数</th><th style="text-align:center">类型</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">id</td><td style="text-align:center">string</td><td style="text-align:left">每项菜单项的唯一标识</td></tr><tr><td style="text-align:center">name</td><td style="text-align:center">string</td><td style="text-align:left">菜单项的名称</td></tr><tr><td style="text-align:center">fa</td><td style="text-align:center">string</td><td style="text-align:left">菜单项名称前显示的awesome图标</td></tr><tr><td style="text-align:center">href</td><td style="text-align:center">string</td><td style="text-align:left">点击后需要跳转的对应页面</td></tr><tr><td style="text-align:center">children</td><td style="text-align:center">array</td><td style="text-align:left">该菜单下的子菜单</td></tr></tbody></table><h3 id="2-options"><a href="#2-options" class="headerlink" title="2.options"></a>2.options</h3><p>options可不传将使用内置默认(object)。</p><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">默认值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">selected</td><td style="text-align:center">string</td><td style="text-align:left">“null”</td><td style="text-align:left">表示当前所在页,用于左侧菜单高亮,值为菜单项数据标识ID值</td></tr><tr><td style="text-align:center">menuOpen</td><td style="text-align:center">boolean</td><td style="text-align:left">true</td><td style="text-align:left">菜单初始化是否展开</td></tr><tr><td style="text-align:center">hideFloat</td><td style="text-align:center">boolean</td><td style="text-align:left">true</td><td style="text-align:left">点击向右浮出的菜单项,悬浮的菜单框是否消失</td></tr><tr><td style="text-align:center">callback</td><td style="text-align:center">object</td><td style="text-align:left">{}</td><td style="text-align:left">各种事件后的回调函数</td></tr></tbody></table><h4 id="options-callback"><a href="#options-callback" class="headerlink" title="options.callback"></a>options.callback</h4><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">参数</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">onExpand</td><td style="text-align:center">function</td><td style="text-align:left">无</td><td style="text-align:left">点击菜单向右展开后的回调函数</td></tr><tr><td style="text-align:center">onCollapse</td><td style="text-align:center">function</td><td style="text-align:left">无</td><td style="text-align:left">点击菜单向左收缩后的回调函数</td></tr></tbody></table><h2 id="代码地址"><a href="#代码地址" class="headerlink" title="代码地址"></a>代码地址</h2><blockquote><p><a href="https://github.com/leebolt528/blogic-plugins.git" target="_blank" rel="noopener">https://github.com/leebolt528/blogic-plugins.git</a></p></blockquote>]]></content>
<summary type="html">
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>之前的项目中自己也封装了一些比较实用的小组件,一直想整理来着就这样拖到了来年。我终于不能忍自己啦，虽然最近项目上不算轻松，但我还是毅然决然地开始了“蓄谋已久”的事情来告别拖延。然而却发现之前的代码写的是多么潦草和随意，简直不忍直视，就这样接下来也花费了远比我预估多多的时间。<br>
</summary>
<category term="menu" scheme="https://cczeng.github.io/tags/menu/"/>
<category term="plugin" scheme="https://cczeng.github.io/tags/plugin/"/>
</entry>
<entry>
<title>左侧三级导航菜单组件（升级版本）</title>
<link href="https://cczeng.github.io/2021/12/03/plugin/menuLeftNew/"/>
<id>https://cczeng.github.io/2021/12/03/plugin/menuLeftNew/</id>
<published>2021-12-03T08:29:39.712Z</published>
<updated>2021-12-03T08:29:39.712Z</updated>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>前段时间项目重构，于是我之前封装的左侧三级菜单派上了用场。由于前端页面有UI的设计，样式方面做了改动；在使用中功能上肯定也避免不了一定的升级优化。<br><a id="more"></a></p><h1 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h1><p>左侧三级菜单jQuery.plugins.menuLeft-boltNew</p><h1 id="组件效果展示"><a href="#组件效果展示" class="headerlink" title="组件效果展示"></a>组件效果展示</h1><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_menuLeftShrink0.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><blockquote><p>option.shrink=0<br>页面的独立框架使用的菜单模式。 </p></blockquote><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_menuLeftShrink1.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><blockquote><p>option.mode=1<br>页面的集成框架使用的菜单模式。</p></blockquote><h1 id="组件使用说明"><a href="#组件使用说明" class="headerlink" title="组件使用说明"></a>组件使用说明</h1><h2 id="使用环境"><a href="#使用环境" class="headerlink" title="使用环境"></a>使用环境</h2><pre><code><link rel="stylesheet" href="../css/common/commonBolt.css">(组件公共样式)<link rel="stylesheet" href="../css/plugins/jQuery.plugins.menuLeft-boltNew.css"><script type='text/javascript' src='../js/common/jquery/jquery.min.js'></script><script type='text/javascript' src='../js/plugins/jQuery.plugins.menuLeft-boltNew.js'></script></code></pre><blockquote><p>去除font-awesome.min.css的引用，在数据项中使用class引入图片</p></blockquote><h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><pre><code><div class="menuLeft"></div>自定义class="menuLeft"用于方法调用</code></pre><p>通过JavaScript调用菜单组件:</p><pre><code>$(".menuLeft").menuLeftBolt([options],menuLeftData);</code></pre><h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><h3 id="1-menuLeftData"><a href="#1-menuLeftData" class="headerlink" title="1.menuLeftData"></a>1.menuLeftData</h3><p>可以是制定格式的数据,亦可以是返回指定格式数据的Function,function中返回数据需要ajax请求结束后，可能需要使用同步请求方式(array/function).</p><h4 id="数据格式"><a href="#数据格式" class="headerlink" title="数据格式"></a>数据格式</h4><pre><code>var menuLeftData=[ {"name":"时间选择","class":"menu-log-search","href":"selectTime.html","secUrl":""}, {"name":"raphael编排","class":"menu-log-data","children":[ {"name":"二级菜单1","href":"index.html","secUrl":""}, {"name":"二级菜单2","children":[ {"name":"三级菜单1","href":"index.html","secUrl":""}, {"name":"三级菜单2","href":"index.html","secUrl":""}, ... ]}, ... ]},]</code></pre><table><thead><tr><th style="text-align:center">参数</th><th style="text-align:center">类型</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">name</td><td style="text-align:center">string</td><td style="text-align:left">菜单项的名称</td></tr><tr><td style="text-align:center">class</td><td style="text-align:center">string</td><td style="text-align:left">菜单项名称前显示的图标,在css文件中定义图片引用</td></tr><tr><td style="text-align:center">secUrl</td><td style="text-align:center">string</td><td style="text-align:left">secUrl.length>0时，项目需要在可点击的菜单项外层包裹的sec标签控制权限，<sec:authorize url=secUrl></sec:authorize></td></tr><tr><td style="text-align:center">param</td><td style="text-align:center">string</td><td style="text-align:left">绑定的对象参数，可以在回调函数的点击事件中获取使用</td></tr><tr><td style="text-align:center">children</td><td style="text-align:center">array</td><td style="text-align:left">该菜单下的子菜单</td></tr></tbody></table><blockquote><p>去除参数”fa”,”id”<br>新增参数”class”,”secUrl”,”param”</p></blockquote><h3 id="2-options"><a href="#2-options" class="headerlink" title="2.options"></a>2.options</h3><p>options可不传将使用内置默认(object)。</p><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">默认值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">menuOpen</td><td style="text-align:center">boolean</td><td style="text-align:left">true</td><td style="text-align:left">菜单初始化是否展开</td></tr><tr><td style="text-align:center">hideFloat</td><td style="text-align:center">boolean</td><td style="text-align:left">true</td><td style="text-align:left">点击向右浮出的菜单项,悬浮的菜单框是否消失</td></tr><tr><td style="text-align:center">shrink</td><td style="text-align:center">number</td><td style="text-align:left">0</td><td style="text-align:left">分别为三种模式：0-独立框架伸缩菜单 1-集成框架伸缩菜单 2-独立框架无伸缩菜单</td></tr><tr><td style="text-align:center">title</td><td style="text-align:center">object</td><td style="text-align:left">{}</td><td style="text-align:left">导航头部信息</td></tr><tr><td style="text-align:center">callback</td><td style="text-align:center">object</td><td style="text-align:left">{}</td><td style="text-align:left">各种事件后的回调函数</td></tr></tbody></table><blockquote><p>去除”selected” 使用数据项href进行高亮显示<br>新增参数”shrink”,”title”</p></blockquote><p>options.title。</p><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">默认值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">enabled</td><td style="text-align:center">boolean</td><td style="text-align:left">true</td><td style="text-align:left">是否显示头部信息</td></tr><tr><td style="text-align:center">class</td><td style="text-align:center">string</td><td style="text-align:left">“”</td><td style="text-align:left">头部图标</td></tr><tr><td style="text-align:center">content</td><td style="text-align:center">string</td><td style="text-align:left">“”</td><td style="text-align:left">头部标题</td></tr></tbody></table><h4 id="options-callback"><a href="#options-callback" class="headerlink" title="options.callback"></a>options.callback</h4><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">参数</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">onClick</td><td style="text-align:center">function</td><td style="text-align:left">$this,param</td><td style="text-align:left">点击选中菜单后的回调函数。$this:当前点击的元素;param:数据里传入的param对象,用于获取跳转页面需要的信息</td></tr><tr><td style="text-align:center">onExpand</td><td style="text-align:center">function</td><td style="text-align:left">shrink</td><td style="text-align:left">点击展开菜单后的回调函数。shrink:options.shrink值,用于页面布局调整</td></tr><tr><td style="text-align:center">onCollapse</td><td style="text-align:center">function</td><td style="text-align:left">shrink</td><td style="text-align:left">点击收起菜单后的回调函数。shrink:options.shrink值,用于页面布局调整</td></tr></tbody></table><blockquote><p>增加onClick回调，onExpand和onCollapse添加返回参数。</p></blockquote><h2 id="对象方法"><a href="#对象方法" class="headerlink" title="对象方法"></a>对象方法</h2><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">参数</th><th style="text-align:left">返回值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">updateTitle</td><td style="text-align:center">options.title</td><td style="text-align:left">无</td><td style="text-align:left">用于修改头部标题</td></tr><tr><td style="text-align:center">onClick</td><td style="text-align:center">function($this,param){}</td><td style="text-align:left">无</td><td style="text-align:left">options.callback.onClick</td></tr><tr><td style="text-align:center">onExpand</td><td style="text-align:center">function(shrink){}</td><td style="text-align:left">无</td><td style="text-align:left">options.callback.onExpand</td></tr><tr><td style="text-align:center">onExpand</td><td style="text-align:center">function(shrink){}</td><td style="text-align:left">无</td><td style="text-align:left">options.callback.onExpand</td></tr></tbody></table><blockquote><p>新增onClick onExpand和onExpand对象方法 相当与扩展menuLeft回调函数可以通过对象引用，内部与callBack合并函数一起执行,执行顺序在callBack之后。</p></blockquote><h2 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h2><blockquote><p>1:内部使用cookie记录options.menuOpen并且展示<br>2：jQuery.plugins.menuLeft-boltNew.css中的.blogic-content(自定义)<br> $(“.blogic-content”)为和menuLeft平级的右侧容器<br> 如果$(“.blogic-content”)使用定位来适应左侧菜单的收缩,则此css将会生效，不需要使用外部回调函数处理</p></blockquote><h2 id="代码地址"><a href="#代码地址" class="headerlink" title="代码地址"></a>代码地址</h2><blockquote><p><a href="https://github.com/leebolt528/blogic-plugins.git" target="_blank" rel="noopener">https://github.com/leebolt528/blogic-plugins.git</a></p></blockquote>]]></content>
<summary type="html">
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>前段时间项目重构，于是我之前封装的左侧三级菜单派上了用场。由于前端页面有UI的设计，样式方面做了改动；在使用中功能上肯定也避免不了一定的升级优化。<br>
</summary>
<category term="menu" scheme="https://cczeng.github.io/tags/menu/"/>
<category term="plugin" scheme="https://cczeng.github.io/tags/plugin/"/>
</entry>
<entry>
<title>input输入字段级联提示</title>
<link href="https://cczeng.github.io/2021/12/03/plugin/promptExpre/"/>
<id>https://cczeng.github.io/2021/12/03/plugin/promptExpre/</id>
<published>2021-12-03T08:29:39.712Z</published>
<updated>2021-12-03T08:29:39.712Z</updated>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>在外支援部门邻居项目组做搜索引擎那块时有一个这样的需求，一个input输入框，输入内容格式为 “字段 运算符 值 连接符 字段 …”.运算符的提示值由前面选择的字段决定，值的提示值由前面的字段+运算符决定，连接符后匹配规则重新开始,当然每个字段也可以手动输入，如果值需要手动输入日期格式时，时间应该使用双引号””包含。<br><a id="more"></a></p><h1 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h1><p>promptExpre组件jS.plugins.promptExpre-bolt.js</p><h1 id="组件效果展示"><a href="#组件效果展示" class="headerlink" title="组件效果展示"></a>组件效果展示</h1><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_promptExpre.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><h1 id="组件使用说明"><a href="#组件使用说明" class="headerlink" title="组件使用说明"></a>组件使用说明</h1><h2 id="使用环境"><a href="#使用环境" class="headerlink" title="使用环境"></a>使用环境</h2><pre><code><link rel="stylesheet" href="../css/common/commonBolt.css">(组件公共样式)<link rel="stylesheet" href="../css/plugins/jS.plugins.promptExpre-bolt.css"><script type='text/javascript' src='../js/common/jquery/jquery.min.js'></script><script type='text/javascript' src='../js/plugins/jS.plugins.promptExpre-bolt.js'></scrip<script type='text/javascript' src='../js/plugins/jQuery.plugins.relativeD3-bolt.js'></script></code></pre><h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><pre><code><div class="autoInput"></div>自定义class="autoInput"用于方法调用</code></pre><p>通过JavaScript调用菜单组件:</p><pre><code>$(".autoInput").promptExpre([options],promptExpreData);</code></pre><h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><h3 id="1-promptExpreData"><a href="#1-promptExpreData" class="headerlink" title="1.promptExpreData"></a>1.promptExpreData</h3><p>可以是制定格式的数据,亦可以是返回指定格式数据的Function,function中返回数据需要ajax请求结束后，可能需要使用同步请求方式(array/function).</p><h4 id="数据格式"><a href="#数据格式" class="headerlink" title="数据格式"></a>数据格式</h4><pre><code>var promptExpreData = {"field": [ //字段值 "fl_article_from", "fl_board_name", "fl_content", "fl_fetch_time"],"fieldop": {//对应字段值后的运算符 "fl_article_from": [ "=", "!=", "is" ], "fl_content": [ "=", "!=", ">", ">=", "<", "<=", "is" ], ...},"valuemap": {//字段+运算符后的值 "fl_article_from#=": "contentop1", "fl_article_from#!=": "contentop2"， ...},"values": { "contentop1": { "type": "value",//使用下面的data值 "data": [ "新华网", ... ] }, "contentop2": { "type": "http",//使用以下data请求ajax数据(请求后台路径为data+输入框中刚输入的运算符) "data":"ajax请求路径" }, ...}</code></pre><p>}</p><h3 id="2-options"><a href="#2-options" class="headerlink" title="2.options"></a>2.options</h3><p>options,非必传项(object)。</p><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">必传</th><th style="text-align:left">默认值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">callback</td><td style="text-align:center">object</td><td style="text-align:left">false</td><td style="text-align:left">{}</td><td style="text-align:left">各种事件后的回调函数</td></tr></tbody></table><h4 id="options-callback"><a href="#options-callback" class="headerlink" title="options.callback"></a>options.callback</h4><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">参数</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">onClickSearch</td><td style="text-align:center">function</td><td style="text-align:left">value(当前搜索框的值)</td><td style="text-align:left">点击搜索后回调函数</td></tr><tr><td style="text-align:center">onClickClear</td><td style="text-align:center">function</td><td style="text-align:left">无</td><td style="text-align:left">点击清空按钮后回调函数</td></tr></tbody></table><h2 id="对象方法"><a href="#对象方法" class="headerlink" title="对象方法"></a>对象方法</h2><table><thead><tr><th style="text-align:center">方法名称</th><th style="text-align:center">类型</th><th style="text-align:left">返回值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">getInputValue</td><td style="text-align:center">function</td><td style="text-align:left">value</td><td style="text-align:left">获取当前搜索框的值</td></tr></tbody></table><pre><code>var promptExpreObj=$(".autoInput").promptExpre(options,promptExpreData);var value=promptExpreObj.getInputValue();</code></pre><h2 id="代码地址"><a href="#代码地址" class="headerlink" title="代码地址"></a>代码地址</h2><blockquote><p><a href="https://github.com/leebolt528/blogic-plugins.git" target="_blank" rel="noopener">https://github.com/leebolt528/blogic-plugins.git</a></p></blockquote>]]></content>
<summary type="html">
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>在外支援部门邻居项目组做搜索引擎那块时有一个这样的需求，一个input输入框，输入内容格式为 “字段 运算符 值 连接符 字段 …”.运算符的提示值由前面选择的字段决定，值的提示值由前面的字段+运算符决定，连接符后匹配规则重新开始,当然每个字段也可以手动输入，如果值需要手动输入日期格式时，时间应该使用双引号””包含。<br>
</summary>
<category term="plugin" scheme="https://cczeng.github.io/tags/plugin/"/>
<category term="promptExpre" scheme="https://cczeng.github.io/tags/promptExpre/"/>
</entry>
<entry>
<title>gulp项目使用讲解</title>
<link href="https://cczeng.github.io/2021/12/03/gulp/gulp%E9%A1%B9%E7%9B%AE%E4%BD%BF%E7%94%A8%E8%AE%B2%E8%A7%A3/"/>
<id>https://cczeng.github.io/2021/12/03/gulp/gulp项目使用讲解/</id>
<published>2021-12-03T08:29:39.711Z</published>
<updated>2021-12-03T08:29:39.711Z</updated>
<content type="html"><![CDATA[<p><iframe frameborder="no" marginwidth="0" marginheight="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&id=32009001&auto=1&height=66"></iframe><br><span>see you again</span></p><h1 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h1><p>在工作中经常会有对静态资源合并和压缩的操作。<a href="https://www.gulpjs.com.cn/" target="_blank" rel="noopener">gulp</a>是基于Nodejs在前端开发过程中对代码进行构建的工具，是自动化项目的构建利器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。<br><a id="more"></a></p><h1 id="正文"><a href="#正文" class="headerlink" title="正文"></a>正文</h1><h2 id="安装node-js"><a href="#安装node-js" class="headerlink" title="安装node.js"></a>安装node.js</h2><p>由于gulp使用基于node，所以首先要安装<a href="https://nodejs.org/en/" target="_blank" rel="noopener">node环境</a>。</p><h2 id="安装Gulp环境"><a href="#安装Gulp环境" class="headerlink" title="安装Gulp环境"></a>安装Gulp环境</h2><pre><code>$ npm install gulp -g</code></pre><h2 id="项目中使用Glup"><a href="#项目中使用Glup" class="headerlink" title="项目中使用Glup"></a>项目中使用Glup</h2><ol><li>在项目根目录下写命令行 初始化：<code>npm init</code> , 此时根目录会出现package.json.</li><li><p>进入项目的适当位置（一般为根本目录或前端代码的最上层），运行安装本地Gulp环境，运行命令：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install gulp --save-dev</span><br></pre></td></tr></table></figure></li><li><p>安装css,js压缩的环境，运行命令：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$ npm install gulp-uglify --save-dev #局部安装gulp-uglify(压缩JavaScript)</span><br><span class="line">$ npm install gulp-clean-css --save-dev #局部安装gulp-clean-css(压缩css,或使用gulp-minify-css)</span><br><span class="line">$ npm install gulp-concat --save-dev #局部安装gulp-concat(合并文件)</span><br><span class="line">$ npm install gulp-rename --save-dev #局部安装gulp-rename(重命名)</span><br><span class="line">$ npm install del --save-del #局部安装del(文件删除)</span><br><span class="line">$ npm install gulp-uncss --save-dev #局部安装gulp-uncs(删除css冗余代码)</span><br></pre></td></tr></table></figure></li><li><p>package.json 同级目录创建gulpfile.js,配置信息如下：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line">var gulp = require('gulp'),</span><br><span class="line"> uglify = require('gulp-uglify'),</span><br><span class="line"> cleancss = require('gulp-clean-css'),</span><br><span class="line"> rename = require('gulp-rename'),</span><br><span class="line"> del = require('del'),</span><br><span class="line"> concat = require('gulp-concat'),</span><br><span class="line"> uncss = require('gulp-uncss');</span><br><span class="line">#合并压缩js</span><br><span class="line">gulp.task('jsmin', ["clean"],function () {</span><br><span class="line"> gulp.src(['WebContent/js/search/*.js']) #多个文件以数组形式传入</span><br><span class="line"> .pipe(concat('search.js')) #把search下的js合并为search.js</span><br><span class="line"> .pipe(gulp.dest('WebContentSrc/js')) #把合并后的search.js输出到WebContentSrc下</span><br><span class="line"> .pipe(uglify()) #压缩search.js</span><br><span class="line"> .pipe(rename({suffix: '.min'})) #压缩文件命名search.min.js</span><br><span class="line"> .pipe(gulp.dest('WebContentSrc/js')); #把压缩文件search.min.js输出到WebContentSrc下</span><br><span class="line">});</span><br><span class="line">#单个压缩css</span><br><span class="line">gulp.task('cssmin',["clean"], function () {</span><br><span class="line"> gulp.src(['WebContent/css/**/*.css'])</span><br><span class="line"> .pipe(gulp.dest('WebContentSrc/css')) </span><br><span class="line"> .pipe(rename({suffix: '.min'})) </span><br><span class="line"> .pipe(cleancss())</span><br><span class="line"> .pipe(gulp.dest('WebContentSrc/css'));</span><br><span class="line">});</span><br><span class="line">#删除冗余css代码</span><br><span class="line">gulp.task('uncssout', function() {</span><br><span class="line"> gulp.src(['WebContent/css/**/*.css']) </span><br><span class="line"> .pipe(uncss({</span><br><span class="line"> #使用css的html页面，可多个</span><br><span class="line"> html: ['WebContent/views/*.html','WebContent/views/**/*.html','WebContent/views/**/**/*.html']</span><br><span class="line"> }))</span><br><span class="line"> #输出目录</span><br><span class="line"> .pipe(gulp.dest('WebContent/css'));</span><br><span class="line">});</span><br><span class="line">#执行压缩前，先删除以前压缩的文件</span><br><span class="line">gulp.task('clean', function() {</span><br><span class="line"> return del(['WebContentSrc/css', 'WebContentSrc/js'])</span><br><span class="line">});</span><br><span class="line">#默认任务</span><br><span class="line">gulp.task('default', function(){</span><br><span class="line"> gulp.run('uncssout','jsmin', 'cssmin');</span><br><span class="line">});</span><br></pre></td></tr></table></figure></li><li><p>直接运行gulp命令。</p></li></ol><p><img src="/img/gulp/gulp.png" alt="gulp命令项目目录"></p>]]></content>
<summary type="html">
<p><iframe frameborder="no" marginwidth="0" marginheight="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&id=32009001&auto=1&height=66"></iframe><br><span>see you again</span></p>
<h1 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h1><p>在工作中经常会有对静态资源合并和压缩的操作。<a href="https://www.gulpjs.com.cn/" target="_blank" rel="noopener">gulp</a>是基于Nodejs在前端开发过程中对代码进行构建的工具，是自动化项目的构建利器，她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。<br>
</summary>
<category term="tools" scheme="https://cczeng.github.io/tags/tools/"/>
<category term="gulp" scheme="https://cczeng.github.io/tags/gulp/"/>
</entry>
<entry>
<title>highcharts组件</title>
<link href="https://cczeng.github.io/2021/12/03/plugin/highcharts/"/>
<id>https://cczeng.github.io/2021/12/03/plugin/highcharts/</id>
<published>2021-12-03T08:29:39.711Z</published>
<updated>2021-12-03T08:29:39.712Z</updated>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>去年的一个里程碑中，项目中有大量使用到图表。为了提高在后续开发过程中的一致性，高效性和维护性，于是把highcharts库中常用的一些图表进行了封装，确实对后来的开发提供了的极大的便利性。然而由于兼容了许多类型的图表，虽然在开发过程中想了很多，在后续实际生产环境中仍然接连暴露出很多意想不到的BUG，正因为如此之后的维护也花费了一些时间，最终也算比较稳定和成熟了。<span style="color:red">该组件某些图表类型数据格式还不是很一致，文档不够详细，接下来会尽快调整完善！！！</span><br><a id="more"></a></p><h1 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h1><p>hightcharts组件jQuery.plugins.hightcharts-bolt</p><h1 id="组件效果展示"><a href="#组件效果展示" class="headerlink" title="组件效果展示"></a>组件效果展示</h1><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_highcharts.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><h1 id="组件使用说明"><a href="#组件使用说明" class="headerlink" title="组件使用说明"></a>组件使用说明</h1><h2 id="使用环境"><a href="#使用环境" class="headerlink" title="使用环境"></a>使用环境</h2><pre><code><script type='text/javascript' src='../js/common/jquery/jquery.min.js'></script><script type='text/javascript' src='../js/common/highcharts/highcharts.js'></script><script type='text/javascript' src='../js/plugins/jQuery.plugins.highcharts-bolt.js'></script>/*以下文件可以按需加载*/<script type='text/javascript' src='../js/common/highcharts/drilldown.js'></script>//下钻图表<script type='text/javascript' src='../js/common/highcharts/highcharts-more.js'></script>//气泡图<script type='text/javascript' src='../js/common/highcharts/no-data-to-display.js'></script>//无数据时显示提示<script type='text/javascript' src='../js/common/highcharts/solid-gauge.js'></script>//仪表图<script type='text/javascript' src='../js/common/highcharts/oldie.js'></script>//词云图<script type='text/javascript' src='../js/common/highcharts/wordcloud.js'></script>//词云图/*以下三个文件在开启图表导出功能时使用(options.export=true时)*/<script type='text/javascript' src='../js/common/highcharts/exporting.js'></script>//导出图表<script type='text/javascript' src='../js/common/highcharts/offline-exporting.js'></script>//导出图表<script type='text/javascript' src='../js/common/highcharts/highcharts-zh_CN.js'></script>//导出图表汉化</code></pre><blockquote><p><a href="https://www.highcharts.com.cn/" target="_blank" rel="noopener">Hightcharts</a><br>如果项目中有使用bootstrap时，加入以下样式解决bootstrapy对导出列表样式的冲突<br> <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">//在开启图表导出功能时使用(options.export=true时)</span><br><span class="line"><style type="text/css"></span><br><span class="line">.highcharts-contextmenu hr{</span><br><span class="line"> margin:0px!important;</span><br><span class="line">}</span><br><span class="line"></style></span><br></pre></td></tr></table></figure></p></blockquote><h2 id="规范说明"><a href="#规范说明" class="headerlink" title="规范说明"></a>规范说明</h2><blockquote><ol><li>Y轴支持数值类型数据,后台可以返回number和string随意类型,无值时返回null或”null”;</li><li>X轴支持时间戳,字符串和数值类型,时间戳(秒级)和数字类型可以返回number和string随意类型;</li><li>所有的百分比堆叠图,饼图和双环扇形图返回的Y值需是实际值,单位是实际单位;</li><li>组件会对数值类型进行小数点保留处理;</li><li>无数据时data,result和values都可以任意为null||”null”||[],values的y值无值时为null||”null”;</li><li>词云图字段分割通过”,” “.”或” “分割;</li><li>特殊单位标准：内存大小单位-KiB,KiB/s,s;(比如只要是时间类型的数值都传入以秒为单位的数值，然后交由组件内部处理自适应转换单位)</li><li>建议直接查看实例数据使用会更加准确快捷;</li><li>通过配置options参数，几乎可以改变任何样式，得到符合自己需求和审美的图。</li></ol></blockquote><h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><pre><code>$("#ID/.class").highcharts([options,]hightchartData);</code></pre><h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><h3 id="1-hightchartData"><a href="#1-hightchartData" class="headerlink" title="1.hightchartData"></a>1.hightchartData</h3><p>可以是制定格式的数据,亦可以是返回指定格式数据的Function,function中返回数据需要ajax请求结束后，可能需要使用同步请求方式(array/function).</p><h4 id="数据格式"><a href="#数据格式" class="headerlink" title="数据格式"></a>数据格式</h4><pre><code>var hightchartData=[ { "label":{//非第一组数据label下只需要设置seriesReg字段，其余共用第一组数据的label设置。 "seriesReg":"{{monitor_host}}:{{job}}",//数据项名称规则，使用{{}}包含result里的seriesAttr的属性名称以获取值。因为数据项名称有时后台不可以直接返回，需要拼接 "yAxisUnit":"容量-s",//y轴名称和单位，名称和单位为空时，值为"-".当type="columnchartpercent"||type="barchartpercent"时,可以每组数据对应使用自己的单位,值为："容量-单位1-单位2-..." "xAxisUnit":"-",//X轴名称和单位(单位如KiB,KiB/s/s) "zAxisUnit":"-",//X轴名称和单位,散点图和气泡图会用到. "xAxisType":"dataTime",//X轴数据类型(时间类型为“dataTime”,数值类型为“number”(数值可以加引号但属于number类型)),字符串类型为“string”;饼图和双环图值不使用字段，值随意) "type":"areachart",//图表类型 "title":"内存大小",//图标题名称 "outerData":[['健康','20'],['良好',50],['一般',30]],//外环数据(只双环图需要，数组长度为三,值只需成比例即可). "drillData": [{ //只下钻饼图所需要的二级，三级..数据 id: 'dazhong', data: [ { name: '一汽', y: 100 },{ name: '上汽', y:100, drilldown: 'shangqi' } ] }, { id: 'bentian', data: [{ name: '雅阁', y: 120 },{ name: 'CR-V', y:30 }] }, { id: 'xuefulan', data: [ ['科鲁兹', 50], ['迈锐宝XL', 40], ['探界者', 10] ] },{ id: 'shangqi', data: [ ['帕萨特', 70], ['辉昂', 20], ['途观', 10] ] }] }, "result":[//当为双环扇形图时多组数据result下的values总个数为2 { "seriesAttr":{ //数据项名称字段 "monitor_host":"172.16.26.41", "instance":"172.16.26.41:9990", "monitor_env":"kafka41", "monitor_port":"9092", "monitor_cluster":"blogic-kafka-cluster", "job":"kafka_jmx", "monitor_type":"MQ" }, "values":[ //数据值(当为饼图或环状图时values长度为1且数组第一个为空字符串"",当饼图和柱形图下钻时增加第三个为id或空字符串"".无数据时为null或[]) ["1536029467","486132.72"],["1536029468.5","486132.72"],["1536029470","486132.72"],["1536029471.5","625963.9"],["1536029473","625963.9"],["1536029474.5","625963.9"] }, { "seriesAttr":{ "monitor_host":"172.16.3.117", "instance":"172.16.3.117:9990", "monitor_env":"kafka117", "monitor_port":"9092", "monitor_cluster":"blogic-kafka-cluster", "job":"kafka_jmx", "monitor_type":"MQ" }, "values":[ ["1536029467","685986.69"],["1536029468.5","685986.69"],["1536029470","685986.69"],["1536029471.5","685986.69"],["1536029473","685986.69"],["1536029474.5","685986.69"] ] } ] },//第一组数据 ...]</code></pre><blockquote><p><strong>label.type说明：</strong><br>面积图-“areachart”;曲线面积图-“areasplinechart”;百分比面积图-“areachartpercent”;堆叠面积图-“areachartnormal”;<br>折线图-“linechart”;曲线图-“splinechart”;柱状图-“columnchart”;百分比柱状图-“columnchartpercent”;堆叠柱状图-“columnchartnormal”;可下钻柱状图-“columnchartdrill”;<br>条形图-“barchart”;百分比条形图-“barchartpercent”;堆叠条形图-“barchartnormal”;<br>散点图-“scatterchart”;气泡图-“bubblechart”;饼图-“piechart”;可下钻饼图-“piechart”(与饼图相同，只是属性多一个数据项drillData和values元素多一个参数);环形图-“piechartring”;双环图-“piechartringrule”;)<br>百分比活动图-“solidgaugechartpre”;百分比活动图in-“solidgaugechartpreIn”;百分比活动图out-“solidgaugechartpreOut”;数值活动图-“solidgaugechartnum”;数值活动图in-“solidgaugechartnumIn”;数值活动图out-“solidgaugechartnumOut”;<br>“百分比仪表图”-“gaugechartpre”;”百分比仪表图out”-“gaugechartpreOut”;”数值仪表图”-“gaugechartnum”;”数值仪表图out”-“gaugechartnumOut”;<br>词云图-“wordcloudchart”;单值图-“singleValuechart”<br><strong>定义如此多的类型就是为了减少option参数的配置，降低使用难度</strong></p></blockquote><h3 id="2-options"><a href="#2-options" class="headerlink" title="2.options"></a>2.options</h3><p>options,非必传项(object)。</p><pre><code>var options={ zoomType:"xy",//图表缩放类型（沿X轴-"x";沿Y轴-"y";沿XY-"xy";关闭-null） export:false,//是否开启导出图表功能 lineWidth:1.7,//直线图和曲线图线的粗细 cursor:'pointer',//光标形状(可点击-"pointer";无绑定事件-null) gaugeLevel:[50,30,20],//仪表盘颜色变化标准,数值大小成比例即可 decimal:2,//数据处理需要保留的小数点位数 title: {//图表名称样式 enabled:false, align: 'left', color: '#55B951', fontSize:'14px' }, legend:{//图例说明样式 enabled:true, fontWeight:"normal", fontSize:"14px", color:'#999', navEnabled:true, navHeight:44, y:0, right:false//图列是否向右展示 symbolRadius:true//图列图标形状 }, labels: {//刻度名称样式 color: "#666666", fontSize: "12px" , fontWeight:"normal" }, stackLabels: {//堆叠数据标签(未优化) enabled: false, color: "contrast", fontSize: "11px", fontWeight: "bold" }, dataLabels: {//数据标签样式 enabled: false,//(双环图内部默认false不可配置) color: "contrast", fontSize: "11px", fontWeight: "bold", distance:30 }, marker:{ enabled:false,//点标记是否开始 radius:5//点的大小 }, tooltip: {//提示框样式 enabled:true, shared: true,//false显示仪表盘中心文字附加行 color: "#666", fontSize: "12px", whiteSpace: "nowrap", fontWeight:"normal" }, xAxis:{ enabledTitle:true,//X轴名称是否显示 xTitleUnit:true,//X轴单位显示位置(X轴名称后面-true,X轴刻度后面-false;) tickLength:10 }, yAxis:{ enabledTitle:true,//Y轴名称是否显示 yTitleUnit:false//Y轴单位显示位置(Y轴名称后面-true,Y轴刻度后面-false;) }, color:["#64bcff","#0dd8d1","#ff7f31", "#d84d4d", "#8085e9", "#90ed7d", "#f15c80", "#e4d354","#91e8e1", '#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'], colorRule:['#38ae33','#ef8f40','#f64a4a',"#e6e6e6","#f4a6c4"],//双环图和仪表盘图颜色(前三个刻度等级颜色，第四个面板背景色，第五个刻度背景色) size:'100%',//扇形图，环图，仪表盘图大小 ring:{//环形图特殊样式(饼图和仪表盘) startAngle:0,//-135起始角度 endAngle:360,//135终止角度 center:['50%', '50%']//图中心位置 }, pieRing:{//环形饼图特殊样式 subEnabled:true,//中心文字是否显示 subY:-10,//中心文字Y坐标 subfontSize:'15px',//中心文字大小 subunitSize:'20px',//中心单位字体大小 subfontWeight:700,//中心文字粗细 subColor:"#333333",//中心文字颜色 innerSize:'65%',//内环粗细 outerSize:'90%',//外环粗细 }, solidgauge:{//仪表盘特殊样式 labelY:-22,//中心文字Y坐标 dlfontSize:'30px',//中心文字大小 dlunitSize:'20px',//中心单位字体大小 dlfontWeight:700,//中心文字粗细 dlBottomfontSize:'20px',//中心文字附加行字体大小 panelOuterRadius:'100%',//面板宽度外界 dataOuterRadius:'100%',//数值宽度外界 plotOuterRadius:'100%',//刻度宽度外界 panelInnerRadius:'75%',//面板宽度内界 dataInnerRadius:'75%',//数值宽度内界 plotInnerRadius:'75%',//刻度宽度内界 ylabelsEnabled:true,//刻度数值是否显示 ylabelsY:15,//刻度数值Y坐标 ylabelsColor:"#666666",//刻度数值颜色 ylabelsFontSize:"11px",//刻度数值字体大小 tickAmount:0,//刻度总数 minorTickWidth: 1,//次刻度线宽度 minorTickLength: 10,//次刻度线长度 minorTickColor: '#999999',//次刻度线颜色 tickWidth: 2,//刻度线宽度 tickLength: 15,//刻度线长度 tickColor: '#ffffff',//刻度线颜色 titleY:10,//单位Y坐标 titleSize:"14px",//单位字体大小 dialBaseLength:"60%",//指针长度 dialRearLength:"15%"//指针长度 }, gauge:{//带指针仪表盘特殊样式 startAngle:-135, endAngle:135, center:['50%', '50%'], labelY:-10,//中心文字Y坐标 dialColor:"#0f0f0f",//指针颜色 dialSize:4//指针粗细 }, singleValue:{//单值图特殊样式 fontSize:'30px',//中心数值字体大小 unitFontSize:'20px',//后缀字体大小 fontWeight:700,//字体粗细 color:"#333"//字体颜色 } };</code></pre><h2 id="代码地址"><a href="#代码地址" class="headerlink" title="代码地址"></a>代码地址</h2><blockquote><p><a href="https://github.com/leebolt528/blogic-plugins.git" target="_blank" rel="noopener">https://github.com/leebolt528/blogic-plugins.git</a></p></blockquote>]]></content>
<summary type="html">
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>去年的一个里程碑中，项目中有大量使用到图表。为了提高在后续开发过程中的一致性，高效性和维护性，于是把highcharts库中常用的一些图表进行了封装，确实对后来的开发提供了的极大的便利性。然而由于兼容了许多类型的图表，虽然在开发过程中想了很多，在后续实际生产环境中仍然接连暴露出很多意想不到的BUG，正因为如此之后的维护也花费了一些时间，最终也算比较稳定和成熟了。<span style="color:red">该组件某些图表类型数据格式还不是很一致，文档不够详细，接下来会尽快调整完善！！！</span><br>
</summary>
<category term="plugin" scheme="https://cczeng.github.io/tags/plugin/"/>
<category term="highcharts" scheme="https://cczeng.github.io/tags/highcharts/"/>
</entry>
<entry>
<title>dashboard仪表板组件</title>
<link href="https://cczeng.github.io/2021/12/03/plugin/dashboard/"/>
<id>https://cczeng.github.io/2021/12/03/plugin/dashboard/</id>
<published>2021-12-03T08:29:39.711Z</published>
<updated>2021-12-03T08:29:39.711Z</updated>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>把之前封装好的highcharts封装在了gridstack.js插件里面，这样就可以使用内容为图表的仪表板了。<br><a id="more"></a></p><h1 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h1><p>dashboard组件jQuery.plugins.dashBoard-bolt<br>依赖hightcharts组件jQuery.plugins.hightcharts-bolt</p><h1 id="组件效果展示"><a href="#组件效果展示" class="headerlink" title="组件效果展示"></a>组件效果展示</h1><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_dashboardView.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><blockquote><p>option.mode=”view”<br>仪表板中的查看模式。</p></blockquote><video id="video1" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\plugin\Video_dashboardEdit.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><blockquote><p>option.mode=”edit”<br>仪表板的编辑模式,面板内容可编辑，改变大小以及位置。</p></blockquote><h1 id="组件使用说明"><a href="#组件使用说明" class="headerlink" title="组件使用说明"></a>组件使用说明</h1><h2 id="使用环境"><a href="#使用环境" class="headerlink" title="使用环境"></a>使用环境</h2><pre><code><link rel="stylesheet" href="../css/common/awesome/css/font-awesome.min.css">(使用到加载图标)<link rel="stylesheet" href="../css/common/commonBolt.css">(组件公共样式)<link rel="stylesheet" href="../css/plugins/jQuery.plugins.dashBoard-bolt.css"><script type='text/javascript' src='../js/common/jquery/jquery.min.js'></script><script type='text/javascript' src='../js/plugins/jQuery.plugins.dashBoard-bolt.js'></script><!-- 使用gridstack.js的需要 --><link rel="stylesheet" href="../css/common/gridstack/gridstack.css"><script type='text/javascript' src='../js/common/gridstack/jquery-ui.min.js'></script><script type='text/javascript' src='../js/common/gridstack/lodash.min.js'></script><script type='text/javascript' src='../js/common/gridstack/gridstack.all.js'></script><script type='text/javascript' src='../js/common/gridstack/knockout-min.js'></script><!-- 还需要引入hightcharts组件依赖的hightcharts库 --></code></pre><blockquote><p><a href="https://github.com/gridstack/gridstack.js" target="_blank" rel="noopener">API</a><br><a href="https://github.com/gridstack/gridstack.js/tree/develop/doc" target="_blank" rel="noopener">API</a></p></blockquote><h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><pre><code><div class="dashBoard"></div>自定义class="dashBoard"用于方法调用</code></pre><p>通过JavaScript调用菜单组件:</p><pre><code>$(".dashBoard").getDashboard([options,]dashboardData);</code></pre><h2 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h2><h3 id="1-dashboardData"><a href="#1-dashboardData" class="headerlink" title="1.dashboardData"></a>1.dashboardData</h3><p>可以是制定格式的数据,亦可以是返回指定格式数据的Function,function中返回数据需要ajax请求结束后，可能需要使用同步请求方式(array/function).</p><h4 id="数据格式"><a href="#数据格式" class="headerlink" title="数据格式"></a>数据格式</h4><pre><code>var dashboardData= [{ "id":"panels1",//面板ID "title": "面积图-areachart-.highcharts(areaData,{export:true})",//面板标题 "location": {//面板位置大小 "dataGsX": 0,//X坐标 "dataGsY": 0,//Y坐标 "dataGsWidth":4,//宽度 "dataGsHeight": 15//高度 }, "options":{export:true},//hightcharts组件options "widgets": [{//多组绘图数据 "ajax":false,//flase:使用下面data数据;true:使用data值进行ajax请求数据 "data":areaData[0]//object:数据格式同hightcharts组件的hightchartData中的对象数据;String:ajax请求路径 },{ "ajax":true, "data":"ajax请求路径" }, ... ]}, ... ]},...</code></pre><p>]</p><h3 id="2-options"><a href="#2-options" class="headerlink" title="2.options"></a>2.options</h3><p>options,非必传项(object)。</p><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">必传</th><th style="text-align:left">默认值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">mode</td><td style="text-align:center">string</td><td style="text-align:left">false</td><td style="text-align:left">“view”</td><td style="text-align:left">“view”:查看模式;”edit”:编辑模式</td></tr><tr><td style="text-align:center">grid_options</td><td style="text-align:center">object</td><td style="text-align:left">false</td><td style="text-align:left"></td><td style="text-align:left">gridstack.js基本信息配置</td></tr><tr><td style="text-align:center">callback</td><td style="text-align:center">object</td><td style="text-align:left">false</td><td style="text-align:left">{}</td><td style="text-align:left">各种事件后的回调函数</td></tr></tbody></table><h4 id="options-grid-options"><a href="#options-grid-options" class="headerlink" title="options.grid_options"></a>options.grid_options</h4><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">必传</th><th style="text-align:left">默认值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">verticalMargin</td><td style="text-align:center">number</td><td style="text-align:left">false</td><td style="text-align:left">15</td><td style="text-align:left">面板垂直间距</td></tr><tr><td style="text-align:center">cellHeight</td><td style="text-align:center">number</td><td style="text-align:left">false</td><td style="text-align:left">2</td><td style="text-align:left">面板大小单位大小</td></tr><tr><td style="text-align:center">handle</td><td style="text-align:center">string</td><td style="text-align:left">false</td><td style="text-align:left">“.drag-handle”</td><td style="text-align:left">options.mode==”edit”时拖动元素</td></tr><tr><td style="text-align:center">levelMargin</td><td style="text-align:center">number</td><td style="text-align:left">false</td><td style="text-align:left">15</td><td style="text-align:left">面板水平间距</td></tr></tbody></table><h4 id="options-callback"><a href="#options-callback" class="headerlink" title="options.callback"></a>options.callback</h4><table><thead><tr><th style="text-align:center">名称</th><th style="text-align:center">类型</th><th style="text-align:left">参数</th><th style="text-align:left">返回值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">onDel</td><td style="text-align:center">function</td><td style="text-align:left">$this(本次删除的父级class=”.grid-stack-item”元素),delArray(累计删除的面板id)</td><td style="text-align:left">无</td><td style="text-align:left">options.mode==”edit”时删除面板的回调函数</td></tr></tbody></table><h2 id="对象方法"><a href="#对象方法" class="headerlink" title="对象方法"></a>对象方法</h2><table><thead><tr><th style="text-align:center">方法名称</th><th style="text-align:center">类型</th><th style="text-align:left">返回值</th><th style="text-align:left">描述</th></tr></thead><tbody><tr><td style="text-align:center">getAllWidgets</td><td style="text-align:center">function</td><td style="text-align:left">返回现有的所有面板最新信息</td><td style="text-align:left">得到现有的所有面板最新信息</td></tr><tr><td style="text-align:center">getAllHightchartId</td><td style="text-align:center">function</td><td style="text-align:left">返回所有绘图面板id,除单值图</td><td style="text-align:left">得到所有绘图面板id,除单值图，如果页面大小发生改变，如菜单收缩，hightcharts就需要拿到这些id手动重绘更新图大小</td></tr></tbody></table><pre><code>var dashboardObj=$(".dashBoard").getDashboard([options,]dashboardData);var widgetsArray=dashboardObj.getAllWidgets();var hightchartIdArr=dashboardObj.getAllHightchartId();</code></pre><h2 id="代码地址"><a href="#代码地址" class="headerlink" title="代码地址"></a>代码地址</h2><blockquote><p><a href="https://github.com/leebolt528/blogic-plugins.git" target="_blank" rel="noopener">https://github.com/leebolt528/blogic-plugins.git</a></p></blockquote>]]></content>
<summary type="html">
<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>把之前封装好的highcharts封装在了gridstack.js插件里面，这样就可以使用内容为图表的仪表板了。<br>
</summary>
<category term="plugin" scheme="https://cczeng.github.io/tags/plugin/"/>
<category term="dashboard" scheme="https://cczeng.github.io/tags/dashboard/"/>
</entry>
<entry>
<title>使用Hexo + Github Pages搭建个人独立博客</title>
<link href="https://cczeng.github.io/2021/12/03/Github%20Pages%E6%90%AD%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2/"/>
<id>https://cczeng.github.io/2021/12/03/Github Pages搭建自己的博客/</id>
<published>2021-12-03T08:29:39.706Z</published>
<updated>2021-12-03T12:39:44.149Z</updated>
<content type="html"><![CDATA[<p><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\blog\WeChat_20190504234619.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><br><span>《飞驰人生》</span></p><h1 id="1-前言"><a href="#1-前言" class="headerlink" title="1.前言"></a>1.前言</h1><p>由于最近公司项目不是很紧张，想着梳理一下自己最近的收获和对技能方面有进一步系统的学习。突然发现了我确实有必要拥有一个自己的博客，于是最近一有空就会着手于这方面的研究。经过这么几天的纠结跳坑，通过阅读其他大神的分享我也终于搭建成功了自己的博客。<br><a id="more"></a></p><h2 id="那么我为什么要建立自己的博客？"><a href="#那么我为什么要建立自己的博客？" class="headerlink" title="那么我为什么要建立自己的博客？"></a>那么我为什么要建立自己的博客？</h2><h3 id="1-提高将事情讲清楚的能力"><a href="#1-提高将事情讲清楚的能力" class="headerlink" title="1.提高将事情讲清楚的能力"></a>1.提高将事情讲清楚的能力</h3><blockquote><p>将一件事情写下来，可以锻炼一个人的思维逻辑能力和提高表达分析能力，写会迫使你在你脑中搭建一个条理的框架。</p><blockquote><p>如果一件事你没有讲清楚，十有八九是你还没有理解清楚。</p></blockquote></blockquote><h3 id="2-培养持续做一件事的能力"><a href="#2-培养持续做一件事的能力" class="headerlink" title="2.培养持续做一件事的能力"></a>2.培养持续做一件事的能力</h3><blockquote><p>我大三曾经坚持健身一年，健身带来了我们所求所想的好；我想看书让自己的心静下来，可我怕买回来不看没勇气去买；但我从现在开始必须要坚持写博客，默默地持续做一件事是一种难得的能力，也是一种难得的品质,将会提供一股持续学习的动力。</p><blockquote><p>开始是坚持，后来是习惯，接着是喜欢。</p></blockquote></blockquote><h3 id="3-积累更多的知识"><a href="#3-积累更多的知识" class="headerlink" title="3.积累更多的知识"></a>3.积累更多的知识</h3><blockquote><p>之前总是断断续续地学习一些东西，等到真正使用时突然发现还得从头开始查阅学习，这样方式严重阻碍的个人的提升。因此我觉得我有必要记录自己曾经学习的知识，构建自己的学习体系。</p><blockquote><p>写并不是单纯的写。</p></blockquote></blockquote><h3 id="4-分享带来的连锁反应"><a href="#4-分享带来的连锁反应" class="headerlink" title="4.分享带来的连锁反应"></a>4.分享带来的连锁反应</h3><blockquote><p>正如大家的学习主要依赖于网络其他朋友的分享，想我这次的搭建博客完全是依赖于他人的分享。</p><blockquote><p>互联网给你的反馈就是让你承受更多，接受更多，成为一个更好的人。</p></blockquote></blockquote><h3 id="5-记录成长"><a href="#5-记录成长" class="headerlink" title="5.记录成长"></a>5.记录成长</h3><blockquote><p>回首自己写的博客，你将会发现自己正在通过这种方式不断的成长，这种成长在自己眼里是一笔财富，在别人眼里是一张地图，你得到的收获不断修正自己的错误，别人得到指引避免走弯路。</p><blockquote><p>So what,that is what I am!</p></blockquote></blockquote><h1 id="2-开始搭建Github-Pages"><a href="#2-开始搭建Github-Pages" class="headerlink" title="2.开始搭建Github Pages"></a>2.开始搭建Github Pages</h1><h2 id="1-使用前了解Github"><a href="#1-使用前了解Github" class="headerlink" title="1.使用前了解Github"></a>1.使用前了解Github</h2><blockquote><p>GitHub是一个共享虚拟主机服务，用于存放使用Git版本控制的软件代码和内容项目(引自维基百科）</p></blockquote><h2 id="2-为什么选择Github"><a href="#2-为什么选择Github" class="headerlink" title="2.为什么选择Github?"></a>2.为什么选择Github?</h2><blockquote><p>github有一个很有爱的项目，叫做GitHub Pages,这个是给开发者建立的一个私人页面，上面用来分享新颖的想法和自己写的代码。而且最主要的是，这个是免费而且没有空间流量限制的。这也就是我为什么放弃了自由度很高的，却需要支付高昂的主机费的wordpress，而转投了github pages阵营。</p></blockquote><h2 id="3-注册github账号"><a href="#3-注册github账号" class="headerlink" title="3.注册github账号"></a>3.注册github账号</h2><p><a href="https://github.com/" target="_blank" rel="noopener">点击进行注册</a>(此处不做详细说明可自行阅读<a href="http://jingyan.baidu.com/article/455a9950abe0ada167277864.html" target="_blank" rel="noopener">github教程：[1]注册github</a>)</p><p>注册完毕后你就拥有了自己的代码仓库。</p><h2 id="4-创建仓库"><a href="#4-创建仓库" class="headerlink" title="4.创建仓库"></a>4.创建仓库</h2><p>点击Github右上角加号选择New repositor(新存储库)或<a href="https://github.com/new" target="_blank" rel="noopener">点击这里</a>进行创建一个仓库。</p><p><img src="\img\blog\create1.png" alt="创建一个仓库"></p><h2 id="5-开启Github-Pages"><a href="#5-开启Github-Pages" class="headerlink" title="5.开启Github Pages"></a>5.开启Github Pages</h2><p>进入设置</p><p><img src="/img/blog/create2.png" alt="设置"></p><p>找到这一块</p><p><img src="/img/blog/create3.png" alt="设置"> </p><p>当你的仓库名为：用户名.github.io 之后默认开启Github Pages</p><p>现在随便选择一个主题,选择上图的 Choose a theme 之后会跳转到下面这个页面</p><p><img src="/img/blog/create4.png" alt="选择主题"> </p><p>设置完毕后你就可以通过 username.github.io(username为你的用户名访问你的博客了)</p><h1 id="3-hexo系统环境配置"><a href="#3-hexo系统环境配置" class="headerlink" title="3.hexo系统环境配置"></a>3.hexo系统环境配置</h1><p>要使用Hexo，需要在你的系统中支持Nodejs以及Git，如果还没有，那就开始安装吧！</p><h2 id="安装Node-js"><a href="#安装Node-js" class="headerlink" title="安装Node.js"></a>安装Node.js</h2><p><a href="https://nodejs.org/en/download/" target="_blank" rel="noopener">下载Node.js</a><br>参考:<a href="http://www.runoob.com/nodejs/nodejs-install-setup.html" target="_blank" rel="noopener">安装Node.js</a> </p><h2 id="安装Git"><a href="#安装Git" class="headerlink" title="安装Git"></a>安装Git</h2><p><a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000" target="_blank" rel="noopener">廖雪峰Git安装使用教程</a></p><p><a href="https://git-scm.com/download/" target="_blank" rel="noopener">下载Git</a><br>一路点击Next就行了.</p><h3 id="自报家门"><a href="#自报家门" class="headerlink" title="自报家门"></a>自报家门</h3><pre><code>$ git config --global user.name "Your Name"$ git config --global user.email "[email protected]"</code></pre><p>因为Git是分布式版本控制系统，所以，每个机器都必须自报家门：你的名字和Email地址。你也许会担心，如果有人故意冒充别人怎么办？这个不必担心，首先我们相信大家都是善良无知的群众，其次，真的有冒充的也是有办法可查的。</p><p>注意git config命令的–global参数，用了这个参数，表示你这台机器上所有的Git仓库都会使用这个配置，当然也可以对某个仓库指定不同的用户名和Email地址</p><p>由于你的本地Git仓库和GitHub仓库之间的传输是通过SSH加密的，所以，需要一点设置：</p><h3 id="添加SSH-Key到Github"><a href="#添加SSH-Key到Github" class="headerlink" title="添加SSH Key到Github"></a>添加SSH Key到Github</h3><p>第1步：创建SSH Key。在用户主目录下，看看有没有.ssh目录，如果有，再看看这个目录下有没有id_rsa和id_rsa.pub这两个文件，如果已经有了，可直接跳到下一步。如果没有，打开Shell（Windows下打开Git Bash），创建SSH Key：</p><pre><code>$ ssh-keygen -t rsa -C "[email protected]"</code></pre><p>你需要把邮件地址换成你自己的邮件地址，然后一路回车，使用默认值即可，由于这个Key也不是用于军事目的，所以也无需设置密码。<br>如果一切顺利的话，可以在用户主目录里找到.ssh目录，里面有id_rsa和id_rsa.pub两个文件，这两个就是SSH Key的秘钥对，id_rsa是私钥，不能泄露出去，id_rsa.pub是公钥，可以放心地告诉任何人。</p><p>第2步：登陆<a href="https://github.com/" target="_blank" rel="noopener">GitHub</a>，打开“settings”，“SSH and GPG keys”页面：</p><p>然后，点“New GPG key”，填上任意Title，在Key文本框里粘贴id_rsa.pub文件的内容：</p><p><img src="/img/blog/key.png" alt="添加公钥"></p><p>为什么GitHub需要SSH Key呢？因为GitHub需要识别出你推送的提交确实是你推送的，而不是别人冒充的，而Git支持SSH协议，所以，GitHub只要知道了你的公钥，就可以确认只有你自己才能推送。</p><h2 id="安装Hexo"><a href="#安装Hexo" class="headerlink" title="安装Hexo"></a>安装Hexo</h2><p>在你需要安装Hexo的目录下(新建一个文件夹)右键选择 Git Bash </p><pre><code>$ npm install hexo-cli -g $ hexo init blog #初始化网站$ cd blog $ npm install $ hexo g #生成静态文件，会在当前目录下生成一个新的叫做public的文件夹/ 或者 hexo generate$ hexo s #启动本地web服务，用于博客的预览 或者 hexo server,这一步之后就可以通过http://localhost:4000 查看了</code></pre><p><em>详细命令请参考<a href="https://hexo.io/docs/commands.html" target="_blank" rel="noopener">Hexo文档</a></em> </p><p>另外还有几个其它常用命令:</p><pre><code>$ hexo new "postName" #新建文章$ hexo new page "pageName" #新建页面</code></pre><p>常用简写</p><pre><code>$ hexo n == hexo new #生成文章$ hexo c == hexo clean #清除缓存$ hexo g == hexo generate #保存修改，生成文件$ hexo s == hexo server #启动本地服务$ hexo d == hexo deploy #发布到远程$ hexo init #生成站点$ hexo new page "xxx" #生成页面$ npm install --save xxx #安装插件$ npm unstall xxx #卸载插件</code></pre><h2 id="添加主题"><a href="#添加主题" class="headerlink" title="添加主题"></a>添加主题</h2><h3 id="安装主题（yilia）"><a href="#安装主题（yilia）" class="headerlink" title="安装主题（yilia）"></a>安装主题（yilia）</h3><pre><code>$ cd blog$ hexo clean$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia</code></pre><h3 id="启用主题"><a href="#启用主题" class="headerlink" title="启用主题"></a>启用主题</h3><p>找到目录下的_config.yml 文件,打开找到 theme：属性并设置为yilia</p><h3 id="跟新主题"><a href="#跟新主题" class="headerlink" title="跟新主题"></a>跟新主题</h3><pre><code>$ cd themes/yilia$ git pull$ cd ../..$ hexo g$ hexo s</code></pre><p>现在打开<a href="http://localhost:4000" target="_blank" rel="noopener">http://localhost:4000</a>,会看到我们已经应用了一个新的主题。</p><h1 id="4-使用Hexo-deploy部署到github"><a href="#4-使用Hexo-deploy部署到github" class="headerlink" title="4.使用Hexo deploy部署到github"></a>4.使用Hexo deploy部署到github</h1><p>这一步恐怕是最关键的一步了，让我们把在本地web环境下预览到的博客部署到github上，然后就可以直接通过<a href="http://leebolt528.github.io" target="_blank" rel="noopener">http://username.github.io</a>访问了。不过很多教程文章对这个步骤语焉不详，这里着重说下</p><h3 id="首先需要明白所谓部署到github的原理"><a href="#首先需要明白所谓部署到github的原理" class="headerlink" title="首先需要明白所谓部署到github的原理"></a>首先需要明白所谓部署到github的原理</h3><ol><li>之前步骤中在Github上创建的那个特别的repo(leebolt528.github.io)一个最大的特点就是其master中的html静态文件，可以通过链接 <a href="http://leebolt528.github.io" target="_blank" rel="noopener">http://leebolt528.github.io</a> 来直接访问。</li><li>hexo g 会生成一个静态网站(第一次会生成一个public目录),这个静态文件可以直接访问。</li><li>需要将hexo生成的静态网站提交到github上.</li></ol><h3 id="使用hexo-deploy部署"><a href="#使用hexo-deploy部署" class="headerlink" title="使用hexo deploy部署"></a>使用hexo deploy部署</h3><p>需要在blog的根目录下的配置文件_config.xml中作如下修改：</p><blockquote><p>deploy:<br> type: git<br> repo: <a href="mailto:[email protected]" target="_blank" rel="noopener">[email protected]</a>:leebolt528/leebolt528.github.io.git #这里的网址填你自己的<br> branch: master</p></blockquote><p>保存后运行一下命令即可完成部署：</p><pre><code>npm install hexo-deployer-git --save #必须在hexo d之前安装这个扩展hexo d</code></pre><p>这时再刷新username.github.io就可以看到你的博客了。<br>hexo generate 生成的publish中html都是空的？</p><pre><code>nvm切换node版本</code></pre><p>hexo deploy 出现<a href="mailto:[email protected]" target="_blank" rel="noopener">[email protected]</a>: Permission denied (publickey)</p><pre><code>1.git config --global --list 验证邮箱与GitHub注册时输入的是否一致2.git仓库，添加秘钥3.ssh -T [email protected] 测试一下通不通4.不通就是ssh-agent -sssh-add ~/.ssh/id_rsa 操作这两步</code></pre><h1 id="5-关于hexo搭建博客后的一些基础配置"><a href="#5-关于hexo搭建博客后的一些基础配置" class="headerlink" title="5.关于hexo搭建博客后的一些基础配置"></a>5.关于hexo搭建博客后的一些基础配置</h1><p><strong><em>一些配置需要在blog根目录和themes/yilia下的两个_config.yml文件中在修改。</em></strong></p><h2 id="修改主题"><a href="#修改主题" class="headerlink" title="修改主题"></a>修改主题</h2><p>1.找到想要的主题后，下载到目录的themes下<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https://github.com/wuchong/jacman.git themes/jacman</span><br></pre></td></tr></table></figure></p><p>2.修改全局config.yml中的theme,theme:yilia 把yilia改为pacman.<br>3.然后进行主题更新以及部署(最后上传到github).<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">cd themes/jacman</span><br><span class="line">git pull</span><br><span class="line">hexo clean</span><br><span class="line">hexo d -g</span><br></pre></td></tr></table></figure></p><h2 id="使用畅言评论"><a href="#使用畅言评论" class="headerlink" title="使用畅言评论"></a>使用畅言评论</h2><h3 id="方式一"><a href="#方式一" class="headerlink" title="方式一"></a>方式一</h3><p>注册<a href="http://changyan.kuaizhan.com/" target="_blank" rel="noopener">畅言</a>后，在themes/主题下的.config.yml中修改一下字段:</p><blockquote><p>#畅言<br>changyan_appid: cysWBK2R1 #你在注册畅言中得到的APP ID<br>changyan_conf: c0d676145cb5b4242cedcdef8d2e97d6 #你在注册畅言中得到的APP KEY </p></blockquote><p>在每篇文章开头的 front-matter 中添加一句comments: true，然后回到博客根目录执行命令 hexo d -g ，重新生成博客并部署博客，然后刷新，任选一篇文章进入下拉，会发现评论功能可以使用了。</p><p><img src="/img/blog/changyan.png" alt="comments: true"></p><h3 id="方式二"><a href="#方式二" class="headerlink" title="方式二"></a>方式二</h3><p><a href="http://www.luck666.cn/2017/03/22/hexo-yilia-changyan/" target="_blank" rel="noopener">Hexo博客yilia主题更换畅言评论系统</a></p><p><a href="https://www.lichanglin.cn/%E5%9C%A8Hexo%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%95%85%E8%A8%80%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/" target="_blank" rel="noopener">在Hexo中使用畅言评论系统</a></p><h2 id="hexo-yilia-文章目录"><a href="#hexo-yilia-文章目录" class="headerlink" title="hexo yilia 文章目录"></a>hexo yilia 文章目录</h2><p><a href="http://www.54tianzhisheng.cn/2017/06/13/Hexo-yilia-toc/" target="_blank" rel="noopener">Hexo + yilia 主题实现文章目录</a></p><h2 id="yilia标签分类"><a href="#yilia标签分类" class="headerlink" title="yilia标签分类"></a>yilia标签分类</h2><p>如果要有多个标签，可以如下图所示：</p><p><img src="/img/blog/tags.png" alt="tags"></p><h2 id="hexo-yilia-设置文章显示长度，不展开全文"><a href="#hexo-yilia-设置文章显示长度，不展开全文" class="headerlink" title="hexo yilia 设置文章显示长度，不展开全文"></a>hexo yilia 设置文章显示长度，不展开全文</h2><p><img src="/img/blog/more.png" alt="截取文章长度"></p><h2 id="hexo-yilia-怎么写文章"><a href="#hexo-yilia-怎么写文章" class="headerlink" title="hexo yilia 怎么写文章"></a>hexo yilia 怎么写文章</h2><p>我一般写文章就是先用本地 markdown 编辑器写好后，然后放在 hexo 的 source/_posts 目录下。</p><h2 id="不知道如何编写Markdown语法"><a href="#不知道如何编写Markdown语法" class="headerlink" title="不知道如何编写Markdown语法"></a>不知道如何编写Markdown语法</h2><p><a href="https://www.jianshu.com/p/1e402922ee32/" target="_blank" rel="noopener">Markdown——入门指南</a></p><p><a href="http://wowubuntu.com/markdown/#list" target="_blank" rel="noopener">Markdown 中文版语法说明</a></p><h2 id="草稿（私密文章）"><a href="#草稿（私密文章）" class="headerlink" title="草稿（私密文章）"></a>草稿（私密文章）</h2><p>我们可以在blog的source下创建一个_drafts文件夹，用于保存不舍得删除的。但也不想在页面上显示的文章，或者比较私人的不想让其他人看到的文章。如果要强制预览，可以在blog目录下的.config.yml中强制开启。</p><blockquote><p>render_drafts: false #强制预览修改为true</p></blockquote><h2 id="添加站长统计"><a href="#添加站长统计" class="headerlink" title="添加站长统计"></a>添加站长统计</h2><p>进入<a href="http://www.umeng.com/" target="_blank" rel="noopener">cnzz</a>进行注册和相应的设置</p><p><img src="/img/blog/cnzz1.png" alt="cnzz账号注册"></p><h4 id="方式一：（亲测无效）"><a href="#方式一：（亲测无效）" class="headerlink" title="方式一：（亲测无效）"></a>方式一：（亲测无效）</h4><p>在给出的代码中复制出id，把id填入到主题里的config.yml中对应的cnzz位置，如下</p><blockquote><p>cnzz_tongji:<br> enable: true<br> siteid: 12733<strong>*</strong> </p></blockquote><h4 id="方式二-1"><a href="#方式二-1" class="headerlink" title="方式二"></a>方式二</h4><p><img src="/img/blog/cnzz2.png" alt="cnzz代码获取"></p><p>获取自己喜欢的代码填入/blog/themes/yilia/layout/_partial/footer.ejs中的<code></footer></code>标签前。接着访问username.github.io就可以看到页面底部为下图所示：</p><p><img src="/img/blog/cnzz3.png" alt="cnzz查看分析"></p><p>点击新出现的图标即可查看分析，可以如下图所示按需设置查看密码。</p><p><img src="/img/blog/cnzz4.png" alt="cnzz查看密码"></p><h2 id="添加百度统计分析"><a href="#添加百度统计分析" class="headerlink" title="添加百度统计分析"></a>添加百度统计分析</h2><p>进入<a href="https://tongji.baidu.com/web/25415468/welcome/login" target="_blank" rel="noopener">百度分析</a>进行注册和相应的设置</p><p><img src="/img/blog/baidu1.png" alt="百度分析注册"></p><p><img src="/img/blog/baidu2.png" alt="百度分析注册"></p><p><img src="/img/blog/baidu3.png" alt="百度分析注册"></p><h4 id="方式一-1"><a href="#方式一-1" class="headerlink" title="方式一"></a>方式一</h4><p>在给出的代码中复制出id，把id填入到主题里的config.yml中对应的cnzz位置，如下<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># Miscellaneous</span><br><span class="line">baidu_analytics: '8678388163569xxxxxxxx'</span><br><span class="line">google_analytics: 'UA-9700xxxxxxxx'</span><br></pre></td></tr></table></figure></p><h4 id="方式二-2"><a href="#方式二-2" class="headerlink" title="方式二"></a>方式二</h4><p>直接把上述代码粘贴到/blog/themes/yilia/layout/_partial/head.ejs中的<code></head></code>标签前。接着就可以去该网站登陆自己的账号查看分析了。</p><h2 id="RSS订阅"><a href="#RSS订阅" class="headerlink" title="RSS订阅"></a>RSS订阅</h2><p>添加rss订阅，需要安装插件</p><pre><code>npm install hexo-generator-feed --save</code></pre><p>接着在blog目录下的config.yml中添加<code>rss: /atom.xml #rss地址 默认即可</code>。这样，rss订阅功能就开启了。</p><h2 id="电脑重装了系统-多台电脑写博客？"><a href="#电脑重装了系统-多台电脑写博客？" class="headerlink" title="电脑重装了系统/多台电脑写博客？"></a>电脑重装了系统/多台电脑写博客？</h2><p>完成Hexo本地运行后，会在本地文件里生成一个public文件夹。public文件夹内是根据.md生成的html文件，也就博客的静态文件。</p><p>通常情况下，我们执行：<code>$ hexo d</code>,就是把public文件夹下的文件同步到github，然后就能通过<a href="https://username.github.io/访问博客了。所以，我们的思路其实就是把静态文件和Hexo环境，分别存在username.github.io的master和hexo分支上。" target="_blank" rel="noopener">https://username.github.io/访问博客了。所以，我们的思路其实就是把静态文件和Hexo环境，分别存在username.github.io的master和hexo分支上。</a></p><p><img src="/img/blog/branch.png" alt="博客分支存储"></p><blockquote><p>1.创建仓库–username.github.io;<br>2.创建两个分支：master 与 hexo;(git branch hexo创建,git checkout hexo切换)<br>3.设置hexo为默认分支(因为我们只需要手动管理这个分支上的Hexo网站文件);<br>4.使用git clone <a href="mailto:[email protected]" target="_blank" rel="noopener">[email protected]</a>:username.github.io.git拷贝仓库;<br>5.在本地<a href="http://username.github.io文件夹下通过Git" target="_blank" rel="noopener">http://username.github.io文件夹下通过Git</a> bash依次执行安装Hexo和添加主题命令(此时当前分支应显示为hexo);<br>6.修改根目录下的_config.yml中的deploy参数，分支应为master;<br>7.依次执行git add .、git commit -m “…”、git fetch&&git rebase、git push origin hexo提交网站相关的文件;<br>8.进入blog目录下执行hexo g -d生成网站并部署到GitHub上。</p></blockquote><p><em>blog中的子文件夹中.git需要删除，否则导致提交部署不成功</em><br>之后只需要每次在本地的blog文件下进行文章的增删改操作,完了提交到hexo分支上，再部署到远程master分支上即可。</p><h2 id="hexo引入图片"><a href="#hexo引入图片" class="headerlink" title="hexo引入图片"></a>hexo引入图片</h2><blockquote><p>可以选择储存图片到目录文件夹下，也可以使用<a href="https://baike.baidu.com/item/%E5%9B%BE%E5%BA%8A/10721348?fr=aladdin" target="_blank" rel="noopener">图床</a>。</p></blockquote><h2 id="hexo-yilia-引入音乐"><a href="#hexo-yilia-引入音乐" class="headerlink" title="hexo yilia 引入音乐"></a>hexo yilia 引入音乐</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="填写音乐链接地址"></iframe></span><br></pre></td></tr></table></figure><p>如下图，可以在网易云音乐里搜到你想要引入的音乐，然后点击如下的 “生成外链播放器” 即可：</p><p><img src="/img/blog/music1.png" alt="网易云"></p><p><img src="/img/blog/music2.png" alt="网易云"></p><h2 id="hexo引入视频"><a href="#hexo引入视频" class="headerlink" title="hexo引入视频"></a>hexo引入视频</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjUzMzY4OTM3Ng==" </span><br><span class="line">frameborder=0 allowfullscreen></span><br><span class="line"></iframe></span><br><span class="line">or</span><br><span class="line"><video id="video" controls="controls" preload="preload" poster="http://media.w3.org/2010/05/sintel/poster.png"></span><br><span class="line"> <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></span><br><span class="line"> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"></span><br><span class="line"> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"></span><br><span class="line"></video></span><br></pre></td></tr></table></figure><h2 id="hexo隐藏文章"><a href="#hexo隐藏文章" class="headerlink" title="hexo隐藏文章"></a>hexo隐藏文章</h2><blockquote><p>使用插件<a href="https://github.com/prinsss/hexo-hide-posts" target="_blank" rel="noopener">hexo-hide-posts</a></p></blockquote>]]></content>
<summary type="html">
<p><video id="video" controls="controls" preload="preload" poster="\img\public\head.jpg"><br> <source id="mp4" src="\video\blog\WeChat_20190504234619.mp4" type="video/mp4"><br> <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"><br> <source id="ogv" src="http://media.w3.org/2010/ 05/sintel/trailer.ogv" type="video/ogg"><br></video><br><span>《飞驰人生》</span></p>
<h1 id="1-前言"><a href="#1-前言" class="headerlink" title="1.前言"></a>1.前言</h1><p>由于最近公司项目不是很紧张，想着梳理一下自己最近的收获和对技能方面有进一步系统的学习。突然发现了我确实有必要拥有一个自己的博客，于是最近一有空就会着手于这方面的研究。经过这么几天的纠结跳坑，通过阅读其他大神的分享我也终于搭建成功了自己的博客。<br>
</summary>
<category term="hexo" scheme="https://cczeng.github.io/tags/hexo/"/>
<category term="blog" scheme="https://cczeng.github.io/tags/blog/"/>
</entry>
</feed>