كيفية عرض الصور داخل محتوى markdown باستعمال المكون Image الخاص ب nextjs

عبد النور محمد · 11 سبتمبر 2021

الكثير من مطورين المدونات يستخدمون markdown في كتابة التدوينات لذا قررت تجربته وقد أنشات مكون بسيط و استخدمت react markdown للعرض لكن كنت أتسائل عن كيفية عرض الصورة داخل ال markdown بالمكون Image الخاص ب nextjs بدلا من معالجته مباشرة الى html

import React from 'react'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

const markdown = `
---
title: "test post"
date: "June 24 2021"
excerp: "this is the excerp"
cover_image: "/images/posts/img1.jpeg"
---

## Heading Two

- Item 1
- Item 2
- Item 3

Hello world

![Image 1](/images/posts/img1.jpeg)`

ReactDom.render(
  <ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} />,
  document.body
)

سامح أشرف · 11 سبتمبر 2021

لعرض مكون next/Image من خلال Markdown سوف تحتاج إلى إنشاء مكون مخصص يحول صور Markdown إلى صور next/Image

إنشاء ملف Markdown.tsx، على النحو التالي:

import Image from 'next/image'
import ReactMarkdown from 'react-markdown'


const MarkdownComponents: object = {
  // سوف نكتب باقي الكود هنا
}

return (
  <ReactMarkdown
    children={your.content.here}
    components={MarkdownComponents}
  />
)

بعد ذلك سوف نضع الكود المسؤل عن تحويل الصور إلى مكون Next/Image، كالتالي:

// طريقة كتابة الصورة في كود Markdown: ![AltText {priority}{768x432}](...
p: paragraph => {
  const { node } = paragraph

  if (node.children[0].tagName === "img") {
    const image = node.children[0]
    const alt = image.properties.alt?.replace(/ *\{[^)]*\} */g, "")
    
    const isPriority = image.properties.alt?.toLowerCase().includes('{priority}')
    
    const metaWidth = image.properties.alt.match(/{([^}]+)x/)
    const metaHeight = image.properties.alt.match(/x([^}]+)}/)
    
    const width = metaWidth ? metaWidth[1] : "768"		// عرض الصورة الإفتراضي
    const height = metaHeight ? metaHeight[1] : "432"		// طول الصورة الإفتراضي

    return (
      <Image
        src={image.properties.src}
        width={width}
        height={height}
        className="postImg"	// يمكنك إضافة أصناف إفتراضية من هنا
        alt={alt}
        priority={isPriority}
      />
    )
  }
  return <p>{paragraph.children}</p>
},

باستخدام الكود أعلاه، يمكننا استخدام تحويل صورة Markdown إلى مكون Next/Image:

![AltText](/image.jpg)

يمكنك إضافة طول وعرض وخاصية priority أيضًا، على النحو التالي:

![AltText {priority}{768x432}](/image.jpg)

ملاحظة: اعتبارًا من Next.js 11، لم يعد المكون Next/Image يتطلب تحديد الارتفاع والعرض بوضوح للصور المحلية، ولكن لكي يعمل هذا، يجب إستخدام خاصية src الخاصة بالصورة من خلال جملة import، والتي لن تعمل معنا لأننا نقوم بإستيراد صورة معينة، لذلك يتوجب عليك تحديد طول وعرض الصورة.

الكود السابق يستبدل صور Markdown القياسية بمكون Next/Image. ولكن إذا فتحت الـ Console، فستجد أن هناك خطأ. وذلك لأنها يتم تغليف عنصر الصورة img بعنصر p، وهذا HTML غير صحيح (يعمل ولكنه غير صحيح وغير مستحب).

كيفية عرض الصور داخل محتوى markdown باستعمال المكون Image الخاص ب nextjs

السؤال

عبد النور محمد

1 جواب على هذا السؤال

Recommended Posts

سامح أشرف

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية