[Halo] Joe美化-给博客侧栏添加一个百度搜索功能

给博客侧栏添加一个百度搜索功能，可以提高或者引导用户帮助本站seo。

上图预览：

代码使用

第1步

找到主题设置-自定义CSS并添加以下css样式

            .baidu-search{
                width: 100%;
                padding-bottom: 6px;
            }
            .baidu-search_form{
                position: relative;
                box-sizing: border-box;
                border: 1px solid var(--theme);
                border-radius: 4px; 
                margin-bottom:5px;
                overflow: hidden;
            }
            .baidu-search_input{ 
                border: none;
                font-size: 16px!important;
                font-weight: 100!important;
                color: var(--main);
                outline: none;
                border-radius: 0; 
                padding: 9px 8px;
                margin-bottom: -2px;
                background-color: transparent!important;
            }
            .baidu-search_input:focus{
                outline: none;
            }
            .baidu-search_submit{
                position: absolute;
                right:2px ;
                top: 50%;
                transform: translateY(-50%);
                box-sizing: border-box;
                border: none;
                border-radius: 4px;
                background-color: var(--theme);
                color: #ffffff;
                padding: 6px 8px;
                cursor: pointer;
            }
            .baidu-search_tip{
                font-size: 13px;
                color: var(--minor);
            }

第2步

找到主题编辑 template/common/aside.ftl文件，添加以下代码，注意：代码需要与 section同级

  <section class="joe_aside__item qrcode">
        <div class="joe_aside__item-title">
          <svg width="16" height="16" t="1683909776539" class="icon" viewBox="0 0 1029 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="1369"
              xmlns:xlink="http://www.w3.org/1999/xlink" width="200.9765625" height="200">
              <path d="M617.478226 702.499699h-48.625126a16.721298 16.721298 0 0 1-6.155079-14.874774v-101.148467h-54.267281v112.843117A41.033861 41.033861 0 0 0 552.952479 729.479463h91.71068V593.965137h-27.184933zM454.163459 593.965137h-51.292326a66.680024 66.680024 0 0 0-63.4999 51.292326 72.835103 72.835103 0 0 0 7.180926 53.754358 59.191344 59.191344 0 0 0 55.293127 30.775396h79.503106v-205.169305h-27.184933z m0 108.534562H414.258029a36.212382 36.212382 0 0 1-32.211581-29.236625 50.574234 50.574234 0 0 1 2.564617-30.775396 30.775396 30.775396 0 0 1 27.082348-21.542777h43.085554zM512.021203 0A512 512 0 1 0 1024.021203 512 512.102585 512.102585 0 0 0 512.021203 0z m30.775396 271.849329c4.103386-37.340813 48.625125-94.172711 84.427169-86.068524a91.710679 91.710679 0 0 1 61.550791 95.814066c-6.668002 40.418353-38.879583 94.172711-89.043478 87.607293s-61.550791-51.292326-57.037067-97.250251zM437.852499 169.367261c37.340813 0 68.321378 43.495893 68.321379 96.839912S475.808821 362.9445 437.852499 362.9445s-68.321378-43.803647-68.321378-96.737327 30.775396-96.737327 68.321378-96.737327zM225.810023 398.643959s8.206772-79.708275 62.986976-84.529753a84.529754 84.529754 0 0 1 79.400521 71.809256c2.051693 17.952314 11.386896 99.301943-56.934482 113.868964s-93.146864-64.525746-85.453015-101.148467z m518.668002 343.043078c-37.340813 87.504708-173.573232 41.957123-173.573232 41.957122a231.225806 231.225806 0 0 0-108.534562-3.487878 374.63915 374.63915 0 0 1-108.534562 8.206772 94.172711 94.172711 0 0 1-87.607293-84.529753c-19.491084-86.068523 68.321378-133.360048 74.784212-141.361651a401.413745 401.413745 0 0 0 80.93929-87.299539 100.020036 100.020036 0 0 1 178.189541 8.206772 699.216991 699.216991 0 0 0 123.101583 125.255861 109.252655 109.252655 0 0 1 20.516931 132.641955zM732.270452 541.954718c-74.681627 1.3336-77.759166-50.369064-77.759167-87.812462s8.617111-93.967542 68.731717-93.967542a78.887598 78.887598 0 0 1 76.322982 77.861752c0 19.388499 8.104188 102.584652-66.57744 103.918252z" fill="#2932E1" p-id="1370"></path>
          </svg>
          <span>&nbsp;&nbsp;</span>
          <span class="text">百度一下</span>
          <span class="title-right_icon"></span>
        </div>
        <div class="joe_aside__item-contain" style="padding-bottom: 10px;">
           <div class="baidu-search">
              <form class="baidu-search_form" action="https://www.baidu.com/s"
                  method="GET" target="_blank">
                  <input class="baidu-search_input" type="text" name="wd"
                      validatetarget="q"
                      validatetype="must"
                      placeholder="关键词：小莫唐尼" value="关键词：小莫唐尼">
                  <input class="baidu-search_submit" type="submit" value="搜索">
              </form>
              <span class="baidu-search_tip">🔎点击搜索，可帮助本站seo优化！</span>
           </div>          
        </div>
    </section>