zoukankan      html  css  js  c++  java
  • 添加个人专栏

    1). 新建专栏首页

    在 src/views/articles 下新建 Column.vue 文件,复制贴入以下代码:

    src/views/articles/Column.vue

     1 <template>
     2   <div class="blog-container">
     3     <div class="blog-pages">
     4       <!-- 用于渲染『文章列表』和『文章内容』 -->
     5       <router-view/>
     6 
     7       <div class="col-md-3 main-col pull-left">
     8         <div class="panel panel-default corner-radius">
     9           <div class="panel-body text-center topic-author-box blog-info">
    10             <div class="image blog-cover">
    11               <router-link :to="`/${userName}`">
    12                 <img :src="userAvatar" class="avatar-112 avatar img-thumbnail">
    13               </router-link>
    14             </div>
    15             <div class="blog-name">
    16               <h4>
    17                 <router-link :to="`/${userName}`">{{ userName }} 的专栏</router-link>
    18               </h4>
    19             </div>
    20             <hr>
    21             <router-link :to="`/${userName}`">
    22               <li class="list-group-item"><i class="text-md fa fa-list-ul"></i> 专栏文章({{ articleNum }})</li>
    23             </router-link>
    24           </div>
    25         </div>
    26       </div>
    27     </div>
    28   </div>
    29 </template>
    30 
    31 <script>
    32 // 引入 mapState 辅助函数
    33 import { mapState } from 'vuex'
    34 
    35 export default {
    36   name: 'Column',
    37   computed: {
    38     // 将指定的状态混入计算属性
    39     ...mapState([
    40       'user',
    41       'articles'
    42     ]),
    43     // 基于 user 返回用户名
    44     userName() {
    45       return this.user && this.user.name
    46     },
    47     // 基于 user 返回用户头像
    48     userAvatar() {
    49       return this.user && this.user.avatar
    50     },
    51     // 基于 articles 返回文章数量
    52     articleNum() {
    53       return this.articles ? this.articles.length : 0
    54     }
    55   }
    56 }
    57 </script>
    58 
    59 <style scoped>
    60 .blog-container { margin-top: 20px;}
    61 </style>

    现在的页面只有一个侧栏(下一步添加路由后可查看),我们稍后会使用 <router-view/> 渲染『文章列表』和『文章内容』。

     

    2). 添加首页路由

    打开 src/router/routes.js文件,在数组的最后面,添加 Column 路由:

    src/router/routes.js

    1   // Column
    2   {
    3     path: '/:user',
    4     name: 'Column',
    5     component: () => import('@/views/articles/Column')
    6   },

    3). 添加专栏入口

    打开 src/components/layouts/TheEntry.vue文件,查找编辑资料,在列表项前面添加『个人专栏』:

    src/components/layouts/TheEntry.vue

    <!-- 个人专栏 -->
    <li v-if="user">
      <router-link :to="`/${user.name}`">
        <i class="fa fa-list-ul text-md i-middle"></i>
        个人专栏
      </router-link>
    </li>
    
    <li>
      <router-link to="/users/1/edit">
        <i class="fa fa-cog text-md i-middle"></i>
        编辑资料
      </router-link>
    </li>

    因为要使用用户名作页面跳转,所以我们先使用 v-if="user" 判断是否存在当前用户。

  • 相关阅读:
    mysql常用基本命令
    mysql8.0.13下载与安装图文教程
    k8s ingress 增加跨域配置
    Jenkins 备份恢复插件 thinBackup 使用
    k8s HA master 节点宕机修复
    nginx 跨域问题解决
    mongodb 3.4.24 主从复制
    k8s 线上安装 jenkins并结合 jenkinsfile 实现 helm 自动化部署
    k8s helm 运用与自建helm仓库chartmuseum
    centos6 源码安装 unzip
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9318744.html
Copyright © 2011-2022 走看看