วิธีจัดรูปแบบเนื้อหา API ขนาดกลางให้สวยงามบนเว็บไซต์ React ของคุณ

การรวมเนื้อหาไดนามิกจากแพลตฟอร์ม เช่น สื่อ เข้ากับเว็บไซต์ของคุณจะช่วยเพิ่มประสบการณ์ผู้ใช้ของคุณด้วยการนำเสนอบทความที่สดใหม่และน่าดึงดูด ในบทช่วยสอนนี้ ฉันจะแนะนำคุณตลอดขั้นตอนการดึงข้อมูล Medium API และเรนเดอร์โดยใช้ส่วนประกอบ React ในขณะเดียวกันก็รับประกันการนำเสนอที่ดึงดูดสายตา

ต่อไปนี้คือลักษณะที่เว็บไซต์ของฉันมีบทความขนาดกลาง

การตั้งค่าส่วนประกอบบทความ

ขั้นแรก เรามาสร้างส่วนประกอบ React ที่ดึงข้อมูลและแสดงบทความขนาดกลางกัน ในโปรเจ็กต์ React ของคุณ ให้ตั้งค่าองค์ประกอบ Articles:

import { useState, useEffect } from "react";
import ArticleItems from "./ArticleItems";

const mediumArticle =
  "https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@yourusername";

const Articles = () => {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetch(mediumArticle)
      .then((res) => res.json())
      .then((data) => setArticles(data.items));
  }, []);

  return (
    <div className="article__container container grid">
      {articles.map((article, index) => {
        return <ArticleItems key={index} article={article} index={index} />;
      })}
    </div>
  );
};

export default Articles;

นี่คือสิ่งที่ API สื่อส่งคืน

การเพิ่มประสิทธิภาพการแสดงบทความ

ตอนนี้เรามาดูที่การเพิ่มความดึงดูดสายตาให้กับบทความที่ดึงมาแต่ละบทความกันดีกว่า ฉันจะปรับแต่งรูปแบบวันที่จาก “2023–08–22 06:13:56” เป็น “22 ส.ค. 2023” ที่เป็นมิตรกับผู้อ่านมากขึ้น นอกจากนี้ สิ่งสำคัญอีกประการหนึ่งคือต้องระบุว่าคำอธิบายประกอบด้วยแท็ก HTML ซึ่ง Regex จะต้องแยกวิเคราะห์

// Function to format a given date string
function formatDate(inputText) {
  const inputDate = new Date(inputText);
  const options = {
    year: "numeric",
    month: "short",
    day: "numeric",
  };
  return inputDate.toLocaleDateString(undefined, options);
}

// Function to extract content from HTML string using regex patterns
function extractContent(htmlString) {
  // Define regex patterns to match <h4> and <p> tags
  const h4Pattern = /<h4>(.*?)<\/h4>/s;
  const pPattern = /<p>(.*?)<\/p>/s;

  // Attempt to match patterns in the HTML string
  const h4Match = htmlString.match(h4Pattern);
  const pMatch = htmlString.match(pPattern);

  // If both <h4> and <p> tags are found, combine their content
  if (h4Match && pMatch) {
    const h4Content = h4Match[1];
    const pContent = pMatch[1];
    return `${h4Content} - ${pContent}`;
  } else if (pMatch) {
    // If only a <p> tag is found, use its content
    const pContent = pMatch[1];
    return pContent;
  }
  // Return null if no suitable content is found
  return null;
}

// Component to render article items
function ArticleItems({ article, index }) {
  // Extract content and format date for rendering
  const content = extractContent(article.description);
  const formattedDate = formatDate(article.pubDate);

  return (
    <div className="article__card" key={index}>
      <img
        className="article__img"
        src={article.thumbnail}
        alt={article.title}
      />
      <div className="article__body">
        <div className="article__header">
          <h3 className="article__title">{article.title}</h3>
          <p className="article__description">{content}</p>
        </div>
        <div className="article__details">
          <p className="article__date">{formattedDate}</p>
          <a href={article.link} target="_blank" className="article__button">
            Read more{" "}
            <i className="bx bx-right-arrow-alt article__button-icon"></i>
          </a>
        </div>
      </div>
    </div>
  );
}

export default ArticleItems;

จัดแต่งทรงผมเพื่อการนำเสนอที่ประณีต

หากต้องการสร้างเลย์เอาต์ที่ดูสวยงามสำหรับบทความสื่อของคุณ ให้ใช้สไตล์ CSS เพื่อตัดคำอธิบายบทความหลังสามบรรทัด:

/* Apply this CSS method to truncate article descriptions */
.article__description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

สรุป

การดึงและแสดงบทความขนาดกลางบนเว็บไซต์ React ของคุณสามารถใช้งานได้และดึงดูดสายตา คุณสามารถปรับแต่งเพิ่มเติมเพื่อให้ตรงกับการออกแบบและข้อกำหนดของเว็บไซต์ของคุณ

ขอบคุณที่อ่านจนจบ โปรดพิจารณาติดตามผู้เขียนและสิ่งพิมพ์นี้ ไปที่ Stackademic เพื่อดูข้อมูลเพิ่มเติมว่าเราทำให้การศึกษาด้านการเขียนโปรแกรมฟรีทั่วโลกเป็นประชาธิปไตยได้อย่างไร

วิธีจัดรูปแบบเนื้อหา API ขนาดกลางให้สวยงามบนเว็บไซต์ React ของคุณ

การตั้งค่าส่วนประกอบบทความ

การเพิ่มประสิทธิภาพการแสดงบทความ

จัดแต่งทรงผมเพื่อการนำเสนอที่ประณีต

สรุป

คำถามในหัวข้อ