Added the search box into the website

config.toml

@@ -21,6 +21,7 @@ pygmentscodefencesguesssyntax = true
 	series = "series"
 
 [params]
+
 	# Use homepage.md instead of a list of posts
 	homepage = false
 
@@ -77,3 +78,18 @@ name = "分类"
 url = "/categories"
 weight = 5
 
+# Social Menu
+[[params.social]]
+name = "Github"
+icon = "fab fa-github"
+url = "https://github.com/dataCobra/hugo-vitae"
+
+#[[params.social]]
+#name = "Email"
+#icon = "fas fa-envelope"
+#cmd = "mailto:[email protected]"
+
+[[params.social]]
+name = "RSS"
+icon = "fas fa-rss"
+url = "/index.xml"

themes/hugo-vitae/layouts/partials/footer.html

@@ -11,3 +11,14 @@
 {{- end }}
 {{- end -}}
 <script src="{{ relURL "js/dark-mode.js" }}"></script>
+<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+<script type="text/javascript">
+  docsearch({
+    appId: "L7P2JYQ2KE",
+    apiKey: "6d20c4a2c1df6c447fe354de73fe1ed9",
+    indexName: "alc",
+    insights: true, // Optional, automatically send insights when user interacts with search results
+    container: '#docsearch',
+    debug: false // Set debug to true if you want to inspect the modal
+  });
+</script>

themes/hugo-vitae/layouts/partials/head.html

@@ -24,6 +24,8 @@
 <link rel="stylesheet" type="text/css" media="screen" href="{{ relURL "/css/normalize.css" }}" />
 <link rel="stylesheet" type="text/css" media="screen" href="{{ relURL "/css/main.css" }}" />
 <link rel="stylesheet" type="text/css" media="screen" href="{{ relURL "/css/all.css" }}" />
+<!--Add the CSS of DocSearch-->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/></pre></li>
 {{- if or .Params.math .Site.Params.math -}}
 <link rel="stylesheet" href="{{ relURL "/css/katex.css" }}" crossorigin="anonymous">
 <script defer src="{{ relURL "js/katex.js" }}"  integrity="sha384-PFWG8XW41D5NzhNv5FegM1CUkw9nNLdWug8DuwnUoNEVop9n5frjcnbtsZtxTNjw" crossorigin="anonymous"></script>

themes/hugo-vitae/layouts/partials/header.html

@@ -37,9 +37,11 @@ <h2 id="titleonly"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h2>
 {{- end }}
 <li><a><i title="Switch Dark Mode" class="dark-mode icons fas fa-moon"></i></a></li>
 </ul></nav>
+<div id="docsearch"></div>
 </div>
 {{- end }}
 </div>
+
 {{- if isset .Site.Menus "main" }}
 <div id="mainmenu">
 <nav>
@@ -48,7 +50,9 @@ <h2 id="titleonly"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h2>
 <li><a href="{{ .URL }}">{{ .Name }}</a></li>
 {{- end }}
 </ul>
+
 </nav>
+
 </div>
 {{- end }}
 </header>