diff --git a/templates/explore/repos/search.tmpl b/templates/explore/repos/search.tmpl
index 6f4725394..e5227cf74 100644
--- a/templates/explore/repos/search.tmpl
+++ b/templates/explore/repos/search.tmpl
@@ -1,6 +1,8 @@
 {{template "base/head_home" .}}
 <link rel="stylesheet" href="{{StaticUrlPrefix}}/css/vp-repos-search.css?v={{MD5 AppVer}}" />
-<div id="__vue-root">
-</div>
+<script>
+  var staticSquareTopics = {{ .SquareTopics }};
+</script>
+<div id="__vue-root"></div>
 <script src="{{StaticUrlPrefix}}/js/vp-repos-search.js?v={{MD5 AppVer}}"></script>
 {{template "base/footer" .}}
diff --git a/templates/explore/repos/square.tmpl b/templates/explore/repos/square.tmpl
index baa5d5ad9..da3698f9f 100644
--- a/templates/explore/repos/square.tmpl
+++ b/templates/explore/repos/square.tmpl
@@ -1,6 +1,16 @@
 {{template "base/head_home" .}}
+{{ if .SquareBanners }}
+  {{ range .SquareBanners }}
+    <img preload style="height:0;width:0;position:absolute;left:-2000px;" src="{{.src}}" />
+  {{ end }}
+{{ end }}
 <link rel="stylesheet" href="{{StaticUrlPrefix}}/css/vp-repos-square.css?v={{MD5 AppVer}}" />
-<div id="__vue-root">
-</div>
+<script>
+  var staticSquareBanners = {{ .SquareBanners }};
+  var staticSquarePreferredRepos = {{ .SquarePreferredRepos }};
+  var staticSquareTopics = {{ .SquareTopics }};
+  var staticSquareRecommendRepos = {{ .SquareRecommendRepos }};
+</script>
+<div id="__vue-root"></div>
 <script src="{{StaticUrlPrefix}}/js/vp-repos-square.js?v={{MD5 AppVer}}"></script>
 {{template "base/footer" .}}
diff --git a/web_src/vuepages/pages/repos/components/RecommendRepos.vue b/web_src/vuepages/pages/repos/components/RecommendRepos.vue
index 1f7b74ecd..2cc07ced3 100644
--- a/web_src/vuepages/pages/repos/components/RecommendRepos.vue
+++ b/web_src/vuepages/pages/repos/components/RecommendRepos.vue
@@ -15,7 +15,10 @@ import { getHomePageData } from '~/apis/modules/repos';
 
 export default {
   name: "RecommendRepos",
-  props: {},
+  props: {
+    static: { type: Boolean, default: false },
+    staticSwiperData: { type: Array, default: () => [] },
+  },
   components: {},
   data() {
     return {
@@ -93,11 +96,15 @@ export default {
     }
   },
   mounted() {
-    getHomePageData().then(res => {
-      this.renderRepos(res.data.repo);
-    }).catch(err => {
-      console.log(err);
-    });
+    if (this.static) {
+      this.renderRepos(this.staticSwiperData);
+    } else {
+      getHomePageData().then(res => {
+        this.renderRepos(res.data.repo);
+      }).catch(err => {
+        console.log(err);
+      });
+    }
   },
 };
 </script>
diff --git a/web_src/vuepages/pages/repos/components/SearchBar.vue b/web_src/vuepages/pages/repos/components/SearchBar.vue
index 12fcca398..305619e96 100644
--- a/web_src/vuepages/pages/repos/components/SearchBar.vue
+++ b/web_src/vuepages/pages/repos/components/SearchBar.vue
@@ -66,6 +66,8 @@ export default {
     searchValue: { type: String, default: '' },
     topic: { type: String, default: '' },
     sort: { type: String, default: '' },
+    static: { type: Boolean, default: false },
+    staticTopicsData: { type: String, default: '[]' },
   },
   components: {},
   data() {
@@ -83,6 +85,10 @@ export default {
     setDefaultSearch(params) {
       this.searchInputValue = params.q || '';
       this.selectTopic = params.topic || '';
+      this.selectTopic && this.changeTopic({
+        k: this.selectTopic.toLocaleLowerCase(),
+        v: this.selectTopic,
+      })
     },
     changeTopic(topicItem) {
       const index_ori = this.topicOri.findIndex((item) => {
@@ -108,21 +114,7 @@ export default {
       }
       this.search();
     },
-    search() {
-      if (this.type == 'square') {
-        window.location.href = `/explore/repos?q=${this.searchInputValue}&sort=${this.sort}&topic=${this.selectTopic}`;
-      } else {
-        this.$emit('change', {
-          q: this.searchInputValue,
-          topic: this.selectTopic,
-        });
-      }
-    }
-  },
-  watch: {},
-  mounted() {
-    getPromoteData('/repos/recommend_topics').then(res => {
-      const data = res.data;
+    handlerTopicsData(data) {
       try {
         const topicsData = JSON.parse(data);
         const topics = topicsData.map((item) => {
@@ -148,9 +140,33 @@ export default {
       } catch (err) {
         console.log(err);
       }
-    }).catch(err => {
-      console.log(err);
-    });
+    },
+    search() {
+      if (this.type == 'square') {
+        window.location.href = `/explore/repos?q=${this.searchInputValue}&sort=${this.sort}&topic=${this.selectTopic}`;
+      } else {
+        this.$emit('change', {
+          q: this.searchInputValue,
+          topic: this.selectTopic,
+        });
+      }
+    }
+  },
+  mounted() {
+    if (this.static) {
+      try {
+        this.handlerTopicsData(this.staticTopicsData);
+      } catch (err) {
+        console.log(err);
+      }
+    } else {
+      getPromoteData('/repos/recommend_topics').then(res => {
+        const data = res.data;
+        this.handlerTopicsData(data);
+      }).catch(err => {
+        console.log(err);
+      });
+    }
   },
 };
 </script>
diff --git a/web_src/vuepages/pages/repos/components/SquareTop.vue b/web_src/vuepages/pages/repos/components/SquareTop.vue
index c40c0a1e3..eef55d7a9 100644
--- a/web_src/vuepages/pages/repos/components/SquareTop.vue
+++ b/web_src/vuepages/pages/repos/components/SquareTop.vue
@@ -40,7 +40,11 @@ import { getReposSquareTabData } from '~/apis/modules/repos';
 
 export default {
   name: "SquareTop",
-  props: {},
+  props: {
+    static: { type: Boolean, default: false },
+    staticSwiperData: { type: Array, default: () => [] },
+    staticBannerData: { type: String, default: '[]' },
+  },
   components: {},
   data() {
     return {
@@ -147,8 +151,17 @@ export default {
   },
   mounted() {
     this.initSwiper();
-    this.getBannerData();
-    this.getTabData();
+    if (this.static) {
+      try {
+        this.bannerData = JSON.parse(this.staticBannerData);
+      } catch (err) {
+        console.log(err);
+      }
+      this.renderSwiper(this.staticSwiperData);
+    } else {
+      this.getBannerData();
+      this.getTabData();
+    }
   },
 };
 </script>
diff --git a/web_src/vuepages/pages/repos/search/index.vue b/web_src/vuepages/pages/repos/search/index.vue
index 61d18905c..d5a520011 100644
--- a/web_src/vuepages/pages/repos/search/index.vue
+++ b/web_src/vuepages/pages/repos/search/index.vue
@@ -1,8 +1,9 @@
 <template>
   <div>
     <div class="ui container">
-      <SearchBar ref="searchBarRef" type="search" :sort="reposListSortType" :searchValue="reposListQurey"
-        :topic="reposListTopic" @change="searchBarChange"></SearchBar>
+      <SearchBar ref="searchBarRef" type="search" :static="true" :staticTopicsData="staticSquareTopics"
+        :sort="reposListSortType" :searchValue="reposListQurey" :topic="reposListTopic" @change="searchBarChange">
+      </SearchBar>
     </div>
     <div class="ui container">
       <div class="ui grid">
@@ -34,12 +35,16 @@ import ActiveUsers from '../components/ActiveUsers.vue';
 import ActiveOrgs from '../components/ActiveOrgs.vue';
 import { getUrlSearchParams } from '~/utils';
 
+const staticSquareTopics = JSON.stringify(window.staticSquareTopics || []);
+
 export default {
   data() {
     return {
       reposListSortType: 'mostpopular',
       reposListQurey: '',
       reposListTopic: '',
+
+      staticSquareTopics: staticSquareTopics,
     };
   },
   components: {
@@ -71,10 +76,12 @@ export default {
     this.reposListTopic = urlParams.topic || '';
     this.reposListSortType = urlParams.sort || 'mostpopular';
     this.search();
-    this.$refs.reposFiltersRef.setDefaultFilter(this.reposListSortType);
-    this.$refs.searchBarRef.setDefaultSearch({
-      q: this.reposListQurey,
-      topic: this.reposListTopic,
+    this.$nextTick(() => {
+      this.$refs.reposFiltersRef.setDefaultFilter(this.reposListSortType);
+      this.$refs.searchBarRef.setDefaultSearch({
+        q: this.reposListQurey,
+        topic: this.reposListTopic,
+      });
     });
   },
   beforeDestroy() { },
diff --git a/web_src/vuepages/pages/repos/square/index.vue b/web_src/vuepages/pages/repos/square/index.vue
index 256b35555..56a8bb539 100644
--- a/web_src/vuepages/pages/repos/square/index.vue
+++ b/web_src/vuepages/pages/repos/square/index.vue
@@ -1,14 +1,15 @@
 <template>
   <div>
     <div>
-      <SquareTop></SquareTop>
+      <SquareTop :static="true" :staticBannerData="staticSquareBanners" :staticSwiperData="staticSquarePreferredRepos">
+      </SquareTop>
     </div>
     <div class="ui container">
-      <SearchBar ref="searchBarRef" type="square" :sort="``" :searchValue="reposListQurey" :topic="``"
-        @change="searchBarChange"></SearchBar>
+      <SearchBar :static="true" :staticTopicsData="staticSquareTopics" ref="searchBarRef" type="square" :sort="``"
+        :searchValue="reposListQurey" :topic="``" @change="searchBarChange"></SearchBar>
     </div>
     <div class="recommend-repos-c">
-      <RecommendRepos></RecommendRepos>
+      <RecommendRepos :static="true" :staticSwiperData="staticSquareRecommendRepos"></RecommendRepos>
     </div>
     <div class="ui container">
       <div class="ui grid">
@@ -41,12 +42,22 @@ import ReposList from '../components/ReposList.vue';
 import ActiveUsers from '../components/ActiveUsers.vue';
 import ActiveOrgs from '../components/ActiveOrgs.vue';
 
+const staticSquareBanners = JSON.stringify(window.staticSquareBanners || []);
+const staticSquarePreferredRepos = window.staticSquarePreferredRepos || [];
+const staticSquareTopics = JSON.stringify(window.staticSquareTopics || []);
+const staticSquareRecommendRepos = window.staticSquareRecommendRepos || [];
+
 export default {
   data() {
     return {
       reposListSortType: 'mostpopular',
       reposListQurey: '',
       reposListTopic: '',
+
+      staticSquareBanners: staticSquareBanners,
+      staticSquarePreferredRepos: staticSquarePreferredRepos,
+      staticSquareTopics: staticSquareTopics,
+      staticSquareRecommendRepos: staticSquareRecommendRepos,
     };
   },
   components: {