كيفية إنشاء سجل للبحث مع غاتسبي

لجميع احتياجاتك تدوين الملاحظات

تدوين الملاحظات هو مفتاح تذكر معظم الأشياء في حياتنا. كم عدد المرات التي عملت فيها في مشروع ما ، ثم بعد ثلاثة أشهر احتجت إليه للعودة إلى الكود ، واستغرق الأمر ساعات حتى تعود بسرعة؟ إذا كنت قد استغرقت بضع دقائق لتدوين بعض الوثائق ، فمن الممكن أن تكون قد قطعت إلى المطاردة.

أنا شخصياً أحفظ ملاحظاتي في كل مكان - في دفاتر ملاحظات ، في الغالب ، ولكن هنا أيضًا في هذه المدونة. في كثير من الأحيان عندما أنتهي من ميزة كبيرة وصعبة ، أرغب في تدوين العناصر الرئيسية فيها حتى أعود لاحقًا واكتشف كيف فعلت ما قمت به. بالإضافة إلى ذلك ، قد يساعد شخص آخر على طول الطريق. ومع ذلك ، هناك الكثير من الأشياء التي أتعلمها كل يوم تفلت من أيدينا. أستمر في التعلم وإعادة تعلّمهم وهذا غير فعال.

أردت مؤخرًا طريقة لتدوين الأشياء التي أتعلمها على مدار اليوم ، أو دروس أريد أن أضعها في الاعتبار. لكن هذا لا يكفي - أنا بحاجة أيضًا لأن أكون قادرًا على البحث في هذه السجلات حتى أتمكن من العثور على ما أبحث عنه بالضبط في الحال. هذا بالضبط ما سأريكم كيفية بنائه اليوم. هذا المشروع ، من البداية إلى الخلف ، استغرق مني ساعة ونصف.

غاتسبي

تم تصميم هذا المشروع باستخدام Gatsby ، وهو الإطار الأمامي الشهير بشعبية لإنشاء مواقع ويب ثابتة. سأقوم بتخطي جميع عناصر عرض المبيعات والانتقال إلى الكود ، ولكن إذا كنت تريد إجراء نسخ احتياطي لخطوة ، فقد كتبت تعليقًا طويلًا على مدونة حول سبب حبي للغاتسبي كثيرًا. باختصار: من الرائع أن تعرف React ، وربما تستحق التعلم على أي حال إذا كنت بحاجة إلى موقع ثابت.

الخطوة 1: قم بإنشاء موقع Gatsby جديد باستخدام قالب "Julia" الجميل

على افتراض أنك حصلت على عمل Gatsby CLI ، شغّل هذا لسحب قالب جوليا المكشوف بشكل جميل ولكن:

gatsby الجديد  https://github.com/niklasmtj/gatsby-starter-julia

قم بفتح gatsby-config.js وقم بتبديل التفاصيل الخاصة بك لـ "Julia Doe" تحت siteMeta. أنت في منتصف الطريق إلى هناك.

الخطوة 2: إضافة التسجيل

الآن نريد إضافة بعض الوظائف إلى الموقع. في دليل المحتوى ، أضف ملف تخفيض السعر أو عشرون. عشهم كما تريد. ستتبع هذا التنسيق:

---
العنوان: "مهما كان العنوان الذي تريده"
التاريخ: "2019-05-010"
مشروع: خطأ
المسار: "/ logs / some-slug-for-the-file"
العلامات: اختبار ، وثائق
---

# الاثنين 6 مايو ، 2019
* الوثائق المضافة ....

لاحظ أن المسار يجب أن يكون فريدًا لكل ملف. لقد قمت بتسميتي حسب التاريخ (مع الحصول على ملف واحد كل أسبوع) ولكن من الواضح أنه يمكنك فعل أي شيء تريده.

الخطوة 2 أ: اتبع وثائق Gatsby لإنشاء صفحات من تخفيض السعر

يمكنني أن أكرر ذلك ، لكن وثائق Gatsby نفسها سهلة ومباشرة بشكل لا يصدق. ستقوم بتثبيت المكونات الإضافية المطلوبة ، وتهيئتها في gatsby-config.js ، وإنشاء قالب لكيفية ظهور مشاركاتك ، وإعداد gatsby-node.js لإنشاء صفحات من ملفات تخفيض الأسعار.

لسرقة معلومات من مكان آخر على الإنترنت: إذا توجهت إلى صفحة مضيف محلي تعرف أنها لا تأخذك إلى أي مكان (أفضل مضيف محلي: 8000 / garbage) ، يمكنك رؤية جميع الروابط المتاحة لصفحتك. إنها طريقة سريعة للتحقق من قيام Gatsby بإنشاء جميع صفحات تخفيض السعر بشكل مناسب.

يبقيه نظيفة

تعلمت العمل في هذا المشروع أنه يمكنك تعيين مجلدات متعددة ليتم مسحها ضوئيًا بواسطة البرنامج المساعد لنظام الملفات في Gatsby:

{
  حل: `gatsby-source-filesystem` ،
  خيارات: {
    الاسم: صور
    المسار: `$ {__ dirname} / src / images` ،
  }،
}،
{
  حل: `gatsby-source-filesystem` ،
  خيارات: {
    اسم: `صفحات تخفيض السعر ،
    المسار: `$ {__ dirname} / src / content` ،
  }،
}،

لذلك لا توجد مشكلة إذا كنت تستخدم بالفعل نظام ملفات gatsby-source-لقراءة ، على سبيل المثال ، ملفات الصور الخاصة بك. لقد اختبرت أيضًا تداخلًا ، وسيحصل Gatsby على أي شيء في مجلد المحتوى الخاص بك بشكل متكرر - حتى تتمكن من المضي قدمًا وتنظيم أي طريقة تريدها.

اوقات سعيدة! إذا أخذت هذا التحويل إلى مستندات Gatsby ، فيجب أن يكون لديك الآن نظام سجل يعمل بشكل كامل.

الخطوة 3: إضافة البحث

الآن الجزء الممتع. سنضيف القدرة على البحث في سجلاتنا باستخدام المكون الإضافي للبحث المرن Gatsby lunr.

تهيئة

أولاً ، غزل add @ gatsby-مساهمة / gatsby-plugin-elasticlunr-search ، ثم سنضيف إلى gatsby-config.js:

{
  حل: `@ gatsby-مساهمة / gatsby-plugin-elasticlunr-search` ،
  خيارات: {
    // الحقول إلى الفهرس
    الحقول: [`title` ،` tags` ، `html`] ،
    محللون: {
      MarkdownRemark: {
        title: node => node.frontmatter.title ،
        العلامات: عقدة => node.frontmatter.tags ،
        path: node => node.frontmatter.path ،
        html: node => node.internal.content ،
      }،
    }،
  }،
}،

لاحظ أنني أضفت حقلًا غير مدرج في مستندات lunr: html. سنحتاج إلى هذا للبحث عن النص الكامل للسجلات ، بدلاً من البحث عن طريق العلامات فقط.

إضافة شريط البحث

من الواضح أن بإمكانك الذهاب إلى أي مكان. أنا وضعت حق لي على المؤشر تحت اسمي.

مكون شريط البحث:

استيراد رد فعل من "رد فعل"
استيراد {graphql ، StaticQuery} من "gatsby"
استيراد بحث من ". / البحث"

افتراضي التصدير () => {
  إرجاع (
     (
        
      )}
    />
  )
}

لا شيء يحدث هنا - فنحن فقط نحصل على فهرس البحث من بيانات البحث المرنة.

مكون البحث ، المنسوخ بشكل أساسي من مستندات lunr:

استيراد React ، {Component} من "react"
استيراد {Index} من "elasticlunr"
استيراد {Link} من "gatsby"
استيراد نصب من "@ العاطفة / نصب"
تصدير الفئة الافتراضية Search يمتد المكون {
  الولاية = {
    استفسار: `` ،
    النتائج: []
 }

  يجعل() {
    إرجاع (
      
                 
              {this.state.results.map (page => (             
  •               <رابط إلى = {"/" + page.path}> {page.title}               {':' + page.tags}                        ))}                     )   }   getOrCreateIndex = () => {     إرجاع this.index       ؟ this.index       : / / قم بإنشاء فهرس lunr مرن وهيدرات مع نتائج استعلام graphql       Index.load (this.props.searchIndex)   }   البحث = evt => {     استعلام const = evt.target.value     this.index = this.getOrCreateIndex ()     this.setState ({       الاستعلام،       // الاستعلام عن الفهرس باستخدام سلسلة البحث للحصول على [] من المعرفات       النتائج: this.index         .search (استعلام ، {expand: true})         / / خريطة على كل معرف وإرجاع الوثيقة كاملة         .map (({ref}) => {           إرجاع this.index.documentStore.getDoc (المرجع)         })،     })   } }

يمكنك إنشاء فهرس بحث ، وإحضار النتائج بناءً على سلسلة جزئية ، وترطيب هذه النتائج بناءً على ما يُرجع الفهرس ، ثم تعيينه لعرضه.

وهذا هو محمل الجد. سيتم بناء صفحات تخفيض السعر الخاصة بك عند تشغيل Gatsby build ، وسيتم فهرسة بحثك في المرة الأولى التي تحاول فيها البحث.

الخطوة 4: إضافة الأمن

أنا لا أضع أي أسرار دولة أو متغيرات env في هذه السجلات ، لكنني أفضل عدم وجود صاحب عمل محتمل يتعثر عليها ، ويرجع ذلك في الغالب لأنني أريد أن أكون حرًا في الحديث عن صراعاتي أو أن أكون واضحًا جدًا بشأن ما لا أفعله أعرف. إذا اضطررت إلى الرقابة بنفسي ، فسيؤثر ذلك على جودة سجلاتي.

في الوقت نفسه ، لا يمكن أن أزعجني تسجيل الدخول أو أي شيء خيالي للغاية. لذا اخترت أمانًا بسيطًا وأسرع وأسهل يمكن أن أتوصل إليه: رمز مميز محلي لـStorage. إذا كان لديك ، سترى السجلات ، وإذا لم يكن كذلك ، سيء للغاية. إليك كيف يعمل هذا.

في برنامج الهبوط - أي مكان آخر أريد حمايته:

const isBrowser = () => typeof window! == "undefined"
const isAuthenticated = isBrowser () && window.localStorage.getItem ('Authenticated')؛
[...]
{هل تمت المصادقة؟ : 
أنت لست العنبر ، لذلك لا يمكنك قراءة سجلاتها. }

لن أستخدم هذا أبدًا لمعلومات حساسة بالفعل ، لكن من الرائع قليلاً من راحة البال أن زملائي في العمل لن يتسللوا إلى سجلاتي الشخصية.

لاحظ أن فحص المستعرض (السطر الأول) ضروري لإجراء اختبارات على Netlify - إنه يعمل بشكل جيد بدونه.

المكافأة: نشر مع Netlify

تحدثت عن مقدار حب Netlify في مدونتي السابقة في Gatsby ، وما زلت أحبهم. من السهل جدًا توصيل الأشياء الخاصة بك مباشرة عبر الإنترنت.

كل ما عليك فعله هو التوجه إلى Netlify ، وتفويضهم بالوصول إلى جيثب حيث يتم تخزين سجلاتك ، وسيراقبون جيثب ويقومون بإصدار إصدارات جديدة لك كلما دفعت للإتقان. سيقومون أيضًا بإنشاء معاينات نشر عندما تقوم بإجراء PRS! إنه أمر رائع حقًا وأنا أوصي به بشدة.

إذا كنت ستقوم بإنشاء سجلات في عملية تخفيض السعر ، فإنني أوصي بشدة باستخدام نظام نشر بهذه السهولة ، ولا أعرف نظامًا آخر يتميز بالسلاسة.