PeterAlbus
/
PeterAlbus_Blog
mirror of https://github.com/PeterAlbus/PeterAlbus_Blog.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update background and make display on mobile devices better.

Browse Source
pangu
PeterAlbus 3 years ago
parent 78b3fb4441
commit f6650092ab
18 changed files with 236 additions and 101 deletions
Show Stats Download Patch File Download Diff File

14
package-lock.json generated
Unescape Escape View File

@ -19,7 +19,7 @@
"vue": "^3.2.28", "vue": "^3.2.28",
"vue-axios": "^3.2.4", "vue-axios": "^3.2.4",
"vue-router": "^4.0.0-0", "vue-router": "^4.0.0-0",
"vue3-social-share": "^0.1.0", "vue3-social-share": "^0.1.3",
"vuex": "^4.0.0-0" "vuex": "^4.0.0-0"
}, },
"devDependencies": { "devDependencies": {
@ -11704,9 +11704,9 @@
"dev": true "dev": true
}, },
"node_modules/vue3-social-share": { "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": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"qrcodejs2": "^0.0.2", "qrcodejs2": "^0.0.2",
@ -22399,9 +22399,9 @@
"dev": true "dev": true
}, },
"vue3-social-share": { "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": { "requires": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"qrcodejs2": "^0.0.2", "qrcodejs2": "^0.0.2",

2
package.json
Unescape Escape View File

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

2
public/index.html
Unescape Escape View File

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

BIN
src/assets/background1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 345 KiB

BIN
src/assets/background11.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

16
src/components/Footer.vue
Unescape Escape View File

@ -8,12 +8,26 @@
</a> </a>
</div> </div>
</div> </div>
<div style="height: 61px" v-if="screenWidth<600"></div>
</div> </div>
</template> </template>
<script> <script>
export default { 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> </script>

167
src/components/TopNavBar.vue
Unescape Escape View File

@ -1,65 +1,69 @@
<template> <template>
<div class="navbar"> <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 <el-menu-item
v-if="screenWidth>=600" v-if="screenWidth>=600"
class="nav-item" class="nav-title"
style="font-size: large"
index="0"
route="/" route="/"
index="1" >PeterAlbus的博客</el-menu-item>
><i class="el-icon-s-home"></i>主页</el-menu-item> <div style="display: flex;justify-content: right">
<el-menu-item
v-if="screenWidth>=600"
class="nav-item"
route="/types"
index="2"
><i class="el-icon-menu"></i>分类</el-menu-item>
<el-menu-item
v-if="screenWidth>=600"
class="nav-item"
route="/about"
index="4"
><i class="el-icon-user"></i>关于我</el-menu-item>
<el-menu-item
v-if="screenWidth>=600"
class="nav-item"
route="/photo"
index="5"
><i class="el-icon-picture-outline"></i>照片墙</el-menu-item>
<!--小屏幕导航栏-->
<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 <el-menu-item
class="nav-menu" v-if="screenWidth>=600"
class="nav-item"
route="/" route="/"
index="1" index="1"
><i class="el-icon-s-home"></i>主页</el-menu-item> ><i class="el-icon-s-home"></i>主页</el-menu-item>
<el-menu-item <el-menu-item
class="nav-menu" v-if="screenWidth>=600"
class="nav-item"
route="/types" route="/types"
index="2" index="2"
><i class="el-icon-menu"></i>分类</el-menu-item> ><i class="el-icon-menu"></i>分类</el-menu-item>
<el-menu-item <el-menu-item
class="nav-menu" v-if="screenWidth>=600"
class="nav-item"
route="/about" route="/about"
index="4" index="4"
><i class="el-icon-user"></i>关于我</el-menu-item> ><i class="el-icon-user"></i>关于我</el-menu-item>
<el-menu-item <el-menu-item
class="nav-menu" v-if="screenWidth>=600"
class="nav-item"
route="/photo" route="/photo"
index="5" index="5"
><i class="el-icon-picture-outline"></i>照片墙</el-menu-item> ><i class="el-icon-picture-outline"></i>照片墙</el-menu-item>
</el-sub-menu> </div>
</el-menu> </el-menu>
</div> </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> </template>
<script> <script>
@ -68,8 +72,8 @@ export default {
created () { created () {
}, },
mounted () { mounted () {
window.addEventListener('scroll', this.scroll) // window.addEventListener('scroll', this.scroll)
window.onresize = () => {this.screenWidth = document.body.clientWidth} window.addEventListener('resize',this.resize)
}, },
data () { data () {
return { return {
@ -83,29 +87,12 @@ export default {
} }
}, },
methods: { 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:{ computed:{
leftNavItems: function() {
return this.screenWidth >= 600 ? this.navItems : {};
},
rightNavItems: function() {
return this.screenWidth < 600 ? this.navItems : {};
}
} }
} }
</script> </script>
@ -119,15 +106,57 @@ export default {
height:10px; /* 高度 */ height:10px; /* 高度 */
z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */ 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{ .nav{
justify-content: right; justify-content: space-between;
background: rgba(0, 0, 0, 0.5) !important; background: rgba(0, 0, 0, 0.5) !important;
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3); box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
} }
.nav-item{ .nav-item{
height: 100%; height: 100%;
line-height: 50px; line-height: 60px;
margin-right: 20px; margin-right: 20px;
background: rgba(0, 0, 0, 0) !important; background: rgba(0, 0, 0, 0) !important;
} }
@ -141,13 +170,13 @@ export default {
} }
.nav-title{ .nav-title{
float: left;
height: 100%; height: 100%;
left: 30px; margin: 0;
position: absolute;
margin: auto;
color:white; color:white;
line-height: 60px; line-height: 60px;
z-index: 100;
font-size: large;
background: rgba(0, 0, 0, 0) !important;
} }
</style> </style>

92
src/router/index.js
Unescape Escape View File

@ -13,47 +13,110 @@ const routes = [
{ {
path: '/', path: '/',
name: 'Home', name: 'Home',
component: Home component: Home,
meta:{
title:'主页——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客主页'
}
}
}, },
{ {
path: '/blog', path: '/blog',
name: 'Blog', name: 'Blog',
component: Blog component: Blog,
meta:{
title:'博文——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客博文页'
}
}
}, },
{ {
path: '/about', path: '/about',
name: 'About', name: 'About',
component: About component: About,
meta:{
title:'关于我——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的个人介绍'
}
}
}, },
{ {
path: '/document', path: '/document',
name: 'Document', name: 'Document',
component: Document component: Document,
meta:{
title:'归档——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客归档页'
}
}
}, },
{ {
path: '/photo', path: '/photo',
name: 'Photo', name: 'Photo',
component: Photo component: Photo,
meta:{
title:'照片墙——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的照片墙'
}
}
}, },
{ {
path: '/types', path: '/types',
name: 'Types', name: 'Types',
component: Types component: Types,
meta:{
title:'分类查看——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客列表'
}
}
}, },
{ {
path: '/editBlog', path: '/editBlog',
name: 'EditBlog', name: 'EditBlog',
component: EditBlog component: EditBlog,
meta:{
title:'编辑/创建博客——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客编辑页'
}
}
}, },
{ {
path: '/uploadPhoto', path: '/uploadPhoto',
name: 'UploadPhoto', name: 'UploadPhoto',
component: UploadPhoto component: UploadPhoto,
meta:{
title:'上传照片——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客'
}
}
}, },
{ {
path: '/addFriendLink', path: '/addFriendLink',
name: 'AddFriendLink', name: 'AddFriendLink',
component: AddFriendLink component: AddFriendLink,
meta:{
title:'添加友情链接——PeterAlbus的博客',
content:{
keywords:'PeterAlbus,Vue',
description:'PeterAlbus的博客'
}
}
} }
] ]
@ -62,4 +125,15 @@ const router = createRouter({
routes 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 export default router

2
src/views/About.vue
Unescape Escape View File

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

2
src/views/AddFriendLink.vue
Unescape Escape View File

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

4
src/views/Blog.vue
Unescape Escape View File

@ -106,6 +106,8 @@ export default {
that.blog=res.data; that.blog=res.data;
that.blog.blogViews+=1; that.blog.blogViews+=1;
that.$axios.post('/update',that.$qs.stringify(that.blog)); 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; left: 0;
right: 0; right: 0;
height: 30vh; height: 30vh;
background: url("../assets/background.jpg") no-repeat fixed center center; background: url("../assets/background.jpg") fixed center center;
text-align: center; text-align: center;
color: #fff !important; color: #fff !important;
} }

2
src/views/Document.vue
Unescape Escape View File

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

2
src/views/EditBlog.vue
Unescape Escape View File

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

2
src/views/Home.vue
Unescape Escape View File

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

2
src/views/Photo.vue
Unescape Escape View File

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

16
src/views/Types.vue
Unescape Escape View File

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

2
src/views/UploadPhoto.vue
Unescape Escape View File

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

4
vue.config.js
Unescape Escape View File

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