page

gulpfile.js/index.js

@@ -16,7 +16,7 @@ let isProd = process.env.NODE_ENV === "production"
 
 let distPath = isProd?"dist":"node_modules/.gcache"
 
-let pageName = "about"
+let pageName = "index"
 
 /**
  * 删除输出文件夹目录

src/common/style.less

@@ -17,4 +17,115 @@ body{
   width: 700px;
 }
 
+/**
+* 用户头像
+**/
+.userProfile{
+  display: flex;
+  align-items: center;
+  height: 100px;
+  width: 300px;
+  font-size: 2.0833em;
+  line-height: 1.3;
+  .head{
+      width: 100px;
+      height: 100%;
+      position: relative;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      .avatar{
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          border-radius: 50%;
+          overflow: hidden;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          top: 0;
+          transition: transform .6s linear, left .6s linear;
+      }
+      &:hover .avatar{
+          transform: rotate(-360deg);
+          left: -105%;
+      }
+  }
+  .text{
+      flex: 1;
+      width: 0;
+      margin-left: 10px;
+      .userName{
+          font-size: 1em;
+      }
+      .userDesc{
+          margin-top: 4px;
+          font-size: .7em;
+      }
+  }
+}
+
+/**
+* 用户头像End
+**/
+.mb{
+  margin-bottom: 20px;
+}
+header{
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  font-size: 1.333em;
+  background-color: #fffef870;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  margin-bottom: 15px;
+  padding: 0 30px;
+  height: 35px;
+  line-height: 35px;
+  .item{
+      color: inherit;
+      text-decoration: none;
+      cursor: pointer;
+      display: inline-block;
+      height: 100%;
+      padding: 0 10px;
+      &:hover{
+          background-color: #fffef870;
+      } 
+  }
+  .menulist{
+      li{
+          float: left;
+      }
+  }
+  .oplist{
+      li{
+          float: right;
+      }
+  }
+}
+
 
+.line{
+  height: 15px;
+  width: 200px;
+  margin: 0 auto;
+  cursor: pointer;
+  &:hover{
+      height: 15px;
+      &::after{
+          height: 15px;
+      }
+  }
+  &::after{
+      content: "";
+      height: 5px;
+      display: block;
+      border-radius: 6px;
+      background-color: #fffef870;
+      transition: height .4s ease;
+  }
+}

src/css/index/index.less

@@ -1,90 +1,4 @@
 
-/**
-* 用户头像
-**/
-.userProfile{
-    display: flex;
-    align-items: center;
-    height: 100px;
-    width: 300px;
-    font-size: 2.0833em;
-    line-height: 1.3;
-    .head{
-        width: 100px;
-        height: 100%;
-        position: relative;
-        text-align: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        .avatar{
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            border-radius: 50%;
-            overflow: hidden;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            top: 0;
-            transition: transform .6s linear, left .6s linear;
-        }
-        &:hover .avatar{
-            transform: rotate(-360deg);
-            left: -105%;
-        }
-    }
-    .text{
-        flex: 1;
-        width: 0;
-        margin-left: 10px;
-        .userName{
-            font-size: 1em;
-        }
-        .userDesc{
-            margin-top: 4px;
-            font-size: .7em;
-        }
-    }
-}
-
-/**
-* 用户头像End
-**/
-.mb{
-    margin-bottom: 20px;
-}
-header{
-    position: sticky;
-    top: 0;
-    z-index: 999;
-    font-size: 1.333em;
-    background-color: #fffef870;
-    border-bottom-left-radius: 6px;
-    border-bottom-right-radius: 6px;
-    margin-bottom: 15px;
-    padding: 0 30px;
-    height: 35px;
-    line-height: 35px;
-    .item{
-        cursor: pointer;
-        padding: 0 10px;
-        &:hover{
-            background-color: #fffef870;
-        } 
-    }
-    .menulist{
-        li{
-            float: left;
-        }
-    }
-    .oplist{
-        li{
-            float: right;
-        }
-    }
-}
 
 .panel{
     // background-color: #fffef870;
@@ -135,23 +49,7 @@ header{
     }
 }
 
-.line{
+.motto{
-    height: 15px;
+  text-align: center;
-    width: 200px;
+  font-size: 20px;
-    margin: 0 auto;
-    cursor: pointer;
-    &:hover{
-        height: 15px;
-        &::after{
-            height: 15px;
-        }
-    }
-    &::after{
-        content: "";
-        height: 5px;
-        display: block;
-        border-radius: 6px;
-        background-color: #fffef870;
-        transition: height .4s ease;
-    }
 }

src/html/__include/header.pug

@@ -0,0 +1,18 @@
+- 
+  var menulist = [
+    {text: "首页", path: "#"},
+    {text: "归档", path: "#"},
+    {text: "关于", path: "/about"},
+  ];
+  var oplist = [
+    {text: "注册/登录", path: "/login", id: "loginbtn"}
+  ];
+header.clearfix.mb
+  ul.menulist
+    for menu in menulist
+      li
+        a.item(href=menu.path,id=menu.id)=  menu.text
+  ul.oplist
+    for op in oplist
+      li
+        a.item(href=op.path,id=op.id)= op.text

src/html/__include/person.pug

@@ -1,6 +1,7 @@
 .userProfile.mb
-      .head 无极 
+  - var avatarURL = "https://cdn.pixabay.com/photo/2021/06/22/14/55/girl-6356393_960_720.jpg"
-        img(src=avatarURL, alt="topuser", srcset="").avatar
+  .head XYX 
-      .text 
+    img(src=avatarURL, alt="topuser", srcset="").avatar
-        .userName 龙门客栈
+  .text 
-        .userDesc.over-ellipsis 白龙马，蹄儿朝西
+    .userName 温小鱼
+    .userDesc.over-ellipsis 红尘一剑，骑马远游。

src/html/__layout/layout.pug

@@ -2,7 +2,7 @@ doctype html
 html(lang="zh-cn")
   head
     block title
-    title 我的站点 - #{title}
+    title #{title}
     include ../__include/head.pug
     block head
   body

src/html/detail.pug

@@ -0,0 +1,23 @@
+//- 继承布局
+extends __layout/layout.pug
+
+block title
+  - var title = "过往"
+
+block content
+  - var content = `先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
+  -    宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
+  -    侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
+  -    将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
+  -    亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。
+  -    臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。
+  -    先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝`
+  .container.page
+    include __include/header
+    include __include/person
+    .line
+    .panel
+      h1 出师表
+      span.author 诸葛亮
+      .content!= content
+      .float 订阅

src/html/index.pug

@@ -2,36 +2,11 @@
 extends __layout/layout.pug
 
 block title
-  - var title = "哈哈"
+  - var title = "今生今世"
 
 block content
-  - var avatarURL = "https://cdn.pixabay.com/photo/2021/06/22/14/55/girl-6356393_960_720.jpg"
-  - var content = `先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
-  -    宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
-  -    侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
-  -    将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
-  -    亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。
-  -    臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。
-  -    先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝`
-  - var menulist = ["首页", "文档", "归档", "关于"];
-  - var oplist = ["注册/登陆"];
   .container.page
-    header.clearfix.mb
+    include __include/header
-      ul.menulist
+    include __include/person
-        for menu in menulist
+    .line 
-          li.item=  menu
+    .motto 衣带渐宽终不悔
-      ul.oplist
-        for op in oplist
-          li.item= op
-    .userProfile.mb
-      .head 无极 
-        img(src=avatarURL, alt="topuser", srcset="").avatar
-      .text 
-        .userName 龙门客栈
-        .userDesc.over-ellipsis 白龙马，蹄儿朝西
-    .line
-    .panel
-      h1 出师表
-      span.author 诸葛亮
-      .content!= content
-      .float 订阅