searchinghost easy
v1.1.2
رمز صفري وشريط بحث سهل الإعداد لـ Ghost CMS (مدونة).
SearchinGhostEasy عبارة عن غلاف حول مكتبة SearchinGhost الأصلية لجعلها في متناول أي مستخدم Ghost "غير مطور".
نظرًا لأننا لم نولد جميعًا بمهارات التصميم، فقد تم بالفعل إنشاء العديد من قوالب شريط البحث من أجلك. وتستخدم جميعها تصميمًا سريع الاستجابة بحيث يتناسب تمامًا مع أي حجم شاشة، بدءًا من الهواتف المحمولة وحتى أجهزة تلفزيون 4K.
أخيرًا، من خلال تجميع كل شيء معًا في إطار HTML iframe، نحصل على تجربة مستخدم غنية وسلسة للغاية!
أوه! لقد نسيت أن أقول الشيء الأكثر أهمية: إنه يعمل مع جميع سمات Ghost ! (كاسبر، على نطاق واسع، النوبة، ...)
لتثبيت شريط البحث في مدونة Ghost الخاصة بك، اتبع الخطوات السريعة التالية:
في اللوحة اليمنى، انتقل إلى قسم "التكامل"، وانقر على "+ إضافة تكامل مخصص" وأطلق عليه اسم "SearchinGhostEasy". أنشأ Ghost "مفتاح واجهة برمجة تطبيقات المحتوى" الخاص بك والفريد من نوعه (يجب أن يبدو مثل ba094afe723d802f235af61d51 ). احتفظ بها في مكان ما، ستحتاج إليها في الخطوة التالية. إذا كنت بحاجة إلى مزيد من المساعدة، فتفضل بزيارة صفحة التكامل المخصص لـ Ghost الرسمية.
من قسم "إدخال التعليمات البرمجية"، انسخ/الصق مجموعة التعليمات البرمجية التالية في منطقة "تذييل الموقع".
لا تنس استبدال العنصر النائب <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 الخاص بك بجوار البرامج النصية الأخرى وسيعمل بنفس الطريقة تمامًا.
وأخيرًا، أضف رابطًا في القائمة التي تفتح مربع البحث. للقيام بذلك، انتقل إلى قسم "التصميم" وأضف عنصرًا جديدًا. يمكن أن يكون في "الملاحة" أو "الملاحة الثانوية". يمكنك تسميته بأي تصنيف ("البحث" يبدو طبيعيًا) ولكن يجب أن ينتهي الرابط بـ #searchinghost-easy . انقر على "حفظ".
إذا كنت تفضل استخدام رمز البحث بدلاً من الكلمة، فيرجى الانتقال إلى هذا القسم.
؟ هذا هو كل شيء، كل شيء جاهز! في مدونتك، يجب أن يظهر زر "بحث" في شريط القائمة. انقر عليه لرؤية السحر يحدث! إذا لم يعجبك مظهر شريط البحث الافتراضي، فراجع قسم القالب التالي لتغييره؟
ولا تنس أيضًا مراجعة قسم الأسئلة والأجوبة للحصول على جميع النصائح المفيدة وقسم التكوين لمزيد من الإعداد المتقدم.
يأتي SearchinGhostEasy بنكهات رسومية مختلفة. يُطلق على القالب المقدم افتراضيًا اسم "Basic" ولكن يمكنك التبديل بسهولة إلى أي قالب آخر.
للقيام بذلك، راجع كل وصف للقالب وانسخ/الصق مثال التعليمات البرمجية المرتبط في مدونتك 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
} ) ;مفتاح واجهة برمجة تطبيقات المحتوى. هذه القيمة إلزامية ويمكن العثور عليها في تفاصيل التكامل المخصص.
مثال:
'06a02026a9f2dcf69f7e065d7c'
قم بتعيين عنوان URL لواجهة برمجة التطبيقات (API) مختلفًا عن اسم مجال المدونة. يمكن أن تكون مفيدة لغرض الاختبار. يتوافق هذا الخيار مع
urlالموجود في مكتبة SearchinGhost.مثال:
'http://example.com'
تجاوز التكوين الافتراضي لـ SearchinGhost. سيتم دمج هذا التكوين مع التكوينات التي يوفرها SearchinGhostEasy نفسه ونموذج البحث المحدد.
لرؤية كافة الخيارات المتاحة، راجع وثائق SearchingGhost.
مثال:
{ searchOn : 'submit' , limit : 5 , cacheMaxAge : 3600 , }
قم بتعيين إصدار SearchinGhost للاستخدام. يمكن أن يكون مفيدًا إذا تم إصدار إصدار أحدث للتو.
مثال:
'1.3.0'
قم بتعيين عنصر HTML iframe
z-indexعلى قيمة محددة.الافتراضي:
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 بالإصدار المطلوب ).
نعم، يمكنك القيام بذلك باستخدام برنامج نصي أو عن طريق تحديث السمة الخاصة بك (انظر أدناه مباشرةً للتعرف على خيار السمة).
بالنسبة لخيار البرنامج النصي، ما عليك سوى نسخ/لصق الأسطر الثلاثة الأولى من المثال التالي قبل قسم تهيئة SearchinGhostEasy.
الرجاء ملاحظة أن نموذج التعليمات البرمجية هذا قد تم تصميمه للعمل على سمة Ghost الافتراضية "Casper". قد تحتاج إلى بعض التعديلات حتى تعمل على موقع الويب الخاص بك (أي محدد الاستعلام وعنصر جافا سكريبت الداخلي الذي تم إنشاؤه).
< 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 للموضوع.
عند كتابة مقال، يمكنك ببساطة إنشاء رابط بهذه الطريقة:
في HTML، رابط SearchinGhostEasy ليس أكثر من:
< a href =" #searchinghost-easy " > click to search </ a > 
