add seo

hichina-main-front/package.json

@@ -32,6 +32,7 @@
     "qs": "^6.11.1",
     "quill-image-uploader": "^1.2.4",
     "swiper": "^9.2.4",
+    "unhead": "^1.1.27",
     "v-lazy-image": "^2.1.1",
     "vue": "^3.2.37",
     "vue-awesome-swiper": "3",

hichina-main-front/src/main.js

@@ -21,9 +21,13 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import Datepicker from 'vuejs3-datepicker';
+import { createHead } from "unhead"
+const head = createHead();
+
 library.add(fas)
 const app = createApp(App)
 app.use(router)
+app.use(head)
 app.use(ElementPlus)
 app.use(elementIcons)
 app.use(vueCountryRegionSelect);

hichina-main-front/src/views/blog/detail.vue

@@ -59,9 +59,11 @@ import VLazyImage from "v-lazy-image";
 import { useRouter } from "vue-router";
 import { useWindowScroll } from "@vueuse/core";
 import { AXIOS } from "@/common/http-commons";
+import { useSeoMeta } from 'unhead'
 const { y: scrollY } = useWindowScroll();
 console.log(scrollY.value);
 
+
 const title = ref("");
 const username = ref("");
 const content = ref("");
@@ -70,6 +72,20 @@ const authorInfo = ref({});
 const authorProfileImageUrl = ref("");
 const pageViewCnt = ref(0)
 
+const siteData = reactive({
+  title: 'My Awesome Blog',
+  shortContent: 'Hichina Travel Blog'
+})
+
+// useHead({
+//   title: computed(()=>'fuck'),
+//   meta: [
+//     { hid: 'Description', name: 'Description', content: removeHtmlTag(content.value).substring(0,50)},
+//     { hid: 'Keywords', name: 'Keywords', content: title.value}
+//   ]
+// })
+
+
 const route = useRoute();
 
 function getAuthorPrincipal() {
@@ -99,11 +115,34 @@ function loadBlogDetail() {
       username.value = response.data.data.authorName;
       content.value = response.data.data.content;
       createdTime.value = response.data.data.createdTime;
+
+      // set head meta for seo
+      // Set the title meta tag
+      siteData.title = title.value;
+      siteData.shortContent = removeHtmlTag(content.value).substring(0,50)
+
+
+      useSeoMeta({
+        title: siteData.title,
+        description: siteData.shortContent,
+        ogDescription: siteData.shortContent,
+        ogTitle: siteData.title,
+        ogImage: 'https://www.hichinatravel.com/static/png/name-67280b81.png',
+        twitterCard: 'summary_large_image',
+      })
     })
     .catch((e) => {
       console.log("get blog detail err");
       console.log(e);
     });
+
+}
+
+function removeHtmlTag(input){
+  var div = document.createElement("div");
+  div.innerHTML = input;
+  var text = div.textContent || div.innerText || "";
+  return text;
 }
 
 function logView(){

hichina-main-front/src/views/destination/detail.vue

@@ -52,6 +52,7 @@
   import ProductItem from '../home/components/ProductItem'
   import OtherProductItem from '../home/components/OtherProductItem'
   import {AXIOS} from '@/common/http-commons'
+  import { useSeoMeta } from 'unhead'
   const description = ref("")
   const destinationProfileImage = ref("")
   const downloadUrl = ref("")
@@ -98,6 +99,15 @@
        console.log(destinationProfileImage.value)
        downloadUrl.value = response.data.data.downloadUrl;
        destinationName.value = response.data.data.destinationName;
+
+       useSeoMeta({
+        title: destinationName.value,
+        description: description.value,
+        ogDescription: description.value,
+        ogTitle: destinationName.value,
+        ogImage: 'https://www.hichinatravel.com/static/png/name-67280b81.png',
+        twitterCard: 'summary_large_image',
+      })
     }).catch(e=>{
       console.log("get destination detail err")
       console.log(e)

hichina-main-front/src/views/product/detail.vue

@@ -97,6 +97,7 @@
   import VLazyImage from "v-lazy-image";
   import {AXIOS} from '@/common/http-commons'
   import { useRouter } from 'vue-router';
+  import { useSeoMeta } from 'unhead'
   const route = useRoute()
   const change = (obj)=>{
     console.log('obj',obj)
@@ -460,6 +461,16 @@
       productName.value=inputArray[0]['hichinaProductBasicDTO']['productName'];
       productTypeId.value = inputArray[0]['hichinaProductBasicDTO']['productTypeId'];
       productTypeName.value = inputArray[0]['hichinaProductBasicDTO']['productTypeName'];
+
+      useSeoMeta({
+        title: productName.value,
+        description: productName.value,
+        ogDescription: productName.value,
+        ogTitle: productName.value,
+        ogImage: 'https://www.hichinatravel.com/static/png/name-67280b81.png',
+        twitterCard: 'summary_large_image',
+      })
+
       if(productTypeId.value === "3a53caed-b788-4290-896d-7922532ad769"){
         // 跟团游，则按照跟团游的页面模板来设置各个参数
         setTourProductData(inputArray);

hichina-main-front/yarn.lock

@@ -200,6 +200,29 @@
   resolved "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
   integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
 
+"@unhead/dom@1.1.27":
+  version "1.1.27"
+  resolved "https://registry.npmmirror.com/@unhead/dom/-/dom-1.1.27.tgz#bee76bb92f8957146d7f70d5f6ccc0ad4f33bf23"
+  integrity sha512-sUrzpKIVvFp8TFx1mgp5t0k5ts1+KmgjMgRRuvRTZMBMVeGQRLSuL3uo34iwuFmKxeI6BXT5lVBk5H02c1XdGg==
+  dependencies:
+    "@unhead/schema" "1.1.27"
+    "@unhead/shared" "1.1.27"
+
+"@unhead/schema@1.1.27":
+  version "1.1.27"
+  resolved "https://registry.npmmirror.com/@unhead/schema/-/schema-1.1.27.tgz#a676da8a4ceeca43c7620817253d7abcea7b5dc3"
+  integrity sha512-S+xhPoBxBXDrsW9ltcF9Cv3cntMbSx+dfSmE7RNyDhogqHd3+lDEV2dnQpHKWTGjujwwMCALV5SADunAn785bw==
+  dependencies:
+    hookable "^5.5.3"
+    zhead "^2.0.4"
+
+"@unhead/shared@1.1.27":
+  version "1.1.27"
+  resolved "https://registry.npmmirror.com/@unhead/shared/-/shared-1.1.27.tgz#fe4b141f821ba58a35163990fc65c991dd1419dc"
+  integrity sha512-ElZ5WcMnhVlg44OAwTNq4XBkNePcL/BHZk7WKFcqpeGTJrEvSfs40lGJoo4sMsgDAd+XQdhJDd4dJu48jQB3kg==
+  dependencies:
+    "@unhead/schema" "1.1.27"
+
 "@vitejs/plugin-vue@^3.1.0":
   version "3.2.0"
   resolved "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54"
@@ -1403,6 +1426,11 @@ he@^1.1.1:
   resolved "https://registry.npmmirror.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hookable@^5.5.3:
+  version "5.5.3"
+  resolved "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz#6cfc358984a1ef991e2518cb9ed4a778bbd3215d"
+  integrity sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==
+
 htmlparser2@^3.8.3:
   version "3.10.1"
   resolved "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
@@ -2649,6 +2677,16 @@ ufo@^1.0.0, ufo@^1.1.1:
   resolved "https://registry.npmmirror.com/ufo/-/ufo-1.1.1.tgz#e70265e7152f3aba425bd013d150b2cdf4056d7c"
   integrity sha512-MvlCc4GHrmZdAllBc0iUDowff36Q9Ndw/UzqmEKyrfSzokTd9ZCy1i+IIk5hrYKkjoYVQyNbrw7/F8XJ2rEwTg==
 
+unhead@^1.1.27:
+  version "1.1.27"
+  resolved "https://registry.npmmirror.com/unhead/-/unhead-1.1.27.tgz#52558e0dc9b25e68ffc57196b03390f2e414900b"
+  integrity sha512-KnE4xeV/mZLxnXG1VAp1nsaO2vzMq9Ch5uN4Y2SJAG4fXLEBi/A8evr3Vd81c+oAwQZjDXKFW60HDCJCkwo/Cw==
+  dependencies:
+    "@unhead/dom" "1.1.27"
+    "@unhead/schema" "1.1.27"
+    "@unhead/shared" "1.1.27"
+    hookable "^5.5.3"
+
 unimport@^0.2.7:
   version "0.2.10"
   resolved "https://registry.npmmirror.com/unimport/-/unimport-0.2.10.tgz#9ac0d003db40c750a8ecc0fd4317dc5e0500795e"
@@ -2945,3 +2983,8 @@ yargs@^15.3.1:
     which-module "^2.0.0"
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
+
+zhead@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.npmmirror.com/zhead/-/zhead-2.0.4.tgz#42509bbe85b790de9121301eac47d440d9073876"
+  integrity sha512-V4R94t3ifk9AURym6OskbKcnowzgp5Z88tkoL/NF67vyryNxC62u6mx5F1Ux4oh4+YN7FFmKYEyWy6m5kfPH6g==