diff --git a/package-lock.json b/package-lock.json index 1414302..f814ba2 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmmirror.com/vue3-social-share/download/vue3-social-share-0.1.0.tgz", - "integrity": "sha512-yIzj3COJOkVPe8InF7sQiKzOP0u7q1KJZRI/aZKiNkAfSZOGScw+gDHy4X+y1C58dXCT5Q+jn4YFholwflJgeQ==", + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/vue3-social-share/-/vue3-social-share-0.1.3.tgz", + "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", - "resolved": "https://registry.npmmirror.com/vue3-social-share/download/vue3-social-share-0.1.0.tgz", - "integrity": "sha512-yIzj3COJOkVPe8InF7sQiKzOP0u7q1KJZRI/aZKiNkAfSZOGScw+gDHy4X+y1C58dXCT5Q+jn4YFholwflJgeQ==", + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/vue3-social-share/-/vue3-social-share-0.1.3.tgz", + "integrity": "sha512-yKct2dQTlnRf3NMo0cP1GWUlR8P/TeKoBlQWTOLf+qN2lrEf9vQsBS6Ntf8vKCxf2+nWQANywEyRGkhoyYfG4w==", "requires": { "core-js": "^3.6.5", "qrcodejs2": "^0.0.2", diff --git a/package.json b/package.json index 7eb5d4e..ad75248 100644 --- a/package.json +++ b/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": { diff --git a/public/index.html b/public/index.html index 23b21e4..070981b 100644 --- a/public/index.html +++ b/public/index.html @@ -4,6 +4,8 @@ + + PeterAlbus的博客 diff --git a/src/assets/background1.jpg b/src/assets/background1.jpg new file mode 100644 index 0000000..97b28f9 Binary files /dev/null and b/src/assets/background1.jpg differ diff --git a/src/assets/background11.jpg b/src/assets/background11.jpg new file mode 100644 index 0000000..7e575a3 Binary files /dev/null and b/src/assets/background11.jpg differ diff --git a/src/components/Footer.vue b/src/components/Footer.vue index e2dcb23..a76fde3 100644 --- a/src/components/Footer.vue +++ b/src/components/Footer.vue @@ -8,12 +8,26 @@ +
@@ -47,4 +61,4 @@ export default { overflow: hidden; padding: 30px 0; } - \ No newline at end of file + diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue index f550853..ed94a1d 100644 --- a/src/components/TopNavBar.vue +++ b/src/components/TopNavBar.vue @@ -1,65 +1,69 @@ @@ -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; - position: absolute; - margin: auto; + margin: 0; color:white; line-height: 60px; + z-index: 100; + font-size: large; + background: rgba(0, 0, 0, 0) !important; } diff --git a/src/router/index.js b/src/router/index.js index 085b5d3..44bf5d0 100644 --- a/src/router/index.js +++ b/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 diff --git a/src/views/About.vue b/src/views/About.vue index 49dae1f..55722df 100644 --- a/src/views/About.vue +++ b/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; } diff --git a/src/views/AddFriendLink.vue b/src/views/AddFriendLink.vue index 9f7464d..fd24b33 100644 --- a/src/views/AddFriendLink.vue +++ b/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; } diff --git a/src/views/Blog.vue b/src/views/Blog.vue index 77417d3..daa27ca 100644 --- a/src/views/Blog.vue +++ b/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; } diff --git a/src/views/Document.vue b/src/views/Document.vue index 02cb252..e4881bc 100644 --- a/src/views/Document.vue +++ b/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; } @@ -33,4 +33,4 @@ export default { line-height: 1.5; color: #eee; } - \ No newline at end of file + diff --git a/src/views/EditBlog.vue b/src/views/EditBlog.vue index b18b91f..d759f6a 100644 --- a/src/views/EditBlog.vue +++ b/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; } diff --git a/src/views/Home.vue b/src/views/Home.vue index ca584f2..04344fd 100644 --- a/src/views/Home.vue +++ b/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; diff --git a/src/views/Photo.vue b/src/views/Photo.vue index f449d30..265b92d 100644 --- a/src/views/Photo.vue +++ b/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; } diff --git a/src/views/Types.vue b/src/views/Types.vue index 15030a9..0ab988a 100644 --- a/src/views/Types.vue +++ b/src/views/Types.vue @@ -44,13 +44,20 @@
- + +
@@ -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; } diff --git a/src/views/UploadPhoto.vue b/src/views/UploadPhoto.vue index 29d4e11..2d38a46 100644 --- a/src/views/UploadPhoto.vue +++ b/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; } diff --git a/vue.config.js b/vue.config.js index 11e1014..3fd4836 100644 --- a/vue.config.js +++ b/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', }, -} \ No newline at end of file +}