tailwind布局实现响应式单页面博客列表和详情页代码-html代码-BFW代码库

代码语言：html

所属分类：响应式

代码描述：tailwind布局实现响应式单页面博客列表和详情页代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.3.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/prism.js"></script>
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Antonio:wght@500&family=Roboto&display=swap");
body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.antonio-500 {
  font-family: "Antonio", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

#post-content p,
#post-content .highlight {
  margin-bottom: 1rem;
}
#post-content h2 {
  font-size: 1.5rem;
}
#post-content h3 {
  font-size: 1.2rem;
}
#post-content h4 {
  font-size: 1.1rem;
  font-weight: bold;
}
#post-content ol,
#post-content ul {
  list-style: numbers;
  padding-left: 1.5rem;
}
#post-content ul {
  list-style: disc;
}
#post-content .highlight {
  background: #64646e;
  color: white;
  padding: 0.5rem 0.75rem;
}
</style>

  
  
</head>

<body translate="no">
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script>
      <script  type="text/babel">
const { useEffect, useRef, useState} = window.React;
  const { render } = window.ReactDOM;

// Function to convert date string to formatted date
const convertDate = (dateString) => {
  const date = new Date(dateString);
  const day = date.getDate().toString().padStart(2, "0");
  const month = date
    .toLocaleString("default", { month: "short" })
    .toUpperCase();
  const year = date.getFullYear();
  return { day, month, year };
};

// Function to truncate string with the last word
const truncateWithLastWord = (str, maxLength = 100) => {
  if (str.length <= maxLength) {
    return str;
  }

  const words = str.split(" ");
  let truncatedString = "";

  for (let i = 0; i < words.length; i++) {
    const word = words[i];
    const newLength = truncatedString.length + word.length + 1;
    if (newLength > maxLength) {
      break;
    }
    truncatedString += word + " ";
  }
  return truncatedString.trim();
};

// Function to remove HTML tags and truncate string
const cleanHtmlRegex = (str, maxLength = 100) =>
  truncateWithLastWord(str.replace(/<[^>]*>/g, ""), maxLength);

const cleanText = (str) => str.replace("<![CDATA[", "").replace("]]>", "");

const calculatePeriod = (postDate) => {
  const today = new Date();
  const diffInMilliseconds = today - postDate;
  const diffInDays = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));
  const diffInMonths = Math.floor(diffInDays / 30);
  if (diffInMonths === 0) {
    return "today";
  } else if (diffInMonths === 1) {
    return "1 month ago";
  } else {
    return `${diffInMonths} months ago`;
  }
};

// Post component
const Post = ({ id, title, date, text, hover, onClick }) => {
  const [hoveredPeriod, setHoveredPeriod] = useState("");
  const formattedDate = convertDate(date);
  return (
    <div
      className="grid grid-cols-12 gap-3 cursor-pointer group"
      onClick={() => onClick(id)}
    >
      <p className="text-sm text-center relative">
        <span className="text-transparent group-hover:text-gray-500 absolute top-0 right-0 transition-colors duration-400 ease-in-out">{hover}</span>
        <p class="text-zinc-600 text-lg group-hover:text-transparent transition-colors duration-400 ease-in-out">{formattedDate.day}</p>
        <p class="text-zinc-400 group-hover:text-transparent transition-colors duration-400 ease-in-out">{formattedDate.month}</p>
      </p>
      <div class="col-span-11">
        <h3 className="text-lg font-bold text-zinc-900 group-hover:underline">
          {title}
        </h3>
        <p className="text-zinc-400 group-hover:text-zinc-600 transition-colors duration-400 ease-in-out">
          {cleanHtmlRegex(text)}
        </p>
      </div>
    </div>
  );
};

// PostList component
const PostList = ({ posts, onPostClick }) => {
  return (
    <div className="space-y-4">
      {posts.map((post, index) => (
        <Post key={index} {...post} onClick={onPostClick} />
      ))}
    </div>
  );
};

// SinglePost component
const SinglePost = ({ post }) => {
  const formattedDate = convertDate(post.date);
  return (
    <div className="absolute p-12 left-0 top-12 pt-20">
      <p>
        <span className="text-zinc-700 mr-2">{formattedDate.day}</span>
        <span className="text-zinc-700 mr-2">{formattedDate.month}</span>
        <span className="text-zinc-400">{formattedDate.year}</span>
      </p>
      <h2 class="my-6 text-4xl">{post.title}</h2>
      <div
        id="post-content"
        dangerouslySetInnerHTML={{ __html: cleanText(post.text) }}
      />
    </div>
  );
};

// App component
const App = () => {
  const url = "/.........完整代码请登录后点击上方下载按钮下载查看