หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

ปลั๊กอินธีมการค้นหาบทความไคลเอนต์ไซต์คงที่ Gridea

ดูตัวอย่าง: https://kytrun.com หรือดาวน์โหลดโปรเจ็กต์นี้ วางไดเร็กทอรี example/ ไว้ในพาธธีมของ Gridea และรัน Gridea ด้วยตัวเอง

เหมาะสำหรับนักพัฒนาธีม Gridea ที่มีรากฐานในการเขียนโปรแกรมส่วนหน้าเท่านั้น สามารถดูธีมที่ใช้ grinda-search ได้ที่นี่

คุณสมบัติ:

  • หน้าผลการค้นหาแบบสแตนด์อโลนและเว็บลิงก์
  • นักพัฒนาธีมสามารถใช้เทมเพลตที่มีอยู่ซ้ำได้ในระดับสูง
  • ขยายการใช้ API อย่างเป็นทางการโดยไม่มีค่าใช้จ่ายในการเรียนรู้เพิ่มเติม
  • โหลดทรัพยากรที่จำเป็นโดยใช้การค้นหาเท่านั้น
  • รองรับการปรับแต่งสไตล์
  • เข้ากันได้ดี

เริ่มต้นอย่างรวดเร็ว:

1. นำเทมเพลตการพัฒนาธีมอย่างเป็นทางการเป็นตัวอย่างและเพิ่มไฟล์ใหม่ตาม: 

 ├── assets
 │   └── media
 │       └── gridea-search
 │           └── result-template.ejs - 搜索结果列表模板
 │           └── ejs.min.js - 模板渲染引擎
 │           └── fuse.basic.min.js - 模糊搜索
 │           └── gridea-search.js - 功能入口
 └── templates
     ├── api.ejs - 输出整站 API
     └── search.ejs - 搜索页面

2. แก้ไขไฟล์ต่อไปนี้

(1) ./templates/api.ejs

เทมเพลตที่ส่งออก API รูปแบบ JSON เพื่อลดระยะเวลาการส่งข้อมูลเครือข่ายให้มากที่สุด คุณลักษณะบางอย่างจะได้รับการใส่คำอธิบายประกอบตั้งแต่แรก

(2) ./templates/include/header.ejs

เทมเพลตสาธารณะ เพิ่มช่องค้นหาในตำแหน่งที่เหมาะสมสำหรับการอ้างอิงโดยเพจอื่น: 

 < form id =" gridea-search-form " action =" <%= themeConfig.domain %>/search/ " >
    < input name =" q " />
</ form >

ส่วนที่มีอยู่ไม่สามารถแก้ไขได้ สามารถเพิ่มคุณลักษณะอื่นๆ เช่น คลาสหรือสไตล์ได้

(3) ./templates/search.ejs

เพจการค้นหาสามารถแก้ไขได้โดยอิงจากเพจอื่น จากนั้นเพิ่มโหนดการแสดงผลผลลัพธ์การค้นหาและสคริปต์ที่ขึ้นต่อกัน

  • ต้องวางสคริปต์ที่ต้องพึ่งพา <script> ก่อน </body> อย่าเปลี่ยนลำดับโดยพลการเพื่อป้องกันข้อผิดพลาดในการโหลด

(4) ./assets/media/gridea-search/result-template.ejs

เทมเพลตรายการผลการค้นหาจะถูกแยกวิเคราะห์ทางฝั่งเบราว์เซอร์และโดยทั่วไปแล้วจะใช้ ./templates/includes/post-list.ejs ซ้ำ แต่เนื้อหาสรุป <%- post.abstract %> ได้รับการแก้ไขเป็น <%- post.searchedPreview %> โดยใช้การแสดงตัวอย่างผลการค้นหาที่มีคำหลัก

  • รายการผลการค้นหายังไม่มีฟังก์ชันการแบ่งหน้า โปรดอย่าใช้ฟิลด์ pagination

การปรับแต่งสไตล์:

1. แสดงผลการค้นหาและไม่มีผลการค้นหา 

 < div id =" gridea-search-result " data-update =" <%= site.utils.now %> " >
    < div class =" searching " >搜索中...... </ div >
    < div class =" no-result " style =" display:none " >未搜索到相关文章</ div >
</ div >
  • คงคุณลักษณะที่มีอยู่ เช่น คลาส รหัส ฯลฯ และเพิ่มคุณลักษณะ ไอคอน หรือภาพเคลื่อนไหวใหม่

2. ช่องป้อนข้อมูลการค้นหา

  • เก็บคุณลักษณะที่มีอยู่ เพิ่มคุณลักษณะใหม่ และเพิ่มไอคอนหรือภาพเคลื่อนไหว

3. การเน้นคำหลัก 

 < style >
   .searched-keyword {
     /* <span> 标签支持的所有 CSS 属性 */
    }
</ style >

อื่น:

  • หัวข้อโดยใช้การค้นหา gridea

  • โครงสร้างไดเร็กทอรีอย่างเป็นทางการและคำอธิบายตัวแปรหน้า

  • ห้องสมุดบุคคลที่สาม:

    • การค้นหาฟัซซี่ส่วนหน้า - Fuse.js: https://github.com/krisk/fuse

    • การแยกวิเคราะห์เทมเพลต - EJS: https://github.com/mde/ejs

  • ใบอนุญาตโอเพ่นซอร์ส: MIT

  • บทความที่เกี่ยวข้อง:

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