jekyll lunr js search تنزيل - jekyll lunr js search تنزيل كود المصدر

jekyll lunr js search

شفرة المصدر الأخرى

1.0.0

تنزيل

Jekyll + lunr.js = مواقع ويب ثابتة ذات بحث قوي عن النص الكامل باستخدام JavaScript

استخدم lunr.js لتوفير بحث بسيط عن النص الكامل، باستخدام JavaScript في متصفحك، لموقع Jekyll الثابت الخاص بك.

مستوحاة من Jekyll + Indextank من Pascal Widdershoven ومكونات Sitemap.xml Generator الإضافية من Michael Levin.

يعالج ملحق Jekyll هذا إنشاء ملف فهرس .json متوافق مع lunr.js. يتم توفير تكوين البحث في وقت التشغيل من خلال مكون إضافي بسيط لـ jQuery.

يسمح بالبحث في النص الكامل لجميع صفحات ومنشورات Jekyll الخاصة بك. يتم تنفيذه من قبل العميل دون أي معالجة من جانب الخادم (خارج خدمة الملفات الثابتة).

كيفية الاستخدام

1. قم بتثبيت البرنامج المساعد

اختر التثبيت إما كـ Ruby Gem، أو عن طريق نسخ ملف البرنامج الإضافي المبني مسبقًا إلى موقع Jekyll الخاص بك.

1 أ. تثبيت كجوهرة روبي

قم بتثبيت jekyll-lunr-js-search Ruby Gem.
```
 gem install jekyll-lunr-js-search
```
قم بتعديل ملف Jekyll _config.yml الخاص بك ليشمل ملف Gem.
```
 gems: ['jekyll-lunr-js-search']
```

1 ب. قم بالتثبيت عن طريق نسخ البرنامج المساعد إلى موقع Jekyll الخاص بك.

ضع build/jekyll_lunr_js_search.rb داخل المجلد _plugins في جذر موقع Jekyll الخاص بك.

ستتم فهرسة المحتوى من جميع منشورات وصفحات Jekyll إلى ملف js/index.json جاهز لاستهلاك lunr.js. يحدث هذا في كل مرة يتم فيها إنشاء الموقع.

يتم توفير مكون jQuery الإضافي في js/jquery.lunr.search.js للتعامل مع تكوين lunr.js مع بيانات فهرس البحث JSON التي تم إنشاؤها بواسطة هذا البرنامج المساعد.

تبعيات البرنامج المساعد jQuery هي كما يلي.

مسج
lunr.js
Moustache.js
date.format.js
URI.js

يتوفر إصدار مُصمم مسبقًا من المكون الإضافي jQuery، إلى جانب جميع التبعيات المذكورة أعلاه، والمتسلسلة والمصغرة، على الرابط build/search.min.js.

2. انسخ البرنامج المساعد jQuery وأضف مرجع البرنامج النصي.

2 أ. استخدام البرنامج المساعد المصغر الذي تم إنشاؤه مسبقًا من الجوهرة.

سيقوم البرنامج الإضافي تلقائيًا بإضافة ملف JavaScript المصغر js/search.min.js إلى _site الخاص بك.

لاستخدامه، يجب عليك إضافة مرجع نصي إلى أسفل صفحة البحث المرشحة.

    <script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>

2ب. استخدام البرنامج المساعد jQuery وإدارة تبعياته بنفسك.

انسخ js/jquery.lunr.search.js إلى دليل JavaScript الخاص بموقع Jekyll.

أضف مرجعًا نصيًا إلى أسفل صفحة البحث المرشحة لـ jquery.lunr.search.js وكل من التبعيات الموضحة أعلاه.

 <script src="/js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/lunr.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/mustache.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/date.format.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/URI.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/jquery.lunr.search.js" type="text/javascript" charset="utf-8"></script>

تأكد من استخدام نفس إصدار lunr.js كالجوهرة. يتضمن إخراج سجل Jekyll الإصدار المستخدم.

من الناحية المثالية، يمكنك ربط ملفات .js الستة هذه وتصغيرها وتحسينها باستخدام uglify/Google Closure/etc لإنتاج ملف search.min.js واحد للرجوع إليه (أو استخدام البرنامج النصي المُعد مسبقًا كما هو موضح في 2أ أعلاه).

 <script src="/js/search.min.js" type="text/javascript" charset="utf-8"></script>

4. قم بإضافة نموذج بحث بإدخال استعلام كما هو موضح.

 <form action="/search" method="get">
  <input type="text" id="search-query" name="q" placeholder="Search" autocomplete="off">
</form>

يتم البحث أثناء الكتابة، بمجرد إدخال ثلاثة أحرف على الأقل.

يتيح توفير إجراء النموذج وتحديد طريقة الحصول للمستخدم الضغط على إرجاع/إدخال لإرسال البحث أيضًا. قم بتعديل عنوان URL لإجراء النموذج حسب الضرورة لصفحة البحث على موقعك.

5. أضف عنصرًا يحتوي على قائمة إدخالات نتائج البحث.

 <section id="search-results" style="display: none;"> </section>

قد يكون هذا مخفيًا في البداية لأن المكون الإضافي سيُظهر العنصر عند البحث.

6. قم بإنشاء قالب Moustache لعرض نتائج البحث.

 {% raw %}
<script id="search-results-template" type="text/mustache">
  {{#entries}}
    <article>
      <h3>
        {{#date}}<small><time datetime="{{pubdate}}" pubdate>{{displaydate}}</time></small>{{/date}}
        <a href="{{url}}">{{title}}</a>
      </h3>
      {{#is_post}}
      <ul>
        {{#tags}}<li>{{.}} </li>{{/tags}}
      </ul>
      {{/is_post}}
    </article>
  {{/entries}}
</script>
{% endraw %}

لاحظ استخدام {% raw %} و {% endraw %} لضمان عدم تجريد Jekyll من علامات الشارب.

الحقول المتاحة للعرض هي كما يلي.

إدخالات

قائمة إدخالات نتائج البحث (إلزامية).

تاريخ

تاريخ النشر الأولي للمشاركات، أو فارغ للصفحات. يمكن استخدامه لتبديل عرض التواريخ التالية في القالب {{#date}}has a date{{/date}} {{#!date}}no date{{/date}} .

نشر

تاريخ نشر المشاركة، بتنسيق "yyyy-mm-dd"، لاستخدامه في عنصر html5 <time datetime="{{pubdate}}"> (المشاركات فقط).

تاريخ العرض

تاريخ نشر المنشور، بتنسيق "mmmm dd, yyyy"، مثل 12 أكتوبر 2012 (المشاركات فقط)

عنوان

عنوان صفحة Jekyll أو منشورها.

عنوان URL

عنوان URL لصفحة أو منشور Jekyll الذي يمكن استخدامه لإنشاء رابط تشعبي <a href="{{url}}">{{title}}</a> .

فئات

يمكن استخدام الفئات (المصفوفة) لصفحة أو منشور Jekyll في حلقة {{#categories}}{{.}} {{/categories}} لإدراجها.

العلامات

يمكن استخدام العلامات (المصفوفة) الخاصة بصفحة أو منشور Jekyll في حلقة {{#tags}}{{.}} {{/tags}} لإدراجها.

is_post

قيمة Booelan، صحيحة إذا كان عنصر النتيجة الحالي عبارة عن منشور. يمكن استخدامه لتبديل عرض عناصر محددة في القالب {{#is_post}}is a post{{/is_post}}

7. قم بتكوين البرنامج المساعد jQuery لحقل إدخال البحث.

 <script type="text/javascript">
  $(function() {
    $('#search-query').lunrSearch({
      indexUrl  : '/js/index.json',           // url for the .json file containing search index data
      results   : '#search-results',          // selector for containing search results element
      template  : '#search-results-template', // selector for Mustache.js template
      titleMsg  : '<h1>Search results<h1>',   // message attached in front of results (can be empty)
      emptyMsg  : '<p>Nothing found.</p>'     // shown message if search returns no results
    });
  });
</script>

8. لاستبعاد الصفحات من فهرس البحث.

أضف إعداد exclude_from_search التالي إلى تكوين YAML لأي صفحة.

 exclude_from_search: true

أو قم بإضافة مجموعة من الاستثناءات (كتعبيرات عادية فردية) إلى ملف _config.yml الخاص بالموقع.

 lunr_search:
  excludes: [rss.xml, atom.xml]

9. أوقف الكلمات

يمكنك أيضًا تكوين ملف StopWords، والحد الأدنى لطول الكلمة المراد تضمينها في ملف الفهرس. يمكن القيام بذلك عن طريق إضافة كتلة بحث إلى _config.yml . القيم الافتراضية هي:

 lunr_search:
  stopwords: "stopwords.txt"
  min_length: 3

يجب أن يتكون ملف كلمات الإيقاف من كلمة واحدة في كل سطر، بأحرف صغيرة، بدون علامات ترقيم.

10. دليل البيانات البديل

يمكنك اختيار تخزين index.json و search.min.js و lunr.min.js في دليل مختلف مثل هذا:

 lunr_search:
  js_dir: "javascript"

تجريبي

تم نشر البرنامج المساعد للبحث على 10consulting.com/search. بعض أمثلة استعلامات البحث هي /search/?q=git, /search/?q=cqrs.

كما يتميز أيضًا بالتحميل عند الطلب لمكون البحث الإضافي .js عند التركيز على حقل البحث على الصفحة الرئيسية. انظر إلى طلبات شبكة المتصفح بالنقر فوق إدخال البحث.