<link rel="icon" type="image/png" href="favicon.png">

模板引擎修改为ejs，添加分页
realgeoffrey · May 26, 2018 · e56ff58 · e56ff58
1 parent f7cc891
commit e56ff58
Show file tree

Hide file tree

Showing 15 changed files with 71 additions and 15 deletions.
diff --git a/applets/demo/Mock/index.html b/applets/demo/Mock/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="keywords" content="">
     <meta name="description" content="">
-    <link rel="shortcut icon" type="image/ico" href="../../../favicon.ico">
+    <link rel="icon" type="image/png" href="../../../favicon.png">
     <title>Mock</title>
     <script>
         /* 兼容不支持console.log到alert*/

diff --git a/applets/demo/fancyBox查看大图/index.html b/applets/demo/fancyBox查看大图/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="keywords" content="">
     <meta name="description" content="">
-    <link rel="shortcut icon" type="image/ico" href="../../../favicon.ico">
+    <link rel="icon" type="image/png" href="../../../favicon.png">
     <title>fancyBox查看大图</title>
     <link href="../../../css/pc.css" type="text/css" rel="stylesheet">
     <link href="css_img/jquery.fancybox.css" type="text/css" rel="stylesheet">

diff --git a/applets/demo/fullpage单页/index.html b/applets/demo/fullpage单页/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="keywords" content="">
     <meta name="description" content="">
-    <link rel="shortcut icon" type="image/ico" href="../../../favicon.ico">
+    <link rel="icon" type="image/png" href="../../../favicon.png">
     <title>fullpage单页</title>
     <link href="../../../css/pc.css" type="text/css" rel="stylesheet">
     <link href="css/jquery.fullpage.min.css" type="text/css" rel="stylesheet"><!-- 使用slide才必须加此css-->

diff --git a/applets/demo/index.html b/applets/demo/index.html
@@ -8,7 +8,7 @@
     <meta name="format-detection" content="telephone=no,email=no,address=no">
     <meta name="keywords" content="">
     <meta name="description" content="">
-    <link rel="shortcut icon" type="image/ico" href="../../favicon.ico">
+    <link rel="icon" type="image/png" href="../../favicon.png">
     <title>组件demo</title>
     <style>
         a {

diff --git a/applets/demo/marquee跑马灯/index.html b/applets/demo/marquee跑马灯/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="keywords" content="">
     <meta name="description" content="">
-    <link rel="shortcut icon" type="image/ico" href="../../../favicon.ico">
+    <link rel="icon" type="image/png" href="../../../favicon.png">
     <title>marquee跑马灯</title>
     <link href="../../../css/pc.css" type="text/css" rel="stylesheet">
     <style>

diff --git a/applets/demo/qrcode二维码/index.html b/applets/demo/qrcode二维码/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="keywords" content="">
     <meta name="description" content="">
-    <link rel="shortcut icon" type="image/ico" href="../../../favicon.ico">
+    <link rel="icon" type="image/png" href="../../../favicon.png">
     <title>qrcode二维码</title>
     <link href="../../../css/pc.css" type="text/css" rel="stylesheet">
     <style>

diff --git a/applets/demo/slick轮播/index.html b/applets/demo/slick轮播/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="keywords" content="">
     <meta name="description" content="">
-    <link rel="shortcut icon" type="image/ico" href="../../../favicon.ico">
+    <link rel="icon" type="image/png" href="../../../favicon.png">
     <title>slick轮播</title>
     <link href="../../../css/wap.css" type="text/css" rel="stylesheet">
     <link href="css/slick.css" type="text/css" rel="stylesheet">

diff --git a/applets/demo/waterfall瀑布流&BaiduTemplate百度模板/index.html b/applets/demo/waterfall瀑布流&BaiduTemplate百度模板/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="keywords" content="">
     <meta name="description" content="">
-    <link rel="shortcut icon" type="image/ico" href="../../../favicon.ico">
+    <link rel="icon" type="image/png" href="../../../favicon.png">
     <title>waterfall瀑布流&BaiduTemplate百度模板</title>
     <link href="../../../css/pc.css" type="text/css" rel="stylesheet">
     <style>

diff --git a/applets/sprites/index.html b/applets/sprites/index.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="keywords" content="">
     <meta name="description" content="">
-    <link rel="shortcut icon" type="image/ico" href="../../favicon.ico">
+    <link rel="icon" type="image/png" href="../../favicon.png">
     <title>css sprites 合并和代码生成工具</title>
     <link href="css/sprites.css" type="text/css" rel="stylesheet">
 </head>

diff --git a/applets/template/initialization/home.html b/applets/template/initialization/home.html
@@ -8,7 +8,7 @@
   <meta name="format-detection" content="telephone=no,email=no,address=no">
   <meta name="keywords" content="">
   <meta name="description" content="">
-  <link rel="shortcut icon" type="image/ico" href="favicon.ico">
+  <link rel="icon" type="image/png" href="favicon.png">
   <title>home</title>
   <link href="css/css-reset.css" type="text/css" rel="stylesheet">
   <link href="css/test.css" type="text/css" rel="stylesheet">
@@ -143,22 +143,76 @@
   })
 </script>
 
-<!-- baiduTemplate-->
+<!-- ejs-->
+<style type="text/css">
+  /*  分页*/
+  .m-Pagination {
+    margin-top: 20px;
+    display: inline-block;
+    height: 28px;
+    line-height: 28px;
+    border: 1px solid #d1dbe5;
+    font-size: 0;
+  }
+  .m-Pagination a {
+    display: inline-block;
+    width: 28px;
+    height: 28px;
+    text-align: center;
+    font-size: 13px;
+    border-right: 1px solid #d1dbe5;
+    background-color: #fff;
+    color: #48576a;
+  }
+  .m-Pagination a:hover {
+    color: #20a0ff;
+  }
+  .m-Pagination a:last-child {
+    border-right: none;
+  }
+  .m-Pagination a.active {
+    background-color: #20a0ff;
+    color: #fff;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+</style>
 <script id='j-tpl' type="text/html">
   <$for(var i = 0; i < data.length; i++){$>
   <p title="<$=data[i].b$>"><$=data[i].a$></p>
   <$}$>
   <p><$=info$></p>
+
+  <!-- 分页  -->
+  <$if(totalPage > 1){$>
+  <nav class="m-Pagination">
+    <$for(var i = 1; i <= totalPage; i++){$>
+    <$if(page === i){$>
+    <a class="active"><$=i$></a>
+    <$}else{$>
+    <a href="/?page=<$=i$>" data-page="<$=i$>"><$=i$></a>
+    <$}$>
+    <$}$>
+  </nav>
+  <$}$>
 </script>
 <script type="text/javascript" src="js/ejs.min.js"></script>
 <script>
+  /* 分页 */
+  var SIZE = 20
+
+  var page = 1
+  var total = 30
+
   // 当模版的分隔符和其他模板引擎冲突时，可以自定义分隔符
   console.log(
     ejs.render(
       document.getElementById('j-tpl').innerText, // <script>：innerText和innerHTML返回一致；jQuery的.text()和.html(）返回一致
       {
         data: [{ a: 'ejs1', b: '1' }, { a: 'ejs2', b: '2' }],
-        info: '例子'
+        info: '例子',
+        page: page,
+        totalPage: Math.ceil(total / SIZE)
       },
       {
         delimiter: '$', // 调整开启渲染的字符串

diff --git a/applets/template/wap/index.html b/applets/template/wap/index.html
@@ -8,7 +8,7 @@
     <meta name="format-detection" content="telephone=no,email=no,address=no">
     <meta name="keywords" content="">
     <meta name="description" content="">
-    <link rel="shortcut icon" type="image/ico" href="../../../favicon.ico">
+    <link rel="icon" type="image/png" href="../../../favicon.png">
     <title>wap模板</title>
     <link href="../../../css/wap.css" type="text/css" rel="stylesheet">
     <link href="css/index.css" type="text/css" rel="stylesheet">

diff --git a/css/wap.css b/css/wap.css
@@ -8,7 +8,7 @@ h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:500;}
 a,ins {text-decoration:none;}
 a {background-color:transparent;}
 a:active,a:hover {outline-width:0;}
-audio,canvas,video,progress {display:inline-block;*display:inline;*zoom:1;}
+audio,canvas,video,progress {display:inline-block;}
 article,aside,details,figcaption,figure,footer,header,menu,nav,section,iframe,main {display:block;}
 summary {display:list-item;}
 template,[hidden] {display:none;}

diff --git a/favicon.ico b/favicon.ico
diff --git a/favicon.png b/favicon.png
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
     <meta name="format-detection" content="telephone=no,email=no,address=no">
     <meta name="keywords" content="">
     <meta name="description" content="">
-    <link rel="shortcut icon" type="image/ico" href="favicon.ico">
+    <link rel="icon" type="image/png" href="favicon.png">
     <title>某一个前端工程师</title>
     <link href="css/wap.css" type="text/css" rel="stylesheet">
     <style>
@@ -85,6 +85,8 @@
 <a href="applets/demo/index.html">组件模块</a>
 <a href="applets/template/initialization/home.html">js初始化模板</a>
 <a href="applets/template/wap/index.html">公司wap模板</a>
+<a href="https://realgeoffrey.github.io/knowledge/" style="text-align: right">knowledge仓库</a>
+<a href="https://realgeoffrey.github.io/npm-devil/" style="text-align: right">npm-devil仓库</a>
 
 <!-- 视差插件-->
 <ul class="m-parallax" id="j-parallax">