Thêm công cụ tìm kiếm trong Hugo site

• Add mã tìm kiếm
• Đưa ô tìm kiếm vào vị trí trong site
• Thêm mã CSS cho hộp tìm kiếm

Ở đây tôi dùng google search.

Tạo trang google-cse.html trong thư mục base với nội dung là đoạn mã được tạo ra ở trang https://cse.google.com

Tìm đến trang header.html và đưa đoạn mã sau vào vào vị trí cần hiển thị tìm kiếm

<div id="search-box">{{ partial "base/google-cse" . }}</div>

Thêm mã CSS cho công cụ tìm kiếm

Tìm đến file style.css thêm vào cuối file đoạn code sau:

/* Google Custom Search box */

input.gsc-input,
.gsc-input-box,
.gsc-input-box-hover,
.gsc-input-box-focus,
.gsc-search-button,
.gsc-inline-block {
  box-sizing: content-box;
  line-height: normal;
}

.gsc-control-cse {
  padding: 0.1em 0 0.5em 1em !important;
  width: 16em !important;
  float: right;
}

input.gsc-search-button-v2 {
  padding: 6px 12px !important;
}

.gsc-search-box-tools .gsc-search-box .gsc-input {
  padding-right: 1px !important;
}