Hugo 博客添加百度搜索

2 分钟阅读时间
Hugo

新增菜单

首先在 ~/config.toml 配置文件中的相应位置添加以下代码：

 1    [[menu.main]]
 2        url = "/about/"
 3        name = "关于"
 4        weight = 7
 5        pre = "internal"
 6        post = "user-circle"
 7        identifier = "about"
 8+    [[menu.main]]
 9+       url = "/search/"
10+       name = "搜索"
11+       weight = 8
12+       pre = "internal"
13+       post = "search"

添加搜索样式

打开文件 ~/assets/scss/custom/_custom.scss，加入以下代码：

 1//设置百度search样式
 2.searchbar {     
 3    border: rgb(120, 120, 120) solid 2px;
 4    border-radius: 2em;    /*左右边框为半圆*/
 5    width: 80%;
 6    height: 40px;
 7    box-shadow: 0px 0px 10px rgb(125, 125, 125);
 8    margin: 0 auto;  /*重要！整个搜索框居中对齐*/
 9    padding: 4px;
10    /*margin-top: 90px;    */
11}
12.search{ 
13    height: 38px;
14    border:none;    /*取消默认的边框以设置自定义边框*/
15    outline:none;   /*取消浏览器默认的蓝光边框以设置自定义的输入框*/   
16    vertical-align: middle;
17    /*background: #000000*/
18    background-color:transparent;/*搜索框与搜索按钮透明*/
19    
20    width: 90%;
21    margin-left: 10px;
22    font: bolder;
23    font-size: 20px;
24    color:rgb(120, 120, 120);    
25}

新建“百度”菜单的_INDEX.MD

在文件夹~/content/zh/(我使用的多语言)下新建文件夹search，并在search文件夹下新建文件**_index.md**，并写入以下代码：

1<div class="searchbar">
2<form action="https://www.baidu.com/baidu?ie=utf-8" target="blank">
3<input class="search" type="text" placeholder="" autocomplete="off" name="word">
4</form>
5</div>

修改图标

在网络中找到合适的 search svg 图标，并将其放入 ~/data/SVG.toml 中：

1search = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20px" height="20px" class="icon"><path d="M13.262,14.868l2.479,2.478c-0.376,0.725-0.415,1.445-0.017,1.843l4.525,4.526 c0.571,0.571,1.812,0.257,2.768-0.7c0.956-0.955,1.269-2.195,0.697-2.766l-4.524-4.526c-0.399-0.398-1.119-0.36-1.842,0.016 l-2.48-2.478L13.262,14.868z M8.5,0C3.806,0,0,3.806,0,8.5C0,13.194,3.806,17,8.5,17S17,13.194,17,8.5C17,3.806,13.194,0,8.5,0z M8.5,15C4.91,15,2,12.09,2,8.5S4.91,2,8.5,2S15,4.91,15,8.5S12.09,15,8.5,15z"/></svg>'

然后在 config.toml 中修改 search 菜单的 post 属性为 search。

这样，百度搜索就添加到博客中了。

参考链接：

  1. Blog中加入百度搜索