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

add share

Browse Source
pangu
PeterAlbus 3 years ago
parent 58c64b5c51
commit 78b3fb4441
10 changed files with 505 additions and 578 deletions
Show Stats Download Patch File Download Diff File

830
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
Unescape Escape View File

@ -9,15 +9,16 @@
"dependencies": { "dependencies": {
"@kangc/v-md-editor": "^2.3.6", "@kangc/v-md-editor": "^2.3.6",
"axios": "^0.21.1", "axios": "^0.21.1",
"element-plus": "^1.0.2-beta.55", "element-plus": "^1.1.0-beta.9",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"highlight.js": "^11.1.0", "highlight.js": "^11.1.0",
"mavon-editor": "^2.9.1", "mavon-editor": "^2.9.1",
"prismjs": "^1.24.1", "prismjs": "^1.24.1",
"qs": "^6.5.2", "qs": "^6.5.2",
"vue": "^3.0.0", "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",
"vuex": "^4.0.0-0" "vuex": "^4.0.0-0"
}, },
"devDependencies": { "devDependencies": {

10
public/index.html
Unescape Escape View File

@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>PeterAlbus的博客</title> <title>PeterAlbus的博客</title>
</head> </head>
<body> <body>
<noscript> <noscript>

BIN
src/assets/2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 135 KiB

BIN
src/assets/2_original.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

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

@ -6,37 +6,32 @@
<el-menu-item <el-menu-item
v-if="screenWidth>=600" v-if="screenWidth>=600"
class="nav-item" class="nav-item"
style="float: right" route="/"
route="/photo" index="1"
index="5" ><i class="el-icon-s-home"></i>主页</el-menu-item>
><i class="el-icon-picture-outline"></i>照片墙</el-menu-item>
<el-menu-item
v-if="screenWidth>=600"
class="nav-item"
style="float: right"
route="/about"
index="4"
><i class="el-icon-user"></i>关于我</el-menu-item>
<el-menu-item <el-menu-item
v-if="screenWidth>=600" v-if="screenWidth>=600"
class="nav-item" class="nav-item"
style="float: right"
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
v-if="screenWidth>=600" v-if="screenWidth>=600"
class="nav-item" class="nav-item"
style="float: right" route="/about"
route="/" index="4"
index="1" ><i class="el-icon-user"></i>关于我</el-menu-item>
><i class="el-icon-s-home"></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-submenu <el-sub-menu
class="nav-item" class="nav-item"
v-if="screenWidth<600" v-if="screenWidth<600"
index="10" index="10"
style="float: right"
popper-class="submenu" popper-class="submenu"
> >
<template #title> <template #title>
@ -44,14 +39,9 @@
</template> </template>
<el-menu-item <el-menu-item
class="nav-menu" class="nav-menu"
route="/photo" route="/"
index="5" index="1"
><i class="el-icon-picture-outline"></i>照片墙</el-menu-item> ><i class="el-icon-s-home"></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 <el-menu-item
class="nav-menu" class="nav-menu"
route="/types" route="/types"
@ -59,10 +49,15 @@
><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" class="nav-menu"
route="/" route="/about"
index="1" index="4"
><i class="el-icon-s-home"></i>主页</el-menu-item> ><i class="el-icon-user"></i>关于我</el-menu-item>
</el-submenu> <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> </el-menu>
</div> </div>
</template> </template>
@ -125,12 +120,12 @@ export default {
z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */ z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
} }
.nav{ .nav{
justify-content: right;
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{
float: right;
height: 100%; height: 100%;
line-height: 50px; line-height: 50px;
margin-right: 20px; margin-right: 20px;

9
src/main.js
Unescape Escape View File

@ -9,15 +9,18 @@ import './assets/iconfont/iconfont.css'
import qs from 'qs' import qs from 'qs'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'; import 'element-plus/dist/index.css'
import VMdEditor from '@kangc/v-md-editor'; import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css'; import '@kangc/v-md-editor/lib/style/base-editor.css';
// 引入你所使用的主题 此处以 github 主题为例
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress'; import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'; import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from 'prismjs'; import Prism from 'prismjs';
import PeterAlbusVue from 'vue3-social-share';
import 'vue3-social-share/lib/index.css'
axios.defaults.withCredentials=false; axios.defaults.withCredentials=false;
axios.defaults.baseURL='https://www.peteralbus.com:8089/' axios.defaults.baseURL='https://www.peteralbus.com:8089/'
VMdEditor.use(vuepressTheme, { VMdEditor.use(vuepressTheme, {
@ -26,5 +29,5 @@ VMdEditor.use(vuepressTheme, {
const app=createApp(App) const app=createApp(App)
app.config.globalProperties.$axios=axios; app.config.globalProperties.$axios=axios;
app.config.globalProperties.$qs=qs; app.config.globalProperties.$qs=qs;
app.use(VueAxios,axios).use(store).use(router).use(ElementPlus).use(VMdEditor).mount('#app') app.use(VueAxios,axios).use(store).use(router).use(ElementPlus).use(VMdEditor).use(PeterAlbusVue).mount('#app')
app.config.devtools=true app.config.devtools=true

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

@ -20,10 +20,32 @@
</div> </div>
</el-col> </el-col>
<el-col :lg="{span:6}" :sm="9"> <el-col :lg="{span:6}" :sm="9">
<div class="module">
<div class="content paragraph">
<el-avatar :size="50" :src="require('../assets/2.png')"></el-avatar>
<h4>PeterAlbus</h4>
<el-tooltip class="item" effect="dark" content="发送电子邮件" placement="top">
<a href="mailto:wuhongdb@163.com">
<i class="fa fa-fw fa-envelope" style="font-size:20px"></i>
</a>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="github" placement="top">
<a href="https://github.com/PeterAlbus" target="_blank">
<i class="fa fa-fw fa-github" style="font-size:20px"></i>
</a>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="bilibili" placement="top">
<a href="https://space.bilibili.com/2003822" target="_blank">
<i class="iconfont icon-bilibili-line" style="font-size:20px"></i>
</a>
</el-tooltip>
</div>
</div>
<div class="module"> <div class="module">
<h2 class="title">友情链接</h2> <h2 class="title">友情链接</h2>
<div class="content"> <div class="content paragraph">
<a href="http://www.peteralbus.com:8088/" target="_blank">疫迹</a> <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -42,7 +64,26 @@ export default {
'我对于计算机相关内容都比较感兴趣。小站初建成，还十分简陋，会一步步添加新的功能。\n' + '我对于计算机相关内容都比较感兴趣。小站初建成，还十分简陋，会一步步添加新的功能。\n' +
'\n' + '\n' +
'<br>'+ '<br>'+
'欢迎通过电子邮箱:wuhongdb@163.com或 QQ:2997592724与我联系。' '欢迎通过电子邮箱:wuhongdb@163.com或 QQ:2997592724与我联系。',
friendLinkList:[
{
linkId:1,
linkName:'loading',
linkUrl:'#'
}
]
}
},
created() {
this.getFriendLinkList()
},
methods:{
getFriendLinkList: function (){
let that=this;
that.$axios.get('friendLink/getFriendLinkList')
.then(res=>{
that.friendLinkList=res.data;
})
} }
} }
} }
@ -68,20 +109,6 @@ export default {
color: #eee; color: #eee;
} }
.content {
position: relative;
margin-bottom: 1px;
padding: 6px 20px;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
.module{
position: relative;
margin: 0 auto;
width: 90%;
}
.blog-content{ .blog-content{
text-align: left; text-align: left;
} }
@ -96,19 +123,4 @@ export default {
font-size: 14px; font-size: 14px;
color: #4B6186; color: #4B6186;
} }
.title {
position: relative;
margin: 0;
padding: 6px 20px;
height: 20px;
border-bottom: 1px solid #eaeaea;
border-radius: 5px 5px 0 0;
background-color: #f7f7f7;
font-weight: 400;
font-size: 15px;
line-height: 20px;
text-align: left;
}
</style> </style>

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

@ -45,6 +45,20 @@
<p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p> <p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
</div> </div>
</div> </div>
<div class="module">
<h2 class="title">分享本页面</h2>
<div class="content paragraph">
<Share
:url="'https://www.peteralbus.com/%23/blog?id%3D'+blog.blogId"
:title="blog.blogTitle"
source="PeterAlbus的博客"
:description="blog.blogDescription"
:image="blog.blogImg"
:twitter="true"
:google="true"
></Share>
</div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>

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

@ -12,7 +12,7 @@
<el-col :lg="{span:11,offset:3}" :sm="15"> <el-col :lg="{span:11,offset:3}" :sm="15">
<el-row> <el-row>
<el-col :span="7"> <el-col :span="7">
<div class="photo" v-for="item in photoLeft"> <el-card class="photo" v-for="item in photoLeft" shadow="hover" :body-style="{ padding: '0px' }">
<a :href="item.imgSrc" target="_blank"> <a :href="item.imgSrc" target="_blank">
<el-image :src="item.imgThumb" style="width: 100%" fit="cover" lazy> <el-image :src="item.imgThumb" style="width: 100%" fit="cover" lazy>
<template #placeholder> <template #placeholder>
@ -21,12 +21,12 @@
</div> </div>
</template> </template>
</el-image> </el-image>
<span>{{item.imgName}}</span> <span class="paragraph">{{item.imgName}}</span>
</a> </a>
</div> </el-card>
</el-col> </el-col>
<el-col :span="7" :offset="1"> <el-col :span="7" :offset="1">
<div class="photo" v-for="item in photoMid"> <el-card class="photo" v-for="item in photoMid" shadow="hover" :body-style="{ padding: '0px' }">
<a :href="item.imgSrc" target="_blank"> <a :href="item.imgSrc" target="_blank">
<el-image :src="item.imgThumb" style="width: 100%" fit="cover" lazy> <el-image :src="item.imgThumb" style="width: 100%" fit="cover" lazy>
<template #placeholder> <template #placeholder>
@ -35,12 +35,12 @@
</div> </div>
</template> </template>
</el-image> </el-image>
<span>{{item.imgName}}</span> <span class="paragraph">{{item.imgName}}</span>
</a> </a>
</div> </el-card>
</el-col> </el-col>
<el-col :span="7" :offset="1"> <el-col :span="7" :offset="1">
<div class="photo" v-for="item in photoRight"> <el-card class="photo" v-for="item in photoRight" shadow="hover" :body-style="{ padding: '0px' }">
<a :href="item.imgSrc" target="_blank"> <a :href="item.imgSrc" target="_blank">
<el-image :src="item.imgThumb" style="width: 100%" fit="cover" lazy> <el-image :src="item.imgThumb" style="width: 100%" fit="cover" lazy>
<template #placeholder> <template #placeholder>
@ -49,15 +49,15 @@
</div> </div>
</template> </template>
</el-image> </el-image>
<span>{{item.imgName}}</span> <span class="paragraph">{{item.imgName}}</span>
</a> </a>
</div> </el-card>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<el-col :lg="{span:6}" :sm="9"> <el-col :lg="{span:6}" :sm="9">
<div class="module"> <div class="module">
<div class="content"> <div class="content paragraph">
<el-avatar :size="50" :src="require('../assets/2.png')"></el-avatar> <el-avatar :size="50" :src="require('../assets/2.png')"></el-avatar>
<h4>PeterAlbus</h4> <h4>PeterAlbus</h4>
<p>若有侵权，深表歉意。可联系删除</p> <p>若有侵权，深表歉意。可联系删除</p>
@ -78,14 +78,18 @@
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
<div class="module">
<h2 class="title">友情链接</h2>
<div class="content paragraph">
<p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
</div>
</div>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
import axios from "axios";
export default { export default {
name: "Photo", name: "Photo",
data(){ data(){
@ -93,27 +97,35 @@ export default {
photoList:[ photoList:[
{ {
imgId:1, imgId:1,
imgSrc:'https://www.peteralbus.com:8440/assets/blog/imgs/cover/cover1.jpg', imgSrc:'https://file.peteralbus.com/assets/blog/imgs/cover/cover1.jpg',
imgThumb:'https://www.peteralbus.com:8440/assets/blog/imgs/cover/cover1.jpg', imgThumb:'https://file.peteralbus.com/assets/blog/imgs/cover/cover1.jpg',
imgName:'test' imgName:'loading'
}, },
{ {
imgId:2, imgId:2,
imgSrc:'https://www.peteralbus.com:8440/assets/blog/imgs/cover/8a0be7eaef3c44469200443affd26d33', imgSrc:'https://file.peteralbus.com/assets/blog/imgs/cover/8a0be7eaef3c44469200443affd26d33',
imgThumb:'https://www.peteralbus.com:8440/assets/blog/imgs/cover/cover1.jpg', imgThumb:'https://file.peteralbus.com/assets/blog/imgs/cover/cover1.jpg',
imgName:'test' imgName:'loading'
}, },
{ {
imgId:3, imgId:3,
imgSrc:'https://www.peteralbus.com:8440/assets/blog/imgs/cover/79f797340075430abcdc9b80fc908f66', imgSrc:'https://file.peteralbus.com/assets/blog/imgs/cover/79f797340075430abcdc9b80fc908f66',
imgThumb:'https://www.peteralbus.com:8440/assets/blog/imgs/cover/cover1.jpg', imgThumb:'https://file.peteralbus.com/assets/blog/imgs/cover/cover1.jpg',
imgName:'test' imgName:'loading'
}, },
],
friendLinkList:[
{
linkId:1,
linkName:'loading',
linkUrl:'#'
}
] ]
} }
}, },
created() { created() {
this.getPhotoList(); this.getPhotoList()
this.getFriendLinkList()
}, },
methods:{ methods:{
getPhotoList:function (){ getPhotoList:function (){
@ -122,6 +134,13 @@ export default {
.then(res=>{ .then(res=>{
that.photoList=res.data; that.photoList=res.data;
}) })
},
getFriendLinkList: function (){
let that=this;
that.$axios.get('friendLink/getFriendLinkList')
.then(res=>{
that.friendLinkList=res.data;
})
} }
}, },
computed:{ computed:{
@ -188,19 +207,8 @@ export default {
color: #eee; color: #eee;
} }
.photo {
.content { padding: 0 0 5px 0;
position: relative;
margin-top: 5px;
margin-bottom: 5px;
padding: 6px 20px;
background-color: #fff;
border-radius: 5px;
}
.photo
{
padding: 5px;
background-color: white; background-color: white;
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;

Write Preview
Loading…
Cancel
Save