دعونا نبني موقعًا ثابتًا بمحتوى خارجي.
سأوضح لك في هذا المنشور كيف يمكنك عرض البيانات بشكل ثابت من أي مصدر بيانات باستخدام GatsbyJS.

غاتسبيJS

إذا كنت تستمتع بـ React وتريد موقع ويب متوافقًا مع المعايير وعالي الأداء، فيجب عليك إلقاء نظرة على GatsbyJS.

ماذا يفعل؟

سيقوم بتجميع كود React الخاص بك في مجموعة من ملفات HTML الثابتة.

لماذا يجب أن تهتم؟

1. أقصى أداء - عندما ينظر المستخدم إلى الويب الخاص بك، لا يتم تشغيل أي تعليمات برمجية من جانب العميل أو الخادم!
2. أسرع الصور - التحميل التدريجي للصور بالدقة المناسبة لجهاز المستخدم.
3. تحسين محركات البحث - HTML الثابت متوافق مع Google (الروبوتات). تتم معاقبة مواقع الويب البطيئة من خلال بحث جوجل!
4. React - تطوير الواجهة الأمامية الإنتاجية.
5. Typescript - اكتشف الأخطاء، قبل أن يراها المستخدمون (اختياري، ولكن يوصى به بشدة)!
6. المحتوى - قم بتوصيل واستخدام العديد من مصادر المحتوى الجاهزة أو قم بإضافة مصادرك الخاصة!

محتوى غاتسبي JS

يمثل GatsbyJS المحتوى كشجرة من العقد. يمكن أن تكون العقدة صورة وكتلة نصية.
على سبيل المثال، منشور المدونة عبارة عن مجموعة من العقد النصية والصورية.

يمكنك إنشاء العقد يدويًا في ملف gatsby-node.js الخاص بك. ولكن هناك طرق أسهل.

الإضافات

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

لم يتم العثور على البرنامج المساعد

إذا كان لديك مصدر بيانات لا تغطيه المكونات الإضافية الموجودة، فلنبني مصدرًا خاصًا بنا.

العملية بسيطة إلى حد ما، والجزء الوحيد المعقد هو الصور.

تحميل العقد

قم بإنشاء ملف gatsby-node.ts (أو js) في المجلد الجذر لمشروع gatsby.

أضف هذا الرمز للبدء. يتم استدعاء الأسلوب sourceNodes تلقائيًا عند إنشاء مشروع gatsby.

import { GatsbyNode } from "gatsby"
import { createRemoteFileNode } from "gatsby-source-filesystem"

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {
}

الآن دعونا نحضر بياناتنا. أنا هنا أستخدم منصة تطبيق https://inuko.net، لكن العملية مشابهة لأي مصدر.

interface IPost {
    id: string;
    title: string;
    content: string;
    image_id: string;
}
const fetchPosts = async () => {
    const postQuery = {
        entity: {
            name: "cms_content",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const posts = await fetchJson("/api/fetch", postQuery) as IPost[];
    return posts;
}

ودعنا أيضًا نجلب الصور التي سنحتاجها.

interface IImage {
    id: string;
    name: string; // sunset.jpg
    image_url: string; // https://sample.com/54565735235464322
}
const fetchImages = async () {
    const imageQuery = {
        entity: {
            name: "cms_image",
            allattrs: true,
            links: [{
                name: "cms_site", from: "siteid", to: "id", alias: "cs",
                filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] }
            }]
        }
    };
    const images = await fetchJson("/api/fetch", imageQuery) as IImage[];
    return images;
}

لدينا الآن قائمة بمشاركات (المدونة) وقائمة بالصور (الروابط).
في هذا المثال لدينا بنية بسيطة حيث تحتوي كل مشاركة على بعض المحتوى النصي ومعرف لصورة واحدة.

الخطوة التالية هي تحويل البيانات التي حصلنا عليها من خادمنا إلى بيانات يمكن أن يستخدمها غاتسبي.
يتم تمثيل البيانات في gatsby بواسطة *node*s، لذلك دعونا ننظر في كيفية تحويل بيانات الخادم لدينا إلى عقدة.

export const sourceNodes: GatsbyNode["sourceNodes"] = async ({
    actions: { createNode },
    createNodeId,
    createContentDigest,
    store,
    cache,
}) => {

    const posts = await fetchPosts();
    const images = await fetchImages();
    // create an object for image by id lookup
    const imageDict = images.reduce((d, c) => (d[c.id] = c, d), {} as { [name: string]: IImage });

    for (const post of posts) {
        // create a node from post
        const postNodeId = createNodeId(`XPost-${post.id}`)

        if (post.image_id && imageDict[post.image_id]) {
            const image = imageDict[post.image_id];
            const name = image.name;
            const url = image.image_url;
            const fileNode = await createRemoteFileNode({
                url: url,
                //store,
                cache,
                createNode,
                createNodeId,
                // !!! important !!!
                // If your image url does not have a valid image extension, this will tell the system what type of image we are adding
                ext: name.substring(name.lastIndexOf(".")),
            });

            post.mediaFile___NODE = fileNode.id

            post.internalId = post.id; // copy our internal post. id is replaced by gatsbyjs

            const nodeMeta = {
                id: postNodeId,
                parent: null,
                children: [],
                internal: {
                    type: `XPosts`,
                    mediaType: `text/json`,
                    content: JSON.stringify(post),
                    contentDigest: createContentDigest(post),
                },
            }
            createNode(Object.assign({}, post, nodeMeta))
        }
    }
}

نقوم بالتكرار على جميع المشاركات وإنشاء عقدة مقابلة لكل منها.
إذا كان المنشور يحتوي على صورة post.image_id، فإننا أيضًا ننشئ عقدة RemoteFileNode و
قم بإلحاقه بعقدة النشر
post.mediaFile____NODE = fileNode.id

ملاحظة مهمة ملاحظة: سيقوم gatsby تلقائيًا بإنشاء عقد صور من عقد ملفاتنا، ولكنه يحتاج إلى طريقة لاكتشاف أنها صورة.
إذا كانت عناوين URL الخاصة بك تحتوي على امتدادات ملفات أو إذا كان الخادم الخاص بك سيرد بنوع محتوى الصورة، فأنت جاهز تمامًا.
إذا لم يكن الأمر كذلك، فيمكنك تعيين ملحق صريح على عقدة الملف (png، jpg) لبدء إنشاء عقدة الصورة.
تحويلة: name.substring(name.lastIndexOf("."))

عقد الصورة

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

استهلاك العقد في الصفحات

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

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

const FeaturePage = (props:{}) => {
    const data = useStaticQuery(graphql`
        query featuresQueryEn {
            allXPosts(
                filter: {language: {eq: "en"}, pageid: {label: {eq: "features"}}}
                sort: {position: ASC}
                ) {
              edges {
                node {
                  id
                  content
                  title
                  mediaFile {
                    childImageSharp {
                      gatsbyImageData
                    }
                  }
                }
              }
            }
          }
    `);

    return Features} />
}

وقت العرض!

import { Link } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React from "react";

export const SectionGrid = (props: {data: any, title: string}) => {
    const edges = props.data.allXPosts.edges as any[];

    return 

        

            {props.title}
        
        {edges.map(edge => {
            const node = edge.node;
            return 

                

                    
                
                

                    
{node.title}
                    
{node.content}
                
            
        })}
    
}

سوف يتكرر هذا المكون على جميع العقد التي حصلنا عليها من الاستعلام الخارجي. وسوف يعرض قسمين، أحدهما لصورة المنشور والآخر لمحتوى النص.

هذا هو التفاف

لم يكن إنشاء موقع ويب ذو مظهر رائع وفعال أسهل من أي وقت مضى.
أدوات مثل Gatsbyjs (ومكوناتها الإضافية) ستتولى معظم العمل الثقيل بالنسبة لنا.
وبالتالي يمكننا تخصيص 100% من وقتنا للمحتوى والتصميم.

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

قرصنة سعيدة!