SEo

assets/css/job/_post_id.scss

@@ -1,6 +1,14 @@
 @import "~@/assets/css/scssCommon.scss";
 
 .jobDetail {
+  .breadcrumb {
+    width: 1000px;
+    margin: 30px auto 10px auto;
+    a {
+      color: #666;
+      font-size: 14px;
+    }
+  }
   .contentArea {
     margin: 0 auto;
     width: 1000px;

assets/css/job/index.scss

@@ -294,7 +294,7 @@
   }
 
   .pagination {
-    margin-top: 70px;
+    margin: 50px;
     text-align: center;
   }
 

components/job/dealSeoFooter.js

@@ -27,8 +27,6 @@ export default class DealSeoData {
         keys = Object.keys(typeList)
         break
       case "JobListSeoDetail":
-        let { workType, cityId, occupationId, directionId } = this.recruitData
-        workType = Number(workType), cityId = Number(cityId), occupationId = Number(occupationId), directionId = Number(directionId)
         break
     }
     //3 * 3 * n的循环 n < 100
@@ -122,7 +120,7 @@ export default class DealSeoData {
     const typeList = this.typeList
     const { city, citySlug, cityName = "", direction, directionName = "", directionSlug, directionSmall, directionSmallName = "", directionSmallSlug } = this.selected
     let job = directionSmall || direction
-    let jobName = directionSmallName || directionName
+    let jobName = directionSmallName === "全部" ?  directionName : (directionSmallName || directionName)
     let jobSlug = directionSmallSlug || directionSlug
     const { headers: { host } } = this.req
     let footer = {
@@ -138,45 +136,68 @@ export default class DealSeoData {
     }
     if (city && job) {
       //兼职城市&岗位页  ${jobName}兼职招聘>${cityName}${jobName}兼职招聘，并赋予对应的url
-      footer.link[ 0 ].name = "热门城市岗位兼职招聘"
-      // footer.link[ 1 ].name = `${cityName}岗位兼职招聘`
+      footer.link[ 0 ].name = `热门城市${jobName}兼职招聘`
       footer.link[ 0 ].data = typeList.city.list.map((item) => {
-        return { name: `${item.name}岗位兼职招聘`, url: `/job/${item.slug}/` }
+        return { name: `${item.name}${jobName}兼职招聘`, url: `/job/${jobSlug}/${item.slug}/` }
+      })
+      footer.link[ 1 ].name = `${cityName}热门岗位兼职招聘`
+      footer.link[ 1 ].data = []
+      typeList.direction.list.forEach((item) => {
+        footer.link[ 1 ].data.push({ name: `${cityName}${item.name}兼职招聘`, url: `/job/${citySlug}/${item.slug}/` })
+        if (Array.isArray(item.children)) {
+          item.children.forEach(item1 => {
+            footer.link[ 1 ].data.push({ name: `${cityName}${item1.name}兼职招聘`, url: `/job/${citySlug}/${item1.slug}/` })
+          })
+        }
       })
-      // footer.link[ 1 ].data = typeList.industry.map((item) => {
-      //   return { name: `${cityName}${item.name}岗位兼职招聘`, url: `/job/${city}/${item.slug}/` }
-      // })
     } else if (city && !job) {
       //兼职城市
-      footer.link[ 0 ].name = "热门城市岗位兼职招聘"
-      // footer.link[ 1 ].name = `热门城市${industryName}岗位兼职招聘`
-      footer.link[ 0 ].data = typeList.direction.list.map((item) => {
-        return { name: `${item.name}岗位兼职招聘`, url: `/job/${item.slug}/` }
+      footer.link[ 0 ].name = "热门城市兼职招聘"
+      footer.link[ 0 ].data = typeList.city.list.map((item) => {
+        return { name: `${item.name}兼职招聘`, url: `/job/${item.slug}/` }
+      })
+      footer.link[ 1 ].name = `${cityName}热门岗位兼职招聘`
+      footer.link[ 1 ].data = []
+      typeList.direction.list.forEach((item) => {
+        footer.link[ 1 ].data.push({ name: `${cityName}${item.name}兼职招聘`, url: `/job/${citySlug}/${item.slug}/` })
+        if (Array.isArray(item.children)) {
+          item.children.forEach(item1 => {
+            footer.link[ 1 ].data.push({ name: `${cityName}${item1.name}兼职招聘`, url: `/job/${citySlug}/${item1.slug}/` })
+          })
+        }
       })
-      // footer.link[ 1 ].data = typeList.city.map((item) => {
-      //   return { name: `${item.name}${industryName}岗位兼职招聘`, url: `/job/${item.slug}/${industry}/` }
-      // })
     }
     else if (!city && job) {
       //岗位页
-      footer.link[ 0 ].name = `其他岗位兼职招聘`
-      // footer.link[ 1 ].name = `热门城市${techTypeName}岗位兼职招聘`
-      footer.link[ 0 ].data = typeList.direction.list.map((item) => {
-        return { name: `${item.name}${directionName}岗位兼职招聘`, url: `/job/${item.slug}/${techType}/` }
+      footer.link[ 0 ].name = "热门岗位兼职招聘"
+      footer.link[ 0 ].data = []
+      typeList.direction.list.forEach((item) => {
+        footer.link[ 0 ].data.push({ name: `${item.name}兼职招聘`, url: `/job/${item.slug}/` })
+        if (Array.isArray(item.children)) {
+          item.children.forEach(item1 => {
+            footer.link[ 0 ].data.push({ name: `${item1.name}兼职招聘`, url: `/job/${item1.slug}/` })
+          })
+        }
+      })
+      footer.link[ 1 ].name = `热门城市${jobName}兼职招聘`
+      footer.link[ 1 ].data = typeList.city.list.map((item) => {
+        return { name: `${item.name}${jobName}兼职招聘`, url: `/job/${jobSlug}/${item.slug}/` }
       })
-      // footer.link[ 1 ].data = typeList.city.map((item) => {
-      //   return { name: `${item.name}${techTypeName}岗位兼职招聘`, url: `/job/${techType}/${item.slug}/` }
-      // })
     } else {
       //非特定的url
       footer.link[ 0 ].name = "热门城市兼职招聘"
-      footer.link[ 1 ].name = "热门岗位兼职招聘"
-      console.log(typeList.city)
       footer.link[ 0 ].data = typeList.city.list.map((item) => {
-        return { name: `${item.name}岗位兼职招聘`, url: `/job/${item.slug}/` }
+        return { name: `${item.name}兼职招聘`, url: `/job/${item.slug}/` }
       })
-      footer.link[ 1 ].data = typeList.direction.list.map((item) => {
-        return { name: `${item.name}岗位兼职招聘`, url: `/job/${item.slug}/` }
+      footer.link[ 1 ].name = "热门岗位兼职招聘"
+      footer.link[ 1 ].data = []
+      typeList.direction.list.forEach((item) => {
+        footer.link[ 1 ].data.push({ name: `${item.name}兼职招聘`, url: `/job/${item.slug}/` })
+        if (Array.isArray(item.children)) {
+          item.children.forEach(item1 => {
+            footer.link[ 1 ].data.push({ name: `${item1.name}兼职招聘`, url: `/job/${item1.slug}/` })
+          })
+        }
       })
     }
     return footer

pages/job/detail/_id.vue

@@ -114,6 +114,16 @@
     </div>
   </div>
   <div class="jobDetail" v-else>
+    <div class="breadcrumb">
+      <a
+        v-for="(item, index) in breadcrumbList"
+        :key="'breadcrumb'+index"
+        :href="item.url"
+        :title="item.name"
+      >
+        {{item.name}} <span v-if="index!==breadcrumbList.length-1"> > </span>
+      </a>
+    </div>
     <div class="contentArea">
       <div class="leftArea">
         <div class="jobTitle">{{recruitData.title}}</div>
@@ -184,13 +194,13 @@
     },
     head() {
       return {
-        title: `${this.recruitData.title}`,
+        title: `${this.recruitData.title}-程序员客栈`,
         meta: [ {
           'name': 'keywords',
           'content': `${this.recruitData.title}`
         }, {
           'name': 'descrption',
-          'content': `${this.recruitData.title}`
+          'content': `程序员客栈提供${this.recruitData.title}招聘，欢迎各位应聘者提供简历积极应聘，祝应聘${this.recruitData.title}成功！`
         }, {
           'name': 'h1',
           'content': `${this.recruitData.title}`
@@ -218,6 +228,14 @@
       if (res.status === 1) {
         recruitData = res.data
       }
+
+      /** 处理面包屑导航 **/
+      let dealBreadcrumbList = [
+          { name: '首页', url: "/" },
+          { name: '兼职招聘', url: "/job/" },
+          { name: recruitData.title, url: `/job/${recruitData.id}.html` },
+      ]
+
       let dealSeoFooterObj = new DealSeoFooter(params, recruitData)
       let footer = await dealSeoFooterObj.dealData()
       return {
@@ -225,7 +243,8 @@
         recruitId: recruitId,
         recruitData,
         mobile: params.app.$deviceType.isMobile(),
-        footer
+        footer,
+        breadcrumbList: dealBreadcrumbList
       }
     },