หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

วิดเจ็ตการค้นหา catche

aka เมนู CTRL/CMD-K หรือจานคำสั่ง

ตัวอย่างของการค้นหาทันที catche

Catche ให้วิธีการรหัสต่ำในการเพิ่มการค้นหาทันทีในเว็บไซต์ของคุณในสองขั้นตอน!

  1. ไปที่ https://try.catche.co และป้อน URL เว็บไซต์ของคุณ
  2. เพิ่มตัวอย่างโค้ดที่ให้ไว้ในเว็บไซต์ของคุณ <head>

repo นี้มีรหัสโอเพนซอร์ซสำหรับวิดเจ็ตฝั่งไคลเอ็นต์

สำหรับผู้ที่สนใจในการจัดวิดเจ็ตหรือใช้ข้อมูลโฮสต์ตนเองให้ตรวจสอบส่วนบทเรียนด้านล่าง

ยินดีต้อนรับผลงาน!

ภาพรวม

วิดเจ็ตนี้สร้างขึ้นด้วย Vue และ TypeScript และใช้ Tailwind สำหรับการจัดแต่งทรงผม

Catche ใช้ supabase สำหรับโฮสติ้งฐานข้อมูลของเรา แต่คุณไม่จำเป็นต้องทำเช่นนั้นถ้าคุณตั้งใจจะโฮสต์ข้อมูลของคุณเอง - คุณแค่ต้องการไฟล์ JSON!

เราใช้ minisearch สำหรับการค้นหาในขณะที่ Fast-Fuzzy ใช้สำหรับการไฮไลต์

บทเรียน

หมายเหตุ - ไฟล์ index.html ในโฟลเดอร์การสอนไม่สามารถเปิดได้เนื่องจากข้อกำหนดหลายประการในสคริปต์ ให้เรียกใช้เซิร์ฟเวอร์ท้องถิ่นผ่านโหนดหรือ Python

ธีม

ดูบทเรียน/ธีมสำหรับไฟล์ที่เกี่ยวข้อง

คุณสามารถธีมวิดเจ็ตผ่านแอตทริบิวต์ catche-css ในองค์ประกอบ <script> ซึ่งควรนำพา ธ ไปยังไฟล์. css 

 < script catche-css =" PATH/TO/CSS " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >

ดูบทช่วยสอน/Theme/Dark.css สำหรับตัวอย่างของแอตทริบิวต์ CSS ที่เกี่ยวข้อง

ข้อมูลที่กำหนดเอง

ดูบทช่วยสอน/selfhost สำหรับไฟล์ที่เกี่ยวข้อง

คุณสามารถใช้ข้อมูลของคุณเองที่บันทึกไว้ในไฟล์. json ผ่านแอตทริบิวต์ catche-data ในองค์ประกอบ <script> ซึ่งควรนำเส้นทางไปยังไฟล์. json 

 < script catche-data =" PATH/TO/JSON " type =" module " crossorigin src =" PATH/TO/WIDGET/index.js " > </ script >

ไฟล์. json ควรมีอาร์เรย์ของวัตถุโดยที่แต่ละวัตถุแสดงหน้าเว็บที่มีแอตทริบิวต์ต่อไปนี้:

  • id - สตริงที่ไม่ซ้ำกัน
  • url - URL ของหน้าเว็บ
  • title - ชื่อของหน้าเว็บ
  • text - ข้อความของหน้าเว็บ

วิดเจ็ตจะค้นหาผ่านแอตทริบิวต์ title และ text

ดูบทช่วยสอน/selfhost/my-data.json สำหรับตัวอย่างของรูปแบบข้อมูล

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด