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

ค้นหาใน GhostEasy

รหัสศูนย์และแถบค้นหาที่ติดตั้งง่ายสำหรับ Ghost CMS (บล็อก)

คำอธิบาย

SearchinGhostEasy เป็นส่วนเสริมของไลบรารี SearchinGhost ดั้งเดิมเพื่อให้ผู้ใช้ Ghost ที่ "ไม่ใช่นักพัฒนา" สามารถเข้าถึงได้

เนื่องจากเราทุกคนไม่ได้เกิดมาพร้อมทักษะการออกแบบ เทมเพลตแถบค้นหาหลายเทมเพลตจึงถูกสร้างขึ้นเพื่อคุณแล้ว ทั้งหมดใช้การออกแบบที่ตอบสนองเพื่อให้พอดีกับหน้าจอทุกขนาด ตั้งแต่โทรศัพท์มือถือไปจนถึงทีวี 4K

สุดท้ายนี้ การรวมทุกอย่างเข้าด้วยกันใน iframe ของ HTML ทำให้เราได้รับประสบการณ์การใช้งานที่ราบรื่นและสมบูรณ์แบบ!

โอ้! ฉันลืมบอกสิ่งที่สำคัญที่สุด: มันใช้งานได้กับธีม Ghost ทั้งหมด ! (แคสเปอร์, หนาแน่น, นูเบีย, ... )

การติดตั้ง

หากต้องการติดตั้งแถบค้นหาในบล็อก Ghost ของคุณ ให้ทำตามขั้นตอนด่วนเหล่านี้:

1. สร้าง "การบูรณาการแบบกำหนดเอง"

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

การติดตั้งขั้นตอนที่ 1

2. เพิ่มสคริปต์ลงในเว็บไซต์ของคุณ

จากส่วน "การแทรกโค้ด" ให้คัดลอก/วางส่วนโค้ดต่อไปนี้ลงในพื้นที่ "ส่วนท้ายของไซต์"
อย่าลืมแทนที่ตัวยึดตำแหน่ง <CONTENT_API_KEY> ด้วยคีย์ API ของคุณเอง คลิกที่ "บันทึก" 

 < script src =" https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-basic.js " > </ script >
< script >
    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

หมายเหตุ : หากคุณต้องการแก้ไขธีมที่คุณกำหนดเอง ให้วางธีมนั้นลงใน default.hbs ถัดจากสคริปต์อื่นๆ และธีมจะทำงานในลักษณะเดียวกันทุกประการ

การติดตั้งขั้นตอนที่ 2

3ก. [ตัวเลือก] ตั้งค่าการค้นหาเมนู "คำ"

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

การติดตั้งขั้นตอนที่ 3

3บี [ตัวเลือก] ตั้งค่าการค้นหาเมนู "ไอคอน"

หากคุณต้องการใช้ไอคอนค้นหาแทนคำ โปรดข้ามไปที่ส่วนนี้

- เท่านี้ ทุกอย่างก็พร้อมแล้ว! บนบล็อกของคุณ ปุ่ม "ค้นหา" ควรปรากฏในแถบเมนู คลิกเพื่อดูความมหัศจรรย์ที่เกิดขึ้น! หากคุณไม่ชอบรูปลักษณ์ของแถบค้นหาเริ่มต้น ลองดูส่วนเทมเพลตถัดไปเพื่อเปลี่ยนแปลง ?

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

เทมเพลต

SearchinGhostEasy มีรูปแบบกราฟิกที่หลากหลาย เทมเพลตที่ให้มาโดยค่าเริ่มต้นเรียกว่า "พื้นฐาน" แต่คุณสามารถสลับไปใช้เทมเพลตอื่นได้อย่างง่ายดาย

โดยอ้างอิงคำอธิบายเทมเพลตแต่ละรายการแล้วคัดลอก/วางตัวอย่างโค้ดที่เกี่ยวข้องลงในบล็อกของคุณ Code Injection > Site Footer โดยพื้นฐานแล้ว เฉพาะส่วนสุดท้ายของชื่อสคริปต์เท่านั้นที่จะเปลี่ยนแปลง (เช่น "searchinghost-easy-basic.js", "searchinghost-easy-backpack.js", ...)

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

✏️เทมเพลตพื้นฐาน

ภาพหน้าจอ

ภาพหน้าจอเทมเพลตพื้นฐาน

สาธิต

การสาธิตสด: https://gmfmi.github.io/searchinghost-easy/basic/

การติดตั้ง 

 < script src =" https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-basic.js " > </ script >
< script >
    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

✏️แม่แบบเป้

ภาพหน้าจอ

ภาพหน้าจอของ เทมเพลตกระเป๋าเป้สะพายหลัง

สาธิต

การสาธิตสด: https://gmfmi.github.io/searchinghost-easy/backpack/

การติดตั้ง 

 < script src =" https://cdn.jsdelivr.net/gh/gmfmi/searchinghost-easy@latest/dist/searchinghost-easy-backpack.js " > </ script >
< script >
    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

การกำหนดค่า

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

หากคุณต้องการการควบคุม SearchinGhostEasy มากขึ้น นี่คือตัวเลือกการกำหนดค่าที่ใช้ได้: 

 new SearchinGhostEasy ( {
    contentApiKey : '<CONTENT_API_KEY>' , // mandatory
    apiUrl : 'http://example.com' ,
    searchinghostOptions : { } ,
    searchinghostVersion : '1.0.0' ,
    zIndex : 200 ,
    placeholder : "Search" ,
    debug : false
} ) ;
  • contentApiKey (สตริง, บังคับ)

คีย์ API เนื้อหา ค่านี้เป็นค่าบังคับและสามารถพบได้ในรายละเอียดการรวมแบบกำหนดเอง

ตัวอย่าง: '06a02026a9f2dcf69f7e065d7c'

  • apiUrl (สตริง)

ตั้งค่า URL ของ API ให้แตกต่างจากชื่อโดเมนบล็อก สามารถเป็นประโยชน์สำหรับวัตถุประสงค์ในการทดสอบ ตัวเลือกนี้สอดคล้องกับ url ในไลบรารี SearchinGhost

ตัวอย่าง: 'http://example.com'

  • searchhostOptions (วัตถุ)

แทนที่การกำหนดค่าเริ่มต้นของ SearchinGhost การกำหนดค่านี้จะถูกรวมเข้ากับการกำหนดค่าที่ SearchinGhostEasy ให้ไว้และเทมเพลตการค้นหาที่เลือก

หากต้องการดูตัวเลือกทั้งหมดที่มี โปรดดูเอกสารประกอบของ SearchinGhost

ตัวอย่าง: 

 {
    searchOn : 'submit' ,
    limit : 5 ,
    cacheMaxAge : 3600 ,
}
  • ค้นหาโฮสต์เวอร์ชัน (สตริง)

ตั้งค่าเวอร์ชัน SearchinGhost ที่จะใช้ จะมีประโยชน์หากเพิ่งเปิดตัวเวอร์ชันใหม่กว่า

ตัวอย่าง: '1.3.0'

  • zIndex (ตัวเลข)

ตั้ง z-index ขององค์ประกอบ iframe ของ HTML ให้เป็นค่าเฉพาะ

ค่าเริ่มต้น: 2147483647

  • ตัวยึด (สตริง)

เปลี่ยนตัวยึดตำแหน่งแถบค้นหา "ค้นหา" เริ่มต้นเป็นของคุณ มีประโยชน์อย่างยิ่งสำหรับเว็บไซต์ที่ไม่ใช่ภาษาอังกฤษ
สามารถใช้อักขระที่รองรับเบราว์เซอร์ใดก็ได้ (เช่น UTF-8) นี่คือตัวอย่างการทำงานบางส่วน: 

 placeholder: "Rechercher..."      # in french with dots
placeholder: "Αναζήτηση"          # in greek
placeholder: "With emojis! ?"   # use with caution

ค่าเริ่มต้น: "Search"

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

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

ค่าเริ่มต้น: false

ถามตอบ

ฉันจะได้รับการอัปเดตและการปรับปรุงหรือไม่

ใช่ เมื่อมี SearchinGhostEasy เวอร์ชันใหม่ให้ใช้งาน คุณจะได้รับมันโดยอัตโนมัติ

หากคุณไม่ต้องการให้มีพฤติกรรมเช่นนี้ ให้แทนที่ @latest ด้วยเวอร์ชันเฉพาะใน URL ตัวอย่างเช่น ด้วยเทมเพลต basic ให้ใช้: https://cdn.jsdelivr.net/gh/gmfmi/[email protected]/dist/searchinghost-easy-basic.js (แทนที่ 1.0.0 ด้วยเวอร์ชันที่ต้องการ) ).

ฉันสามารถใช้ไอคอนค้นหาแทนคำได้หรือไม่

ใช่ คุณสามารถทำได้โดยใช้สคริปต์หรืออัปเดตธีมของคุณ (ดูตัวเลือกธีมด้านล่างขวา)

สำหรับตัวเลือกสคริปต์ เพียงคัดลอก/วาง 3 บรรทัดแรกของตัวอย่างต่อไปนี้ ก่อน ส่วนการกำหนดค่าเริ่มต้น SearchinGhostEasy

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

 < script >
    var searchIcon = '<svg style="fill:#fff" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786 c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792z M202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667 S302.646,384,202.667,384z"/></svg>'
    var menu = document . querySelector ( 'ul.nav' ) ;
    menu . insertAdjacentHTML ( 'beforeend' , `<li class="nav-search"><a href="#searchinghost-easy"> ${ searchIcon } </a></li>` ) ;
    
    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

มิฉะนั้น หากคุณต้องการเพิ่มไอคอนลงในเมนูรอง (ถัดจากลิงก์โซเชียล) ให้ใช้ไอคอนนั้น: 

 < script >
    var searchIcon = '<svg style="fill:#fff" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786 c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792z M202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667 S302.646,384,202.667,384z"/></svg>'
    var menu = document . querySelector ( '.social-links' ) ;
    menu . insertAdjacentHTML ( 'beforeend' , `<a class="social-link" href="#searchinghost-easy"> ${ searchIcon } </a>` ) ;

    new SearchinGhostEasy ( {
        contentApiKey : '<CONTENT_API_KEY>'
    } ) ;
</ script >

ในทั้งสองกรณี หากคุณต้องการแก้ไขสีไอคอนเพื่อให้เข้ากับธีม Ghost ของคุณมากขึ้น ให้อัปเดตคุณสมบัติ fill ด้วยค่าที่เหมาะสม ตัวอย่างเช่น: style="fill:#fc03ec" เพื่อให้ได้สีชมพู

ฉันสามารถใช้มันในธีมที่กำหนดเองได้หรือไม่?

ใช่ หากต้องการปรับแต่งธีมของคุณ ให้ทำตามคำแนะนำ Ghost นี้เพื่อแก้ไขเมนูตามต้องการ

จากนั้น ข้อกำหนดเพียงอย่างเดียวในการทำให้ SearchinGhostEasy ทำงานได้คือการใช้ #searchinghost-easy เป็นค่าใน href ของลิงก์ของคุณ

ตัวอย่างเช่น ไฟล์ partials/navigation.hbs ของคุณอาจเป็น: 

 < ul class =" nav " role =" menu " >
    {{#foreach navigation}}
    < li class =" {{link_class for=(url) class=(concat " nav- " slug)}}" role=" menuitem " > < a href =" {{url absolute= " true "}}" > {{label}} </ a > </ li >
    {{/foreach}}
    < li class =" search-icon " role =" menuitem " > < a href =" #searchinghost-easy " > {{ > "icons/search"}} </ a > </ li >
</ ul >

ด้วย partials/icons/search.hbs ที่มี: 

 < svg xmlns =" http://www.w3.org/2000/svg " xmlns:xlink =" http://www.w3.org/1999/xlink " viewBox =" 0 0 512 512 " > < path d =" M508.875,493.792L353.089,338.005c32.358-35.927,52.245-83.296,52.245-135.339C405.333,90.917,314.417,0,202.667,0 S0,90.917,0,202.667s90.917,202.667,202.667,202.667c52.043,0,99.411-19.887,135.339-52.245l155.786,155.786 c2.083,2.083,4.813,3.125,7.542,3.125c2.729,0,5.458-1.042,7.542-3.125C513.042,504.708,513.042,497.958,508.875,493.792z M202.667,384c-99.979,0-181.333-81.344-181.333-181.333S102.688,21.333,202.667,21.333S384,102.677,384,202.667 S302.646,384,202.667,384z "/> </ svg >

ฉันสามารถใช้ลิงก์ที่อื่นนอกเหนือจากในเมนูได้หรือไม่?

แน่นอนว่าลิงก์ใดๆ ที่ชี้ไปที่ #searchinghost-easy จะเปิดป๊อปอัปช่องค้นหาขึ้นมา คุณสามารถสร้างลิงก์หนึ่งหรือหลายลิงก์ในหน้าเดียวกันได้ เช่น ในโพสต์ Ghost หรือในไฟล์ธีม .hbs โดยตรง

เมื่อเขียนบทความ คุณสามารถสร้างลิงก์ด้วยวิธีนี้:

การติดตั้งขั้นตอนที่ 3

ใน HTML ลิงก์ SearchinGhostEasy ไม่มีอะไรมากไปกว่า: 

 < a href =" #searchinghost-easy " > click to search </ a >

เครดิต

  • ขอขอบคุณ ACERLR8 แถบค้นหาของพวกเขาเป็นแรงบันดาลใจให้กับเทมเพลต "พื้นฐาน"
  • Back to Pack แหล่งที่มาดั้งเดิมของเทมเพลต "Backpack"
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด