update background and make display on mobile devices better.

package-lock.json

@@ -19,7 +19,7 @@
         "vue": "^3.2.28",
         "vue-axios": "^3.2.4",
         "vue-router": "^4.0.0-0",
-        "vue3-social-share": "^0.1.0",
+        "vue3-social-share": "^0.1.3",
         "vuex": "^4.0.0-0"
       },
       "devDependencies": {
@@ -11704,9 +11704,9 @@
       "dev": true
     },
     "node_modules/vue3-social-share": {
-      "version": "0.1.0",
+      "version": "0.1.3",
-      "resolved": "https://registry.npmmirror.com/vue3-social-share/download/vue3-social-share-0.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/vue3-social-share/-/vue3-social-share-0.1.3.tgz",
-      "integrity": "sha512-yIzj3COJOkVPe8InF7sQiKzOP0u7q1KJZRI/aZKiNkAfSZOGScw+gDHy4X+y1C58dXCT5Q+jn4YFholwflJgeQ==",
+      "integrity": "sha512-yKct2dQTlnRf3NMo0cP1GWUlR8P/TeKoBlQWTOLf+qN2lrEf9vQsBS6Ntf8vKCxf2+nWQANywEyRGkhoyYfG4w==",
       "dependencies": {
         "core-js": "^3.6.5",
         "qrcodejs2": "^0.0.2",
@@ -22399,9 +22399,9 @@
       "dev": true
     },
     "vue3-social-share": {
-      "version": "0.1.0",
+      "version": "0.1.3",
-      "resolved": "https://registry.npmmirror.com/vue3-social-share/download/vue3-social-share-0.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/vue3-social-share/-/vue3-social-share-0.1.3.tgz",
-      "integrity": "sha512-yIzj3COJOkVPe8InF7sQiKzOP0u7q1KJZRI/aZKiNkAfSZOGScw+gDHy4X+y1C58dXCT5Q+jn4YFholwflJgeQ==",
+      "integrity": "sha512-yKct2dQTlnRf3NMo0cP1GWUlR8P/TeKoBlQWTOLf+qN2lrEf9vQsBS6Ntf8vKCxf2+nWQANywEyRGkhoyYfG4w==",
       "requires": {
         "core-js": "^3.6.5",
         "qrcodejs2": "^0.0.2",

package.json

@@ -18,7 +18,7 @@
     "vue": "^3.2.28",
     "vue-axios": "^3.2.4",
     "vue-router": "^4.0.0-0",
-    "vue3-social-share": "^0.1.0",
+    "vue3-social-share": "^0.1.3",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {

public/index.html

@@ -4,6 +4,8 @@
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width,initial-scale=1.0">
+      <meta data-n-head="1" data-hid="description" name="description" content="">
+      <meta data-n-head="1" data-hid="keywords" name="keywords" content="">
       <link rel="icon" href="<%= BASE_URL %>favicon.ico">
       <title>PeterAlbus的博客</title>
   </head>

src/components/Footer.vue

@@ -8,12 +8,26 @@
               </a>
             </div>
     </div>
+    <div style="height: 61px" v-if="screenWidth<600"></div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "Footer"
+  name: "Footer",
+  mounted() {
+    window.addEventListener('resize',this.resize)
+  },
+  data () {
+    return {
+      screenWidth: document.body.clientWidth
+    }
+  },
+  methods: {
+    resize(){
+      this.screenWidth = document.body.clientWidth
+    }
+  }
 }
 </script>
 

src/components/TopNavBar.vue

@@ -1,8 +1,14 @@
 <template>
   <div class="navbar" >
-    <el-menu active-text-color="#4B6186" text-color="#FFFFFF" id="navid" class="nav" mode="horizontal" :router="true">
+    <el-menu active-text-color="#326139" text-color="#FFFFFF" id="navid" class="nav" mode="horizontal" :router="true">
-      <div class="nav-title">PeterAlbus的博客</div>
+      <el-menu-item
-      <!--大屏幕导航栏-->
+          v-if="screenWidth>=600"
+          class="nav-title"
+          style="font-size: large"
+          index="0"
+          route="/"
+      >PeterAlbus的博客</el-menu-item>
+      <div style="display: flex;justify-content: right">
         <el-menu-item
             v-if="screenWidth>=600"
             class="nav-item"
@@ -27,39 +33,37 @@
             route="/photo"
             index="5"
         ><i class="el-icon-picture-outline"></i>照片墙</el-menu-item>
-      <!--小屏幕导航栏-->
+      </div>
-      <el-sub-menu
-          class="nav-item"
-          v-if="screenWidth<600"
-          index="10"
-          popper-class="submenu"
-      >
-        <template #title>
-          <i class="el-icon-s-fold" style="font-size:28px;color:#ffffff;"></i>
-        </template>
-        <el-menu-item
-            class="nav-menu"
-            route="/"
-            index="1"
-        ><i class="el-icon-s-home"></i>主页</el-menu-item>
-        <el-menu-item
-            class="nav-menu"
-            route="/types"
-            index="2"
-        ><i class="el-icon-menu"></i>分类</el-menu-item>
-        <el-menu-item
-            class="nav-menu"
-            route="/about"
-            index="4"
-        ><i class="el-icon-user"></i>关于我</el-menu-item>
-        <el-menu-item
-            class="nav-menu"
-            route="/photo"
-            index="5"
-        ><i class="el-icon-picture-outline"></i>照片墙</el-menu-item>
-      </el-sub-menu>
     </el-menu>
   </div>
+  <div class="navbar-bottom" v-if="screenWidth<600">
+    <el-row class="navbar-bottom-list">
+      <el-col :span="6" class="navbar-bottom-item">
+        <router-link to="/" active-class="active-item">
+          <p><i class="el-icon-s-home navbar-bottom-icon"></i></p>
+          <span class="navbar-bottom-text">主页</span>
+        </router-link>
+      </el-col>
+      <el-col :span="6" class="navbar-bottom-item">
+        <router-link to="/types" active-class="active-item">
+          <p><i class="el-icon-menu navbar-bottom-icon"></i></p>
+          <span class="navbar-bottom-text">分类</span>
+        </router-link>
+      </el-col>
+      <el-col :span="6" class="navbar-bottom-item">
+        <router-link to="/about" active-class="active-item">
+          <p><i class="el-icon-user navbar-bottom-icon"></i></p>
+          <span class="navbar-bottom-text">关于我</span>
+        </router-link>
+      </el-col>
+      <el-col :span="6" class="navbar-bottom-item">
+        <router-link to="/photo" active-class="active-item">
+          <p><i class="el-icon-picture-outline navbar-bottom-icon"></i></p>
+          <span class="navbar-bottom-text">照片墙</span>
+        </router-link>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
@@ -68,8 +72,8 @@ export default {
   created () {
   },
   mounted () {
-    window.addEventListener('scroll', this.scroll)
+    // window.addEventListener('scroll', this.scroll)
-    window.onresize = () => {this.screenWidth = document.body.clientWidth}
+    window.addEventListener('resize',this.resize)
   },
   data () {
     return {
@@ -83,29 +87,12 @@ export default {
     }
   },
   methods: {
-    scroll () {
+    resize(){
-      const that = this
+      this.screenWidth = document.body.clientWidth
-      // const scrollTop =
-      //     window.pageYOffset ||
-      //     document.documentElement.scrollTop ||
-      //     document.body.scrollTop
-      that.scrollTop = window.pageYOffset ||
-          document.documentElement.scrollTop ||
-          document.body.scrollTop
-      if (that.scrollTop > 60) {
-        that.navClass = 'nav-fixed'
-      } else {
-        that.navClass = 'nav'
     }
   },
-  },
   computed:{
-    leftNavItems: function() {
+
-      return this.screenWidth >= 600 ? this.navItems : {};
-    },
-    rightNavItems: function() {
-      return this.screenWidth < 600 ? this.navItems : {};
-    }
   }
 }
 </script>
@@ -119,15 +106,57 @@ export default {
   height:10px; /* 高度 */
   z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
 }
+
+.navbar-bottom{
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
+
+  background-color: #ffffff;
+  box-shadow: 0 -1px 12px hsla(174, 63%, 15%, 0.15);
+  width: 100%;
+  height: 4rem;
+  padding: 0;
+  display: grid;
+  align-content: center;
+
+  transition: .4s;;
+}
+
+.navbar-bottom-list a{
+  color: #326139;
+}
+
+.navbar-bottom-item{
+  display: inline-block;
+  text-align: center;
+}
+
+.navbar-bottom-icon{
+  font-size: large;
+}
+
+.navbar-bottom-text{
+  font-size: small;
+}
+
+.active-item{
+  position: relative;
+  color: #60638E !important;
+  transition: .3s;
+}
+
 .nav{
-  justify-content: right;
+  justify-content: space-between;
   background: rgba(0, 0, 0, 0.5) !important;
   box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
 }
 
 .nav-item{
   height: 100%;
-  line-height: 50px;
+  line-height: 60px;
   margin-right: 20px;
   background: rgba(0, 0, 0, 0) !important;
 }
@@ -141,13 +170,13 @@ export default {
 }
 
 .nav-title{
-  float: left;
   height: 100%;
-  left: 30px;
+  margin: 0;
-  position: absolute;
-  margin: auto;
   color:white;
   line-height: 60px;
+  z-index: 100;
+  font-size: large;
+  background: rgba(0, 0, 0, 0) !important;
 }
 </style>
 

src/router/index.js

@@ -13,47 +13,110 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
+    meta:{
+      title:'主页——PeterAlbus的博客',
+      content:{
+        keywords:'PeterAlbus,Vue',
+        description:'PeterAlbus的博客主页'
+      }
+    }
   },
   {
     path: '/blog',
     name: 'Blog',
-    component: Blog
+    component: Blog,
+    meta:{
+      title:'博文——PeterAlbus的博客',
+      content:{
+        keywords:'PeterAlbus,Vue',
+        description:'PeterAlbus的博客博文页'
+      }
+    }
   },
   {
     path: '/about',
     name: 'About',
-    component: About
+    component: About,
+    meta:{
+      title:'关于我——PeterAlbus的博客',
+      content:{
+        keywords:'PeterAlbus,Vue',
+        description:'PeterAlbus的个人介绍'
+      }
+    }
   },
   {
     path: '/document',
     name: 'Document',
-    component: Document
+    component: Document,
+    meta:{
+      title:'归档——PeterAlbus的博客',
+      content:{
+        keywords:'PeterAlbus,Vue',
+        description:'PeterAlbus的博客归档页'
+      }
+    }
   },
   {
     path: '/photo',
     name: 'Photo',
-    component: Photo
+    component: Photo,
+    meta:{
+      title:'照片墙——PeterAlbus的博客',
+      content:{
+        keywords:'PeterAlbus,Vue',
+        description:'PeterAlbus的照片墙'
+      }
+    }
   },
   {
     path: '/types',
     name: 'Types',
-    component: Types
+    component: Types,
+    meta:{
+      title:'分类查看——PeterAlbus的博客',
+      content:{
+        keywords:'PeterAlbus,Vue',
+        description:'PeterAlbus的博客列表'
+      }
+    }
   },
   {
     path: '/editBlog',
     name: 'EditBlog',
-    component: EditBlog
+    component: EditBlog,
+    meta:{
+      title:'编辑/创建博客——PeterAlbus的博客',
+      content:{
+        keywords:'PeterAlbus,Vue',
+        description:'PeterAlbus的博客编辑页'
+      }
+    }
   },
   {
     path: '/uploadPhoto',
     name: 'UploadPhoto',
-    component: UploadPhoto
+    component: UploadPhoto,
+    meta:{
+      title:'上传照片——PeterAlbus的博客',
+      content:{
+        keywords:'PeterAlbus,Vue',
+        description:'PeterAlbus的博客'
+      }
+    }
   },
   {
     path: '/addFriendLink',
     name: 'AddFriendLink',
-    component: AddFriendLink
+    component: AddFriendLink,
+    meta:{
+      title:'添加友情链接——PeterAlbus的博客',
+      content:{
+        keywords:'PeterAlbus,Vue',
+        description:'PeterAlbus的博客'
+      }
+    }
   }
 ]
 
@@ -62,4 +125,15 @@ const router = createRouter({
   routes
 })
 
+router.beforeEach((to, from, next)=>{
+  if(to.meta.content) {     //路由发生变化时候修改meta中的content
+    document.querySelector('meta[name="keywords"]').setAttribute('content',to.meta.content.keywords)
+    document.querySelector('meta[name="description"]').setAttribute('content',to.meta.content.description)
+  }
+  if(to.meta.title) {   //路由发生变化时候修改页面中的title
+    document.title = to.meta.title
+  }
+  next()
+})
+
 export default router

src/views/About.vue

@@ -96,7 +96,7 @@ export default {
   left: 0;
   right: 0;
   height: 30vh;
-  background: url("../assets/background.jpg") no-repeat fixed center center;
+  background: url("../assets/background.jpg") fixed center center;
   text-align: center;
   color: #fff !important;
 }

src/views/AddFriendLink.vue

@@ -111,7 +111,7 @@ export default {
   left: 0;
   right: 0;
   height: 30vh;
-  background: url("../assets/background.jpg") no-repeat fixed center center;
+  background: url("../assets/background.jpg") fixed center center;
   text-align: center;
   color: #fff !important;
 }

src/views/Blog.vue

@@ -106,6 +106,8 @@ export default {
               that.blog=res.data;
               that.blog.blogViews+=1;
               that.$axios.post('/update',that.$qs.stringify(that.blog));
+              document.title = that.blog.blogTitle+'——PeterAlbus的博客'
+              document.querySelector('meta[name="description"]').setAttribute('content',that.blog.blogDescription)
             })
       }
     },
@@ -127,7 +129,7 @@ export default {
   left: 0;
   right: 0;
   height: 30vh;
-  background: url("../assets/background.jpg") no-repeat fixed center center;
+  background: url("../assets/background.jpg") fixed center center;
   text-align: center;
   color: #fff !important;
 }

src/views/Document.vue

@@ -21,7 +21,7 @@ export default {
   left: 0;
   right: 0;
   height: 30vh;
-  background: url("../assets/background.jpg") no-repeat fixed center center;
+  background: url("../assets/background.jpg") fixed center center;
   text-align: center;
   color: #fff !important;
 }

src/views/EditBlog.vue

@@ -202,7 +202,7 @@ export default {
   left: 0;
   right: 0;
   height: 30vh;
-  background: url("../assets/background.jpg") no-repeat fixed center center;
+  background: url("../assets/background.jpg") fixed center center;
   text-align: center;
   color: #fff !important;
 }

src/views/Home.vue

@@ -188,7 +188,7 @@ export default {
   left: 0;
   right: 0;
   height: 100vh;
-  background: url("../assets/background.jpg") no-repeat fixed center center;
+  background: url("../assets/background1.jpg") fixed center center;
   text-align: center;
   color: #fff !important;
   animation: header-effect 1s !important;

src/views/Photo.vue

@@ -194,7 +194,7 @@ export default {
   left: 0;
   right: 0;
   height: 30vh;
-  background: url("../assets/background.jpg") no-repeat fixed center center;
+  background: url("../assets/background.jpg") fixed center center;
   text-align: center;
   color: #fff !important;
 }

src/views/Types.vue

@@ -44,13 +44,20 @@
           </el-row>
         </el-card>
         <div style="background-color: white">
-          <el-pagination
+          <el-pagination v-if="screenWidth>=600"
               layout="total, sizes, prev, pager, next, jumper"
               :page-sizes="[5,10,20]"
               v-model:current-page="currentPage"
               v-model:page-size="pageSize"
               :total="selectedBlogs.length">
           </el-pagination>
+          <el-pagination v-if="screenWidth<600"
+                         layout="prev, pager, next"
+                         :page-sizes="[5,10,20]"
+                         v-model:current-page="currentPage"
+                         v-model:page-size="pageSize"
+                         :total="selectedBlogs.length">
+          </el-pagination>
         </div>
       </div>
     </el-col>
@@ -91,6 +98,7 @@ export default {
   name: "Types",
   data(){
     return {
+      screenWidth: document.body.clientWidth,
       selectType:1,
       currentPage:1,
       pageSize:10,
@@ -121,8 +129,12 @@ export default {
   created() {
     this.getBlogList()
     this.getFriendLinkList()
+    window.addEventListener('resize',this.resize)
   },
   methods:{
+    resize(){
+      this.screenWidth = document.body.clientWidth
+    },
     getBlogList: function (){
       let that=this;
       that.$axios.get('queryAll')
@@ -171,7 +183,7 @@ export default {
   left: 0;
   right: 0;
   height: 30vh;
-  background: url("../assets/background.jpg") no-repeat fixed center center;
+  background: url("../assets/background.jpg") fixed center center;
   text-align: center;
   color: #fff !important;
 }

src/views/UploadPhoto.vue

@@ -96,7 +96,7 @@ export default {
   left: 0;
   right: 0;
   height: 30vh;
-  background: url("../assets/background.jpg") no-repeat fixed center center;
+  background: url("../assets/background.jpg") fixed center center;
   text-align: center;
   color: #fff !important;
 }

vue.config.js

@@ -1,5 +1,7 @@
 module.exports = {
     devServer: {
-        port: 80 //修改服务端口号
+        port: 80, //修改服务端口号
+
+        public: require('os').networkInterfaces()[Object.keys(require('os').networkInterfaces())[0]][1].address + ':80',
     },
 }