fix: search and language icon can be configured now & fix hover anima…

…tion Hover animation didn't work due to the upgrade of oh-vue-icons in v0.1.6, now I fix it.
Renovamen · Mar 31, 2021 · 05ffc0b · 05ffc0b · vercel · Mar 31, 2021
1 parent 1d3ed14
commit 05ffc0b
Show file tree

Hide file tree

Showing 12 changed files with 69 additions and 27 deletions.
diff --git a/example/.vuepress/config.js b/example/.vuepress/config.js
@@ -20,6 +20,8 @@ module.exports = {
     editLinks: true,
     lastUpdated: true,
     hitokoto: true, // enable hitokoto (一言) or not?
+    searchIcon: "ri-search-2-line",
+    languageIcon: "hi-translate",
     rss: {
       site_url: "https://vuepress-theme-gungnir.vercel.app",
       copyright: "Renovamen 2018-2021",

diff --git a/example/.vuepress/configs/nav/en.js b/example/.vuepress/configs/nav/en.js
@@ -17,11 +17,11 @@ module.exports = [
   {
     text: "Docs",
     link: "/docs/",
-    icon: "fa-book"
+    icon: "ri-book-2-fill"
   },
   {
     text: "v0.1.6",
-    icon: "fa-github",
+    icon: "io-logo-github",
     items: [
       {
         text: "Repository",

diff --git a/example/.vuepress/configs/nav/zh.js b/example/.vuepress/configs/nav/zh.js
@@ -17,11 +17,11 @@ module.exports = [
   {
     text: "文档",
     link: "/zh/docs/",
-    icon: "fa-book"
+    icon: "ri-book-2-fill"
   },
   {
     text: "v0.1.6",
-    icon: "fa-github",
+    icon: "io-logo-github",
     items: [
       {
         text: "仓库地址",

diff --git a/example/.vuepress/enhanceApp.js b/example/.vuepress/enhanceApp.js
@@ -4,8 +4,10 @@ import {
   FaFortAwesome,
   FaTag,
   FaSatelliteDish,
-  FaBook,
-  FaGithub,
+  RiBook2Fill,
+  IoLogoGithub,
+  RiSearch2Line,
+  HiTranslate,
   OiRepo,
   OiGitCompare
 } from "oh-vue-icons/icons";
@@ -14,8 +16,10 @@ OhVueIcon.add(
   FaFortAwesome,
   FaTag,
   FaSatelliteDish,
-  FaBook,
-  FaGithub,
+  RiBook2Fill,
+  IoLogoGithub,
+  RiSearch2Line,
+  HiTranslate,
   OiRepo,
   OiGitCompare
 );
diff --git a/example/docs/advanced/icons.md b/example/docs/advanced/icons.md
@@ -26,7 +26,6 @@ Gungnir has already imported the following icons:
 - `FaChevronDown`: <v-icon name="fa-chevron-down" />
 - `FaListUl`: <v-icon name="fa-list-ul" />
 - `BiLayoutSidebarInset`: <v-icon name="bi-layout-sidebar-inset" />
-- `FaSearch`: <v-icon name="fa-search" />
 - `FaPencilAlt`: <v-icon name="fa-pencil-alt" />
 - `FaCircle`: <v-icon name="fa-circle" />
 - `FaRss`: <v-icon name="fa-rss" />
@@ -37,7 +36,6 @@ Gungnir has already imported the following icons:
 - `RiZhihuLine`: <v-icon name="ri-zhihu-line" />
 - `FaWeibo`: <v-icon name="fa-weibo" />
 - `FaEnvelope`: <v-icon name="fa-envelope" />
-- `RiEarthFill`: <v-icon name="ri-earth-fill" />
 
 To import other icons, you may need to search for icons' names [here](https://oh-vue-icons.vercel.app) and globally import theme in your `.vuepress/enhanceApp.js` file (create one if this file dosen't exist):
 

diff --git a/example/docs/basic/config.md b/example/docs/basic/config.md
@@ -119,6 +119,26 @@ Check the [tags page](/tags) and [links page](/links) to see the effect.
 To edit the title of the above mentioned pages, please refer to Multi-language Support section.
 
 
+## Search
+
+```js
+// .vuepress/config.js
+
+module.exports = {
+  themeConfig: {
+    search: true,  // optional: enable search or not, default: true
+    searchMaxSuggestions: 10,  // optional: the maximum number of results for search, default: 10
+    searchPlaceholder: "$ grep ...",  // optional: placeholder of the search field, default: "$ grep ..."
+    searchIcon: "ri-search-2-line"  // optional: search icon
+  }
+}
+```
+
+::: tip
+The icon specified by `searchIcon` should be imported first, see [here](/docs/advanced/icons/) for details.
+:::
+
+
 ## Custom Footer
 
 Support HTML. For example, the footer of this site is:
@@ -136,4 +156,4 @@ module.exports = {
     `
   }
 }
-```
+```
diff --git a/example/zh/docs/advanced/icons.md b/example/zh/docs/advanced/icons.md
@@ -26,7 +26,6 @@ date: 2020-03-30
 - `FaChevronDown`：<v-icon name="fa-chevron-down" />
 - `FaListUl`：<v-icon name="fa-list-ul" />
 - `BiLayoutSidebarInset`：<v-icon name="bi-layout-sidebar-inset" />
-- `FaSearch`：<v-icon name="fa-search" />
 - `FaPencilAlt`：<v-icon name="fa-pencil-alt" />
 - `FaCircle`：<v-icon name="fa-circle" />
 - `FaRss`：<v-icon name="fa-rss" />
@@ -36,8 +35,6 @@ date: 2020-03-30
 - `FaTwitter`：<v-icon name="fa-twitter" />
 - `RiZhihuLine`：<v-icon name="ri-zhihu-line" />
 - `FaWeibo`：<v-icon name="fa-weibo" />
-- `FaEnvelope`：<v-icon name="fa-envelope" />
-- `RiEarthFill`：<v-icon name="ri-earth-fill" />
 
 如果想要引入别的图标，需要在 `oh-vue-icons` 的[网站](https://oh-vue-icons.vercel.app/cn)上搜索图标的名称，然后在你的项目的 `.vuepress/enhanceApp.js` 文件（如果没有的话就新建一个）中全局引入图标：
 

diff --git a/example/zh/docs/basic/config.md b/example/zh/docs/basic/config.md
@@ -119,6 +119,26 @@ module.exports = {
 如果想要修改页面主标题，请参考多语言支持部分。
 
 
+## 搜索
+
+```js
+// .vuepress/config.js
+
+module.exports = {
+  themeConfig: {
+    search: true,  // 可选：是否启用搜索，默认：true
+    searchMaxSuggestions: 10,  // 可选：搜索的最大结果数，默认：10
+    searchPlaceholder: "$ grep ...",  // 可选：搜索栏占位文本，默认："$ grep ..."
+    searchIcon: "ri-search-2-line"  // 可选：搜索图标
+  }
+}
+```
+
+::: tip
+需要保证 `searchIcon` 项指定的图标是被引入过的，在[这里](/zh/docs/advanced/icons/)查看怎么引入图标。
+:::
+
+
 ## 页脚自定义
 
 页脚支持 HTML 格式，如本站的页脚配置为：
@@ -136,4 +156,4 @@ module.exports = {
     `
   }
 }
-```
+```
diff --git a/packages/theme-gungnir/components/DropdownLink.vue b/packages/theme-gungnir/components/DropdownLink.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="dropdown-wrapper" :class="{ open }">
     <a class="dropdown-title" @click="toggle">
-      <span class="title v-parent v-hover">
+      <span class="title ov-parent ov-hover">
         <v-icon v-if="item.icon" :name="item.icon" animation="wrench" hover />
         {{ item.text }}
       </span>

diff --git a/packages/theme-gungnir/components/NavLink.vue b/packages/theme-gungnir/components/NavLink.vue
@@ -1,7 +1,7 @@
 <template>
   <router-link
     v-if="!isExternal(link)"
-    class="nav-link v-parent v-hover"
+    class="nav-link ov-parent ov-hover"
     :to="link"
     :exact="exact"
   >
@@ -10,7 +10,7 @@
   </router-link>
   <a
     v-else
-    class="nav-link external v-parent v-hover"
+    class="nav-link external ov-parent ov-hover"
     :href="link"
     :target="isMailto(link) || isTel(link) ? null : '_blank'"
     :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"

diff --git a/packages/theme-gungnir/components/NavLinks.vue b/packages/theme-gungnir/components/NavLinks.vue
@@ -12,11 +12,16 @@
       class="nav-item"
     >
       <a
-        class="nav-link v-parent v-hover"
+        class="nav-link ov-parent ov-hover"
         style="cursor: pointer"
         @click="$emit('toggle-search')"
       >
-        <v-icon name="fa-search" animation="wrench" hover />
+        <v-icon
+          v-if="$themeConfig.searchIcon"
+          :name="$themeConfig.searchIcon"
+          animation="wrench"
+          hover
+        />
         {{ $themeLocales.search }}
       </a>
     </div>
@@ -71,7 +76,7 @@ export default {
             }
             return { text, link };
           }),
-          icon: "ri-earth-fill"
+          icon: this.$themeConfig.languageIcon
         };
         return [...userNav, languageDropdown];
       }

diff --git a/packages/theme-gungnir/enhanceApp.js b/packages/theme-gungnir/enhanceApp.js
@@ -17,7 +17,6 @@ import {
   FaChevronDown,
   FaListUl,
   BiLayoutSidebarInset,
-  FaSearch,
   FaPencilAlt,
   FaCircle,
   FaRss,
@@ -27,8 +26,7 @@ import {
   FaTwitter,
   RiZhihuLine,
   FaWeibo,
-  FaEnvelope,
-  RiEarthFill
+  FaEnvelope
 } from "oh-vue-icons/icons";
 
 OhVueIcon.add(
@@ -44,7 +42,6 @@ OhVueIcon.add(
   FaChevronDown,
   FaListUl,
   BiLayoutSidebarInset,
-  FaSearch,
   FaPencilAlt,
   FaCircle,
   FaRss,
@@ -54,8 +51,7 @@ OhVueIcon.add(
   FaTwitter,
   RiZhihuLine,
   FaWeibo,
-  FaEnvelope,
-  RiEarthFill
+  FaEnvelope
 );
 
 export default ({ Vue, siteData, isServer }) => {