searchinGhost ดาวน์โหลด - searchinGhost ดาวน์โหลดซอร์สโค้ด

ค้นหาในGhost

จาวาสคริปต์ล้วนๆ น้ำหนักเบา & ปลั๊กอินค้นหาข้อความแบบเต็มในเบราว์เซอร์สำหรับ Ghost (บล็อก)

คำอธิบาย

SearchinGhost เป็นเสิร์ชเอ็นจิ้นที่มีน้ำหนักเบาและขยายได้สำหรับแพลตฟอร์มบล็อก Ghost โดยเฉพาะ โดยแกนหลักจะใช้ Ghost Content API เพื่อโหลดเนื้อหาบล็อกของคุณและไลบรารี FlexSearch อันทรงพลังเพื่อสร้างดัชนีและดำเนินการคำค้นหา

ทุกอย่างเกิดขึ้นในเบราว์เซอร์ไคลเอนต์ ซึ่งช่วยให้เราส่งมอบผลการค้นหาที่รวดเร็วอย่างเห็นได้ชัดและแสดงผลลัพธ์เหล่านั้นแก่ผู้ใช้ของคุณแบบเรียลไทม์ (หรือที่เรียกว่า "ค้นหาตามที่คุณพิมพ์") นอกจากนี้เรายังดูแลเกี่ยวกับการลดโหลดเครือข่ายโดยอาศัยเบราว์เซอร์ localStorage ที่จะส่งคำขอเมื่อจำเป็นเท่านั้น

บล็อกของคุณเป็นภาษาซีริลลิก จีน เกาหลี กรีก อินเดีย หรือภาษาอื่นๆ ที่ไม่ใช่ละติน ไม่ต้องกังวล ระบบรองรับ โปรดดูหัวข้อเฉพาะ

โบนัส : หากคุณชอบแนวคิดนี้ แต่ต้องการติดตั้งอย่างรวดเร็วและง่ายดาย (ภายในเวลาไม่ถึง 3 นาทีจริงๆ!) โปรดไปที่โครงการ SearchinGhostEasy

สาธิต

ก่อนที่จะเจาะลึกการติดตั้งและการกำหนดค่า ให้ทดลองด้วยตัวเองด้วย การสาธิตสด นี้

ในการสาธิตนี้ เนื้อหาที่สามารถค้นหาได้มาจาก Ghost demo API อย่างเป็นทางการ (เช่น https://demo.ghost.io) ตัวเลือกถูกตั้งค่าเป็นค่าเริ่มต้น ดังนั้นแต่ละคำที่ป้อนจะถูกค้นหาในชื่อโพสต์ แท็ก ข้อความที่ตัดตอนมา และเนื้อหาหลัก

เช่น ค้นหาคำว่า "แยมผิวส้ม" ไม่มีอยู่ในชื่อโพสต์ ข้อความที่ตัดตอนมาหรือแท็กใดๆ แต่มีการใช้เพียงครั้งเดียวในบทความ "Down The Rabbit Hole" ด้วยเหตุนี้คุณจึงได้รับมัน

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

ขั้นแรก อัพเดตไฟล์ default.hbs ของธีมของคุณเพื่อรวมฟิลด์อินพุตและองค์ประกอบเอาต์พุตเพื่อแสดงผลการค้นหา จากนั้น เพิ่มลิงก์ไปยังสคริปต์ SearchinGhost และเริ่มต้นด้วย CONTENT_API_KEY ของคุณเอง หากต้องการรับคีย์ API เนื้อหา โปรดดูเอกสาร Ghost อย่างเป็นทางการ

 < input id =" search-bar " >
< ul id =" search-results " > </ ul >

< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/searchinghost.min.js " > </ script >
< script >
    var searchinGhost = new SearchinGhost ( {
        key : 'CONTENT_API_KEY'
    } ) ;
</ script >

เพียงเท่านี้ ทุกอย่างก็เสร็จสิ้นแล้ว! หากคุณต้องการการกำหนดค่าที่ละเอียดมากขึ้น โปรดอ่านหัวข้อถัดไป

การติดตั้ง

คุณสามารถติดตั้ง SearchinGhost ได้หลายวิธี โดยมีความเป็นไปได้ดังนี้:

จากเครือข่ายการจัดส่งเนื้อหา (CDN)

นี่เป็นวิธีที่ง่ายและสะดวกที่สุดในการติดตั้ง SearchinGhost เพิ่มหนึ่งในสคริปต์เหล่านี้ลงในธีม default.hbs ของคุณ นอกจากนี้เรายังแนะนำให้ใช้ jsdelivr บน unpkg เพื่อความน่าเชื่อถือและประสิทธิภาพ

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/searchinghost.min.js " > </ script >
<!-- OR -->
< script src =" https://unpkg.com/[email protected]/dist/searchinghost.min.js " > </ script >

จากแหล่งที่มา

หากคุณต้องการให้บริการ SearchinGhost จากเซิร์ฟเวอร์ของคุณเองหรือรวมไว้ในกระบวนการสร้างของคุณ คุณสามารถรับได้จากเนื้อหาหน้าเผยแพร่หรือดาวน์โหลดไฟล์ dist/searchinghost.min.js

จาก น.พี.เอ็ม

ติดตั้ง SearchinGhost เป็นการพึ่งพาโครงการ

$ npm install searchinghost
# OR
$ yarn add searchinghost

จากนั้นโหลดจากไฟล์ Javascript ใดก็ได้

 import SearchinGhost from 'searchinghost' ;
// OR
var SearchinGhost = require ( 'searchinghost' ) ;

การกำหนดค่า

ฟิลด์การกำหนดค่าบังคับเพียงฟิลด์เดียวคือ key ฟิลด์อื่นๆ มีค่าเริ่มต้นและกลายเป็นฟิลด์ที่ไม่บังคับ

SearchinGhost ได้รับการออกแบบมาเพื่อทำงานนอกกรอบ การกำหนดค่าขั้นต่ำนี้แต่ทรงพลัง! ในการกดแป้นพิมพ์แต่ละครั้ง ระบบจะค้นหาชื่อโพสต์ แท็ก ข้อความที่ตัดตอนมา และเนื้อหา นี่เป็นพฤติกรรมเริ่มต้นเนื่องจากดูเหมือนว่าจะเป็นเรื่องปกติมากที่สุด

 // SearchinGhost minimal configuration
var searchinGhost = new SearchinGhost ( {
    key : '<CONTENT_API_KEY>'
} ) ;

อย่างไรก็ตาม การกำหนดค่าเพิ่มเติมเล็กน้อยก็อาจคุ้มค่ากับความต้องการของคุณ สมมติว่าคุณต้องการค้นหาเฉพาะ title และแสดง title และช่อง published_at สำหรับแต่ละโพสต์ที่พบ คุณสามารถใช้การกำหนดค่านี้:

 var searchinGhost = new SearchinGhost ( {
    key : '<CONTENT_API_KEY>' ,
    postsFields : [ 'title' , 'url' , 'published_at' ] ,
    postsExtraFields : [ ] ,
    postsFormats : [ ] ,
    indexedFields : [ 'title' ] ,
    template : function ( post ) {
        return `<a href=" ${ post . url } "> ${ post . published_at } - ${ post . title } </a>`
    }
} ) ;

SearchinGhost สามารถปรับแต่งและขยายได้อย่างง่ายดายผ่านการกำหนดค่า ใช้เวลาพิจารณาแต่ละตัวเลือกจากส่วนถัดไป

ตัวเลือก

การกำหนดค่าเริ่มต้นที่สมบูรณ์

 {
    key : '' ,
    url : window . location . origin ,
    version : 'v3' ,
    loadOn : 'focus' ,
    searchOn : 'keyup' ,
    limit : 10 ,
    inputId : [ 'search-bar' ] ,
    outputId : [ 'search-results' ] ,
    outputChildsType : 'li' ,
    postsFields : [ 'title' , 'url' , 'excerpt' , 'custom_excerpt' , 'published_at' , 'feature_image' ] ,
    postsExtraFields : [ 'tags' ] ,
    postsFormats : [ 'plaintext' ] ,
    indexedFields : [ 'title' , 'string_tags' , 'excerpt' , 'plaintext' ] ,
    template : function ( post ) {
        var o = `<a href=" ${ post . url } ">`
        if ( post . feature_image ) o += `<img src=" ${ post . feature_image } ">`
        o += '<section>'
        if ( post . tags . length > 0 ) {
            o += `<header>
                    <span class="head-tags"> ${ post . tags [ 0 ] . name } </span>
                    <span class="head-date"> ${ post . published_at } </span>
                  </header>`
        } else {
            o += `<header>
                    <span class="head-tags">UNKNOWN</span>
                    <span class="head-date"> ${ post . published_at } </span>
                  </header>`
        }
        o += `<h2> ${ post . title } </h2>`
        o += `</section></a>`
        return o ;
    } ,
    emptyTemplate : function ( ) { } ,
    customProcessing : function ( post ) {
        if ( post . tags ) post . string_tags = post . tags . map ( o => o . name ) . join ( ' ' ) . toLowerCase ( ) ;
        return post ;
    } ,
    date : {
        locale : document . documentElement . lang || "en-US" ,
        options : { year : 'numeric' , month : 'short' , day : 'numeric' }
    } ,
    cacheMaxAge : 1800 ,
    onFetchStart : function ( ) { } ,
    onFetchEnd : function ( posts ) { } ,
    onIndexBuildStart : function ( ) { } ,
    onIndexBuildEnd : function ( index ) { } ,
    onSearchStart : function ( ) { } ,
    onSearchEnd : function ( posts ) { } ,
    indexOptions : { } ,
    searchOptions : { } ,
    debug : false
} ) ;

ตัวเลือกที่มีทั้งหมด

คีย์ (สตริง, บังคับ)

คีย์ API เนื้อหาสาธารณะเพื่อเข้าถึงข้อมูลบล็อก
ตัวอย่าง: '22444f78447824223cefc48062'

URL (สตริง)

ชื่อโดเมนเต็มของ Ghost API
ตัวอย่าง: 'https://demo.ghost.io'
ค่าเริ่มต้น: window.location.origin

รุ่น (สตริง)

ตั้งค่าเวอร์ชัน Ghost API ทำงานกับทั้ง 'v2' และ 'v3'
ค่าเริ่มต้น: 'v3'

โหลดออน (สตริง)

กำหนดกลยุทธ์การโหลดไลบรารี สามารถทริกเกอร์ได้เมื่อมีการโหลดหน้า HTML ตามความต้องการเมื่อผู้ใช้คลิกที่แถบค้นหาหรือไม่เลย
หากต้องการทริกเกอร์การเริ่มต้นแถบค้นหาด้วยตัวเอง ให้ตั้งค่านี้เป็น false (บูลีน) ด้วยวิธีนี้ คุณสามารถเรียก searchinGhost.loadData() ได้เมื่อโค้ดที่เหลือของคุณพร้อม
ค่าที่คาดหวัง: 'page' , 'focus' หรือ false
ค่าเริ่มต้น: 'focus'

ค้นหาบน (สตริง)

เลือกเวลาที่ควรจะดำเนินการคำค้นหา หากต้องการค้นหาการกดแป้นของผู้ใช้แต่ละคนและส่งแบบฟอร์ม ให้ใช้ 'keyup' หากต้องการค้นหาเฉพาะเมื่อผู้ใช้ส่งแบบฟอร์มด้วยปุ่มหรือป้อนคีย์ 'enter' ให้ใช้ 'submit' หากคุณต้องการควบคุมมันอย่างสมบูรณ์จากโค้ดจาวาสคริปต์ของคุณเอง ให้ใช้ false (บูลีน) และดำเนินการค้นหาด้วยตัวเองโดยใช้ searchinGhost.search("...")
ค่าที่คาดหวัง: 'keyup' , 'submit' หรือ false
ค่าเริ่มต้น: 'keyup'

ขีดจำกัด (จำนวน)

กำหนดจำนวนโพสต์สูงสุดที่ส่งคืนโดยคำค้นหา ค่าใดๆ ระหว่าง 1 ถึง 50 จะเร็วปานสายฟ้า และค่าที่ต่ำกว่า 1000 ไม่ควรลดประสิทธิภาพลงมากเกินไป แต่จำไว้ว่า เมื่อเสิร์ชเอ็นจิ้นถึงขีดจำกัดนี้ ระบบจะหยุดขุดและส่งคืนผลลัพธ์ ยิ่งต่ำก็ยิ่งดี
แม้ว่าจะไม่แนะนำอย่างยิ่ง ให้ตั้งค่านี้เป็น 0 เพื่อแสดงผลลัพธ์ที่มีอยู่ทั้งหมด
ค่าเริ่มต้น: 10

inputId (อาร์เรย์ของสตริง)

[เลิกใช้งาน] ก่อน v1.6.0 ช่องนี้เคยเป็น string การทำงานนี้เลิกใช้แล้ว
เว็บไซต์ของคุณอาจมีแถบค้นหาหนึ่งหรือหลายแถบ โดยแต่ละแถบจะต้องมีแอตทริบิวต์ id HTML ที่ไม่ซ้ำกัน ใส่ id แถบค้นหาแต่ละอันในอาร์เรย์นี้ ไม่ต้องใส่ '#' ในชื่อ
หากคุณไม่ต้องการช่องป้อนข้อมูลใดๆ ให้ตั้งค่าเป็น [] (อาร์เรย์ว่าง) และตั้ง searchOn เป็น false (บูลีน) จากนั้นดำเนินการค้นหาโดยใช้ searchinGhost.search("<your query>")
ค่าเริ่มต้น: ['search-bar']

outputId (อาร์เรย์ของสตริง)

[เลิกใช้งาน] ก่อน v1.6.0 ช่องนี้เคยเป็น string การทำงานนี้เลิกใช้แล้ว
เว็บไซต์ของคุณสามารถใช้องค์ประกอบ HTML ตั้งแต่หนึ่งรายการขึ้นไปเพื่อแสดงผลการค้นหา อาร์เรย์นี้อ้างอิงแอตทริบิวต์ id ขององค์ประกอบเอาต์พุตเหล่านี้ทั้งหมด หากองค์ประกอบใดเหล่านี้มีเนื้อหาอยู่แล้ว ผลการค้นหาจะเขียนทับเนื้อหานั้น
หากคุณใช้เฟรมเวิร์ก JS เพื่อแสดงผลการค้นหา ให้ตั้งค่านี้เป็น [] (อาร์เรย์ว่าง) คุณจะได้รับโพสต์ที่พบเป็นค่าที่ส่งคืนโดยฟังก์ชัน searchinGhost.search("<your query>")
ค่าเริ่มต้น: ['search-results']

outputChildsType (สตริง)

[เลิกใช้งาน] ก่อน v1.6.0 ฟิลด์นี้เคยเป็น string สิ่งนี้เลิกใช้แล้ว
ผลการค้นหาแต่ละรายการจะรวมอยู่ในองค์ประกอบย่อยก่อนที่จะเพิ่มลงในองค์ประกอบหลักของ outputId ประเภทเริ่มต้นคือ li แต่คุณสามารถตั้งค่าให้เป็นองค์ประกอบ HTML ที่ถูกต้องได้ (ดูเอกสาร MDN)
หากคุณไม่ต้องการใช้องค์ประกอบการตัดคำเพื่อผนวกผลลัพธ์ของ template และ emptyTemplate ไปยังองค์ประกอบเอาต์พุตโดยตรง ให้ตั้งค่าเป็น false (บูลีน)
ค่าเริ่มต้น: 'li'

postFields (อาร์เรย์ของสตริง)

อาร์เรย์ของฟิลด์โพสต์ที่ต้องการทั้งหมด ฟิลด์ทั้งหมดเหล่านี้จะพร้อมใช้งานในฟังก์ชัน template เพื่อแสดงข้อมูลโพสต์ที่เป็นประโยชน์
อ้างถึงเอกสารอย่างเป็นทางการของ "ฟิลด์"
หมายเหตุ: หากคุณใช้ 'custom_excerpt' เนื้อหาจะถูกใส่ใน 'excerpt' โดยอัตโนมัติเพื่อให้การสร้างเทมเพลตง่ายขึ้น
ค่าเริ่มต้น: ['title', 'url', 'excerpt', 'custom_excerpt', 'published_at', 'feature_image']

postExtraFields (อาร์เรย์ของสตริง)

อาร์เรย์นี้อนุญาตให้คุณใช้ฟิลด์พิเศษ เช่น tags หรือ authors โดยส่วนตัวฉันไม่รู้ว่าทำไมพวกเขาถึงไม่อยู่กับ "ฟิลด์" อื่น ๆ แต่ Ghost API ได้รับการออกแบบด้วยวิธีนี้ ...
ตั้งค่าเป็น [] (อาร์เรย์ว่าง) เพื่อปิดใช้งานโดยสมบูรณ์
โปรดดูเอกสารอย่างเป็นทางการ "รวม"
ค่าเริ่มต้น: ['tags']

postFormats (อาร์เรย์ของสตริง)

ซึ่งสอดคล้องกับ "รูปแบบ" Ghost API ซึ่งอนุญาตให้ใช้เพื่อดึงเนื้อหาโพสต์ด้วย HTML หรือข้อความธรรมดา
ตั้งค่าเป็น [] (อาร์เรย์ว่าง) เพื่อปิดใช้งานโดยสมบูรณ์
โปรดดูเอกสารอย่างเป็นทางการ "รูปแบบ"
ค่าเริ่มต้น: ['plaintext']

indexedFields (อาร์เรย์ของสตริง)

รายการเขตข้อมูลที่มีการจัดทำดัชนี เนื้อหาของฟิลด์ทั้งหมดเหล่านี้จะสามารถค้นหาได้
ค่าทั้งหมดในรายการนี้ จะต้อง ถูกกำหนดไว้ในโพสต์ ไม่เช่นนั้นผลการค้นหาจะไม่ถูกต้องแต่แอปจะไม่ขัดข้อง! ตรวจสอบค่า postsFields , postsExtraFields และ postsFormats อีกครั้ง
หมายเหตุ : มีการเพิ่มฟิลด์แปลก ๆ 'string_tags' ในตัวเลือก customProcessing หากคุณต้องการใช้แท็ก สิ่งที่น่าเกลียดนี้เป็นสิ่งจำเป็น (ในตอนนี้) เนื่องจาก FlexSearch ไม่สามารถจัดการอาร์เรย์ได้อย่างเหมาะสม หากคุณไม่ต้องการ/ชอบ ให้แทนที่ customProcessing เพื่อส่งคืนเฉพาะ posts โดยไม่มีการแก้ไขเพิ่มเติม หากคุณตัดสินใจที่จะใช้แท็ก โปรดใช้ 'string_tags' ที่นี่ด้วย
ค่าเริ่มต้น: ['title', 'string_tags', 'excerpt', 'plaintext']

แม่แบบ (ฟังก์ชัน)

กำหนดเทมเพลตผลลัพธ์ของคุณเอง เทมเพลตนี้จะถูกใช้สำหรับแต่ละโพสต์ที่พบเพื่อสร้างผลลัพธ์และผนวกเป็นองค์ประกอบลูกในองค์ประกอบเอาต์พุต ไม่มีเครื่องมือสร้างเทมเพลต มีเพียงฟังก์ชันจาวาสคริปต์ดั้งเดิมที่ใช้วัตถุ post เป็นอาร์กิวเมนต์
ตัวเลือกเทมเพลตนี้มีประสิทธิภาพมากกว่าที่คุณคาดไว้มาก เรายังคิดได้ว่าเป็นฟังก์ชันการประมวลผลแบบกำหนดเองที่เรียกใช้ในผลการค้นหา ตัวอย่างเช่น หากคุณต้องการทำการกรอง ไม่ต้องส่งคืนสิ่งใดเลย (เช่น return; ) หรือสตริงว่าง (เช่น return ""; ) เพื่อละทิ้งรายการ
โปรดสังเกตการใช้ backticks (เช่น '''') แทนเครื่องหมายคำพูดเดี่ยวหรือคู่ สิ่งนี้จำเป็นสำหรับการเปิดใช้งานการแก้ไขตัวแปร JavaScript ที่มีประโยชน์มาก
ตัวแปรที่มีอยู่คือตัวแปรที่กำหนดไว้ในตัวเลือก postsFields
ตัวอย่าง:
template: function ( post ) {
   return `<a href=" ${ post . url } "># ${ post . tags } - ${ post . published_at } - ${ post . title } </a>`
}

เทมเพลตว่างเปล่า (ฟังก์ชัน)

กำหนดเทมเพลตผลลัพธ์ของคุณเองเมื่อไม่พบผลลัพธ์
ตัวอย่าง:
emptyTemplate: function ( ) {
  return '<p>Sorry, nothing found...</p>'
}

การประมวลผลแบบกำหนดเอง (ฟังก์ชัน)

คุณต้องทำการแก้ไขเพิ่มเติมกับข้อมูลโพสต์ที่ดึงมาจาก Ghost หรือไม่? ใช้ฟังก์ชันนี้เพื่อทำสิ่งที่คุณต้องการ ฟังก์ชันนี้ถูกเรียกใช้ในแต่ละโพสต์ ดำเนินการหลังจาก onFetchEnd() และก่อน onIndexBuildStart()
หากคุณต้องการทิ้งโพสต์ ให้ส่งคืนค่าเท็จ JS ใดๆ (เช่น null , undefined , false , "" , ...)
หากต้องการแก้ไขข้อบกพร่องอินพุต/เอาท์พุตของคุณอย่างง่ายดาย ให้ใช้ onFetchEnd() และ onIndexBuildEnd() เพื่อแสดงผลลัพธ์ด้วย console.log() หากคุณเป็นผู้ใช้ขั้นสูง ตัวเลือกที่ดีที่สุดยังคงเป็นการใช้ดีบักเกอร์ นอกจากนี้อย่าลืมทำความสะอาดแคชในเครื่องของคุณเมื่อทำการทดสอบ!
หมายเหตุ : ตามค่าเริ่มต้น ตัวเลือกนี้เต็มไปด้วยฟังก์ชันตัวช่วยอยู่แล้ว เพื่อให้ง่ายต่อการใช้ฟิลด์ "แท็ก" ในโพสต์ ดูตัวเลือก indexedFields
ตัวอย่าง:
customProcessing: function ( post ) {
  post . extra_field = "hello" ;
  return post ;
}

วันที่ (วัตถุ)

กำหนดรูปแบบวันที่ดึงมาจากโพสต์
ดูการอ้างอิง MDN เพื่อรับข้อมูลเพิ่มเติม
ตัวอย่าง:
date: {
    locale : "fr-FR" ,
    options : { weekday : 'long' , year : 'numeric' , month : 'long' , day : 'numeric' }
}

cacheMaxAge (หมายเลข)

ตั้งค่าอายุสูงสุดของแคชเป็นวินาที ในช่วงเวลานี้ หากพบดัชนีที่มีอยู่แล้วในที่จัดเก็บในตัวเครื่อง ดัชนีดังกล่าวจะถูกโหลดโดยไม่มีคำขอ HTTP เพิ่มเติมเพื่อยืนยันความถูกต้อง เมื่อแคชถูกล้าง ค่าจะถูกรีเซ็ต
สิ่งนี้มีประโยชน์อย่างยิ่งในการบันทึกบรอดแบนด์และโหลดเครือข่ายของเซิร์ฟเวอร์ของคุณ ค่าเริ่มต้นตั้งไว้ที่ครึ่งชั่วโมง ค่านี้มาจากระยะเวลาเซสชันผู้ใช้เริ่มต้นที่ใช้โดย Google Analytics
ค่าเริ่มต้น: 1800

onFetchStart (ฟังก์ชัน)

กำหนดฟังก์ชันโทรกลับก่อนที่เราจะดึงข้อมูลจาก Ghost API
ฟังก์ชันนี้ไม่มีการโต้แย้ง
ตัวอย่าง:
onFetchStart: function ( ) {
  console . log ( "before data fetch" ) ;
}

onFetchEnd (ฟังก์ชัน)

กำหนดฟังก์ชันโทรกลับเมื่อการดึงข้อมูลเสร็จสมบูรณ์ แม้ว่าการแก้ไข posts จะยังคงอยู่ แต่เราขอแนะนำให้ใช้ฟังก์ชัน customProcessing() เพื่อดำเนินการดังกล่าว
ฟังก์ชันรับหนึ่งอาร์กิวเมนต์: อาร์เรย์ของโพสต์ทั้งหมดที่ส่งคืนโดย Ghost เอง
ตัวอย่าง:
onFetchEnd: function ( posts ) {
  console . log ( "Total posts found on Ghost:" , posts . length ) ;
}

onIndexBuildStart (ฟังก์ชัน)

กำหนดฟังก์ชันโทรกลับก่อนที่เราจะเริ่มสร้างดัชนีการค้นหา
ฟังก์ชั่นไม่มีการโต้แย้ง
ตัวอย่าง:
onIndexBuildStart: function ( ) {
  console . log ( "before building the index" ) ;
}

onIndexBuildEnd (ฟังก์ชัน)

กำหนดฟังก์ชันการเรียกกลับเมื่อการสร้างดัชนีการค้นหาเสร็จสมบูรณ์
ฟังก์ชันรับหนึ่งอาร์กิวเมนต์: อ็อบเจ็กต์ดัชนี build FlexSearch
ตัวอย่าง:
onIndexBuildEnd: function ( index ) {
  console . log ( "index built:" , index ) ;
}

onSearchStart (ฟังก์ชัน)

กำหนดฟังก์ชันโทรกลับก่อนที่จะเริ่มดำเนินการค้นหา ตัวอย่างเช่น สามารถใช้เพื่อซ่อนองค์ประกอบ HTML ของผลลัพธ์ในขณะที่รอ onSearchEnd เสร็จสิ้น หรือเพิ่มเอฟเฟกต์การเปลี่ยนแปลงที่สวยงามใดๆ แต่โดยส่วนใหญ่แล้ว สิ่งนี้ไม่จำเป็นเพราะว่าฟังก์ชั่นการค้นหานั้นเร็วพอที่จะดูดี
ฟังก์ชั่นไม่มีการโต้แย้ง
ตัวอย่าง:
onSearchStart: function ( ) {
  console . log ( "before executing the search query" ) ;
}

onSearchEnd (ฟังก์ชัน)

กำหนดฟังก์ชันโทรกลับเมื่อผลการค้นหาพร้อม
ฟังก์ชันรับ 1 อาร์กิวเมนต์: อาร์เรย์ของโพสต์ที่ตรงกัน
ตัวอย่าง:
onSearchEnd: function ( posts ) {
  console . log ( "search complete, posts found:" , posts ) ;
}

indexOptions (วัตถุ)

เพิ่มการกำหนดค่าดัชนีการค้นหาเพิ่มเติมหรือแทนที่การกำหนดค่าเริ่มต้น ตัวเลือกเหล่านี้จะถูกรวมเข้ากับตัวเลือกที่ให้ไว้แล้ว:
 {
    doc : {
        id : "id" ,
        field : this . config . indexedFields
    } ,
    encode : "simple" ,
    tokenize : "forward" ,
    threshold : 0 ,
    resolution : 4 ,
    depth : 0
}
ใช้พารามิเตอร์นี้เพื่อเปิดใช้งานการสนับสนุนภาษาที่ไม่ใช่ละติน ดูส่วนนี้
ค่าเริ่มต้น: {}

searchOptions (วัตถุ)

สร้างขึ้นสำหรับผู้ใช้ขั้นสูง ช่วยให้คุณปรับแต่งคำค้นหาได้อย่างละเอียด โปรดดูเอกสาร FlexSearch นี้
เราใช้โครงสร้างการสืบค้นเฉพาะนี้: index.search("your query", searchOptions) ดังนั้นสิ่งใดก็ตามที่เพิ่มใน searchOptions จะถูกส่งผ่านไปยัง FlexSearch ด้วยวิธีนี้
พารามิเตอร์นี้มีประโยชน์มากเมื่อกรองโพสต์ตามแท็ก เป็นตัวอย่าง:
searchOptions: {
    where : {
        string_tags : "getting started"
    }
}
โปรดทราบว่าตัวเลือก limit Searchinghost จะถูกรวมเข้ากับ searchOptions โดยอัตโนมัติ ในกรณีของเรา ในที่สุดมันก็จะกลายเป็น:
searchOptions: {
    where : {
        string_tags : "getting started"
    } ,
    limit : 10
}
ค่าเริ่มต้น: {}

ดีบัก (บูลีน)

เมื่อบางอย่างไม่ทำงานตามที่คาดไว้ ให้ตั้งค่าเป็น true เพื่อแสดงบันทึกแอปพลิเคชัน
ค่าเริ่มต้น: false

การตั้งค่าภาษา

หากบล็อกของคุณใช้ภาษาอักษรละติน (เช่น อังกฤษ ฝรั่งเศส สเปน) หรือภาษายุโรปเหนือ/ตะวันออก (เช่น เยอรมัน สวีเดน ฮังการี สโลวีเนีย เอสโตเนีย) การกำหนดค่าเริ่มต้นจะทำงานได้ดี ในกรณีอื่นๆ ให้ค้นหาค่า indexOptions ที่เหมาะสมและเพิ่มลงในการกำหนดค่า SearchinGhost หลักของคุณ

หากต้องการสร้างการตั้งค่าเฉพาะของคุณเอง โปรดดู FlexSearch README และประเด็นทั้งสามนี้

หากไม่มีสิ่งใดที่เหมาะกับคุณหรือหากพฤติกรรมผลลัพธ์ไม่ถูกต้อง อย่าลังเลที่จะสร้างปัญหาขึ้นมา

ภาษาอาหรับ

indexOptions: {
    encode : false ,
    rtl : true ,
    split : / s+ /
}

จีน, เกาหลี, ญี่ปุ่น

indexOptions: {
    encode : false ,
    tokenize : function ( str ) {
        return str . replace ( / [x00-x7F] / g , "" ) . split ( "" ) ;
    }
}

ซีริลลิก, อินเดีย, สิงหล

ตัวเลือกนี้สามารถใช้ได้กับภาษาคำใดๆ ที่คั่นด้วยช่องว่างซึ่งใช้อักขระที่ซับซ้อน

indexOptions: {
    encode : false ,
    split : / s+ /
}

ประเภทภาษาผสม

หากคุณต้องการใช้หลายภาษา (เช่น ซีริลลิก/อังกฤษ หรืออินเดีย/สเปน) ให้ใช้การกำหนดค่าเฉพาะด้านล่างนี้ ฉันรู้ว่าการดูครั้งแรกอาจดูน่ากลัว แต่แค่คัดลอก/วางและเชื่อใจฉัน

indexOptions: {
    split : / s+ / ,
    encode : function ( str ) {
        var regexp_replacements = {
            "a" : / [àáâãäå] / g ,
            "e" : / [èéêë] / g ,
            "i" : / [ìíîï] / g ,
            "o" : / [òóôõöő] / g ,
            "u" : / [ùúûüű] / g ,
            "y" : / [ýŷÿ] / g ,
            "n" : / ñ / g ,
            "c" : / [ç] / g ,
            "s" : / ß / g ,
            " " : / [-/] / g ,
            "" : / ['!"#$%&\()*+,-./:;<=>?@[]^_`{|}~] / g ,
            " " : / s+ / g ,
        }
        str = str . toLowerCase ( ) ;
        for ( var key of Object . keys ( regexp_replacements ) ) {
            str = str . replace ( regexp_replacements [ key ] , key ) ;
        }
        return str === " " ? "" : str ;
    }
}

ถามตอบ

เหตุใดจึงใช้ FlexSearch เป็นเครื่องมือค้นหา

ในตอนแรก เรายังลองใช้โซลูชันอื่นๆ เหล่านี้ด้วย: Lunr.js, minisearch และ fuse.js ในตอนท้าย FlexSearch ให้ผลลัพธ์โดยรวมที่ดีที่สุดด้วยผลลัพธ์ ที่รวดเร็ว และ แม่นยำ ขนาดมัด ที่เล็กเพียงพอ และยังตั้งค่า/กำหนดค่าได้ ง่าย อีกด้วย มีทุกสิ่งให้เลือกสรร!

เหตุใดบทความใหม่ของฉันจึงไม่ปรากฏในผลการค้นหา

ไม่ต้องกังวล มันเป็นเรื่องปกติ SearchinGhost ใช้ระบบแคชเพื่อจัดเก็บข้อมูลบล็อกของคุณในเบราว์เซอร์ เพื่อจำกัดการโต้ตอบของเครือข่าย ตามค่าเริ่มต้น ข้อมูลแคชที่เก็บไว้น้อยกว่า 30 นาทีที่แล้วยังคงถือว่าถูกต้อง หลังจากเวลาดังกล่าว บทความใหม่จะพร้อมให้คุณใช้งาน

โปรดทราบว่าผู้ใช้รายอื่นอาจ ไม่ ต้องรอ 30 นาที ขึ้นอยู่กับครั้งสุดท้ายที่พวกเขาทำการค้นคว้า หากคุณเป็นเมื่อ 1 ชั่วโมงที่แล้ว แคชของพวกเขาจะถูกล้างและต่ออายุ เพื่อให้บทความปรากฏขึ้น

หากคุณต้องการให้ผู้ใช้ของคุณทันสมัยอยู่เสมอ ให้ตั้ง cacheMaxAge เป็น 0 เมื่อทำเช่นนั้น คุณควรตั้ง loadOn เป็น 'focus' เพื่อจำกัดจำนวนคำขอ HTTP

จะปรับเวลาในการโหลดรูปภาพให้เหมาะสมได้อย่างไร?

ตามค่าเริ่มต้น เมื่อคุณใช้ตัวแปร URL feature_image เพื่อแสดงรูปภาพในผลการค้นหาของคุณ คุณจะได้รูปภาพต้นฉบับ/ขนาดเต็มเสมอ และโดยทั่วไปรูปภาพจะใหญ่เกินไป (ขนาดและน้ำหนัก) สำหรับความต้องการของเรา การย่อขนาดจะดีกว่า พอดี.

ตั้งแต่ Ghost V3 ระบบประมวลผลสื่อถูกฝังไว้เพื่อสร้างภาพที่ตอบสนอง ตามค่าเริ่มต้น Ghost จะสร้างภาพที่แตกต่างกัน 6 ภาพจากภาพที่กำหนด ขนาดที่มีคือ: w30 , w100 , w300 , w600 , w1000 , w2000 .

ในกรณีของเรา วิธีที่ง่ายที่สุดในการโหลดรูปภาพให้เร็วขึ้นคือการใช้รูปภาพที่มีขนาดเล็กลง โดยพื้นฐานแล้ว เราต้องการให้ URL นี้ https://www.example.fr/content/images/2020/05/picture.jpg (ค่าเริ่มต้นที่ดึงมาจาก Ghost API) กลายเป็น https://www.example.fr/content/images/size/w600/2020/05/picture.jpg (ความกว้าง 600px หนึ่งอัน)

โดยอัปเดตการกำหนดค่าโดยเพิ่มฟิลด์ "customProcessing" ด้วยตัวอย่างโค้ดต่อไปนี้ แน่นอนคุณสามารถใช้ขนาดใดก็ได้ที่กล่าวถึงข้างต้นแทน w600

customProcessing: function ( post ) {
    if ( post . tags ) post . string_tags = post . tags . map ( o => o . name ) . join ( ' ' ) . toLowerCase ( ) ;
    if ( post . feature_image ) post . feature_image = post . feature_image . replace ( '/images/' , '/images/size/w600/' ) ; // reduce image size to w600
    return post ;
}

การแก้ไขนี้ ไม่ได้ เกิดขึ้นทันที คุณต้องรีเฟรชแคชเพื่อดูความแตกต่างจริงๆ

จะแสดงจำนวนผลการค้นหาที่พบได้อย่างไร?

สร้างองค์ประกอบ HTML ด้วย ID "search-counter" และใช้ประโยชน์จากฟังก์ชัน onSearchEnd() เพื่อเติมผลลัพธ์ นี่คือตัวอย่าง:

 < p id =" search-counter " > </ p >

onSearchEnd: function ( posts ) {
    var counterEl = document . getElementById ( 'search-counter' ) ;
    counterEl . textContent = ` ${ posts . length } posts found` ;
}

ฉันสามารถแสดงโพสต์ล่าสุดเมื่อไม่พบสิ่งใดได้หรือไม่?

ใช่ โดยใช้วิธีภายในของ SearchinGhost แต่เป็นไปได้ อาจดูเหมือนมนต์ดำ แต่เพิ่มโค้ดด้านล่างลงในการกำหนดค่าปัจจุบันของคุณ ในที่นี้ searchinGhost อ้างอิงถึงอินสแตนซ์ของคุณเองที่สร้างด้วย new SearchinGhost(...)

emptyTemplate: function ( ) {
    var allPostsArray = Object . values ( searchinGhost . index . l ) ;
    var latestPosts = allPostsArray . slice ( 0 , 6 ) ;
    searchinGhost . display ( latestPosts ) ;
}

ฉันสามารถใช้ไลบรารีนี้กับเฟรมเวิร์ก JS ได้หรือไม่

หากคุณกำลังใช้เฟรมเวิร์กเช่น React, Vue หรือ Angular คุณอาจไม่ต้องการให้ SearchinGhost จัดการ DOM ด้วยตัวเอง เนื่องจากคุณจำเป็นต้องอัปเดตเนื้อหาใดๆ ก็ตามภายในกรอบงานของคุณอย่างแน่นอน นี่คือการกำหนดค่าที่คุณควรใช้:

 var searchinGhost = new SearchinGhost ( {
    key : '<CONTENT_API_KEY>' ,
    inputId : false ,
    outputId : false ,
    [ ... ]
} ) ;

ตอนนี้ หากต้องการเรียกใช้คำค้นหา ให้เรียกเมธอด SearchinGhost นี้:

 var postsFound = searchinGhost . search ( "my query" ) ;

// Where 'postsFound' content looks like:
[
  {
    "title" : "A Full and Comprehensive Style Test" ,
    "published_at" : "Sep 1, 2012" ,
    [ ... ]
  } ,
  {
    "title" : "Publishing options" ,
    "published_at" : "Aug 20, 2018" ,
    [ ... ]
  }
]

ด้วยวิธีนี้ จะไม่มีอะไรแสดงผลอยู่เบื้องหลังคุณ และทุกอย่างจะอยู่ภายใต้การควบคุมใน ShadowDom

แผนที่ถนน

จากนี้ไป การแก้ไขใดๆ จะถูกติดตามในไฟล์ CHANGELOG.md เฉพาะนี้

มีส่วนช่วย

การสนับสนุนใด ๆ ก็ยินดีต้อนรับ! หากคุณพบข้อบกพร่องหรือต้องการปรับปรุงโค้ด โปรดอย่าลังเลที่จะสร้างปัญหาหรือประชาสัมพันธ์

การอัพเดตโค้ดทั้งหมดจะต้องดำเนินการภายใต้ไดเร็กทอรี src

หากต้องการสร้างโปรเจ็กต์ด้วยตัวเอง ให้รัน:

$ npm install
$ npm run build

เมื่อพัฒนา ให้ใช้คำสั่ง watch แทน มันจะสร้างใหม่เร็วขึ้นในการแก้ไขไฟล์แต่ละไฟล์ และรวมลิงก์ไปยังซอร์สแมปซึ่งทำให้การดีบักง่ายขึ้น

$ npm run watch

หมายเหตุ: ในขณะที่สร้างโปรเจ็กต์นี้ ฉันใช้ Node v12.16.2 กับ NPM v6.14.4 แต่ควรทำงานกับเวอร์ชันเก่า/ใหม่กว่าด้วย

โซลูชั่นทางเลือก

SearchinGhost ไม่ได้อยู่คนเดียวในด้านปลั๊กอินค้นหา Ghost นี่คือรายการสั้น ๆ ของโครงการอื่น ๆ ที่เกี่ยวข้อง คุณควรลองดูว่าพวกเขาตรงกับความต้องการของคุณมากกว่าหรือไม่:

GhostHunter (v0.6.0 - 101 kB, 26 kB gzip)

ข้อดี:
บทความและบทช่วยสอนเกี่ยวกับเรื่องนี้ที่มีชื่อเสียงที่สุดมากมาย
ระบบแคชอันทรงพลังที่อิงตาม localStorage
การจัดทำดัชนีข้อความแบบเต็ม (ไม่ใช่เฉพาะชื่อโพสต์)
จุดด้อย:
อาศัย jQuery
ใช้งานได้กับ Ghost v2 API เท่านั้น (ตอนนี้)
ซอร์สโค้ดเริ่มยุ่งเหยิงเมื่อเวลาผ่านไป

ค้นหาผี (v1.1.0 - 12 kB, 4.2 kB gzip)

ข้อดี:
ฐานโค้ดที่เขียนดีและอ่านง่าย
ใช้ประโยชน์จากความสามารถที่ 'คลุมเครือ'
จุดด้อย:
เบราว์เซอร์ล่าช้าเมื่อค้นหาคำยาว ๆ
อาจส่งคำขอ API มากเกินไป
ไม่ใช้ระบบการให้คะแนนเพื่อแสดงผลลัพธ์ที่ดีที่สุดก่อน

ตัวค้นหาผี (v3.1.2 - 459 kB, 116 kB gzip)

ข้อดี:
ไลบรารี Javascript ล้วนๆ
จุดด้อย:
ขนาดมัดสุดท้ายที่ใหญ่โต
ส่งคำขอ HTTP สำหรับแต่ละคีย์ที่กด!
ไม่ใช้เครื่องมือค้นหา แต่จะค้นหาเฉพาะสตริงย่อยในชื่อโพสต์เท่านั้น
จัดทำดัชนีอักขระที่เน้นเสียงไม่ถูกต้อง (เช่น 'é' ควรพบด้วย 'e')

ขยาย