add share

package.json

@@ -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": {

src/components/TopNavBar.vue

@@ -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;

src/main.js

@@ -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

src/views/About.vue

@@ -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>

src/views/Blog.vue

@@ -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>

src/views/Photo.vue

@@ -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;