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。
这样，百度搜索就添加到博客中了。
参考链接：