Hugo博客设置搜索(2)

2023-11-12
#Blog

1. 前言

之前的网页搜索功能，是基于Bing搜索，见Hugo博客设置搜索(1)。

这次是基于颜林林的个人网站的搜索代码实现，是Google搜索。

2. 步骤

  1. 在 simple-style/layouts/partials at master · yanlinlin82/simple-style 下载 header.html、search-form.html 和 search.html 到 本地文件夹路径 themes/simple-style/layouts/partials

  2. 注意⚠️：在文件夹 themes/simple-style/layouts/_default 下的 baseof.html 文件中，要有以下代码：

{{ partial "header.html" . -}}
  1. 在文件夹 themes/simple-style/static/css 下的 main.css 文件中，加入搜索框的css样式设置：
div.search2 {
    position: fixed;
    right: -30px;
    max-width: 300px;
    overflow: auto;
    top: 1px;
    width: 300px;
    bottom: 100px
}

div.search {
    display: inline-block;
    margin-bottom: -12px;
}

form.search {
    width: 125px;
    margin-left: 20px;
}
form.search input[type=text] {
    padding: 5px 38px 10px 5px;
    border: 1px solid #999;
    float: left;
    font-size: 14px;
    width: 80px;
}
form.search input[type=text]:focus {
    border: 1px solid #333;
    float: left;
    width: 80px;
}
form.search button {
    float: left;
    width: 30px;
    padding: 5px;
    border: none;
    background: transparent;
    cursor: pointer;
    margin-left: -30px;
}
form.search .fa-search::before {
    content: "\1F50D";
    font-style: normal;
    color: #999;
}
form.search button:hover {
    color: #333;
}
  1. 在博客根目录下，config.toml文件中，加入以下代码：
search = "google"  # baidu, google, bing, duckduckgo

注意⚠️：根据实际情况选择搜索引擎名称。

3. 参考