Skip to main content

Askboon

Hugo Google Site Search

เนื่องจาก Hugo ใช้ในการสร้างเว็บไซต์ในรูปแบบของ HTML โดยไม่มีการจัดเก็บข้อมูลในฐานข้อมูล จึงทำให้ Hugo เองไม่มีฟังก์ชั่นการค้นหาภายในเว็บมาให้ แต่เราสามารถนำเอาวิธีง่ายๆในการสร้างระบบค้นหาด้วย Google Custom Search ได้

Back to Basic

เราสามารถสร้างฟอร์มสำหรับส่งข้อมูลเพื่อไปค้นหายัง Google ได้ด้วยคำสั่ง HTML ง่ายๆ ดังนี้

1
2
3
4
5
6
7
8
<div style="text-align:right; margin:3px">
    <form target="_blank" method="GET" 
            action="https://www.google.com/search" autocomplete="off">
        <input type="hidden" name="q" value="site:https://askboon.com" />
        <input type="text" name="q" placeholder="Google search">
        <input type="submit" value="ค้นหา Blog นี้">
    </form>
</div>

จากนั้นก็นำไปใส่ไว้ในส่วนใดของ Hugo site ก็ได้ (ผมจะใส่ไว้ที่ท้ายสุดของไฟล์ head.html ใน Theme ที่เราใช้งานอยู่)

คำอธิบาย

  • <div> ด้านนอกสุดใช้สำหรับกำหนดตำแหน่งของกล่องค้นหาว่าจะให้ชิดซ้ายหรือขวา
  • method ต้องใช้เป็น GET แทนการใช้ POST เหมือนการส่งค่าจากฟอร์มทั่วไป
  • tag form จะกำหนด target="_blank" ไว้เพื่อให้แสดงผลการค้นหาในหน้าต่างใหม่
  • ที่ฟอร์มจะเพิ่ม attribute autocomplete="off" เพื่อให้กล่องค้นหาไม่จำข้อความที่เราใส่เข้าไป
  • input ตัวแรกตั้งชื่อว่า q แล้วกำหนดค่าให้เป็น site: แล้วตามด้วยเว็บไซต์ของเรา เพื่อเป็นการบอก Google ว่าให้ค้นหาเฉพาะภายในเว็บไซต์ของเราเท่านั้น
  • input ตัวที่สองตั้งชื่อว่า q เหมือนกัน เพื่อใช้รับค่าคำค้นหา

หวังว่าเทคนี้คงมีประโยชน์กับผู้อ่านบ้างไม่มากก็น้อยนะครับ :)