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

10
public/index.html
Unescape Escape View File

@ -1,11 +1,11 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>PeterAlbus的博客</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>PeterAlbus的博客</title>
</head>
<body>
<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
v-if="screenWidth>=600"
class="nav-item"
style="float: right"
route="/photo"
index="5"
><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>
route="/"
index="1"
><i class="el-icon-s-home"></i>主页</el-menu-item>
<el-menu-item
v-if="screenWidth>=600"
class="nav-item"
style="float: right"
route="/types"
index="2"
><i class="el-icon-menu"></i>分类</el-menu-item>
<el-menu-item
v-if="screenWidth>=600"
class="nav-item"
style="float: right"
route="/"
index="1"
><i class="el-icon-s-home"></i>主页</el-menu-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-submenu
<el-sub-menu
class="nav-item"
v-if="screenWidth<600"
index="10"
style="float: right"
popper-class="submenu"
>
<template #title>
@ -44,14 +39,9 @@
</template>
<el-menu-item
class="nav-menu"
route="/photo"
index="5"
><i class="el-icon-picture-outline"></i>照片墙</el-menu-item>
<el-menu-item
class="nav-menu"
route="/about"
index="4"
><i class="el-icon-user"></i>关于我</el-menu-item>
route="/"
index="1"
><i class="el-icon-s-home"></i>主页</el-menu-item>
<el-menu-item
class="nav-menu"
route="/types"
@ -59,10 +49,15 @@
><i class="el-icon-menu"></i>分类</el-menu-item>
<el-menu-item
class="nav-menu"
route="/"
index="1"
><i class="el-icon-s-home"></i>主页</el-menu-item>
</el-submenu>
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>
</template>
@ -125,12 +120,12 @@ export default {
z-index:99; /* 层叠顺序，数值越大就越高。页面滚动的时候就不会被其他内容所遮挡。 */
}
.nav{
justify-content: right;
background: rgba(0, 0, 0, 0.5) !important;
box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
}
.nav-item{
float: right;
height: 100%;
line-height: 50px;
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 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 '@kangc/v-md-editor/lib/style/base-editor.css';
// 引入你所使用的主题 此处以 github 主题为例
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from 'prismjs';
import PeterAlbusVue from 'vue3-social-share';
import 'vue3-social-share/lib/index.css'
axios.defaults.withCredentials=false;
axios.defaults.baseURL='https://www.peteralbus.com:8089/'
VMdEditor.use(vuepressTheme, {
@ -26,5 +29,5 @@ VMdEditor.use(vuepressTheme, {
const app=createApp(App)
app.config.globalProperties.$axios=axios;
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

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

@ -20,10 +20,32 @@
</div>
</el-col>
<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">
<h2 class="title">友情链接</h2>
<div class="content">
<a href="http://www.peteralbus.com:8088/" target="_blank">疫迹</a>
<div class="content paragraph">
<p v-for="item in friendLinkList"><a :href="item.linkUrl" target="_blank">{{ item.linkName }}</a></p>
</div>
</div>
</el-col>
@ -42,7 +64,26 @@ export default {
'我对于计算机相关内容都比较感兴趣。小站初建成，还十分简陋，会一步步添加新的功能。\n' +
'\n' +
'<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;
}
.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{
text-align: left;
}
@ -96,19 +123,4 @@ export default {
font-size: 14px;
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>

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>
</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-row>
</div>

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

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

Write Preview
Loading…
Cancel
Save