极客教程使用ReactJS和Tailwind的博客页面模板
博客页面是用于在网站上显示多个博客文章的网页。通过博客，人们可以分享他们的观点、想法和意见。博客页面通常包含一个导航栏和介绍，然后以卡片形式显示多个博客。
博客文章的三个基本特点
- 博客标题
- 博客内容
- 作者姓名和发布日期
博客页面与首页的区别
博客页面包含专门的部分以按顺序显示帖子，并提供一个平台，用户可以在其中分享他们的观点和想法，而首页只是网站的入口，用户可以获得关于网站的简要信息。
先决条件：
- ReactJS
- Tailwind CSS
- props
创建博客页面的步骤：
- 创建一个基本的React项目并安装所需的依赖项。
- 创建包含导航栏和欢迎幻灯片的基本布局。
- 使用Tailwind样式化组件。
- 动态传递数据给组件并在屏幕上呈现。
创建项目的步骤：
步骤1： 使用命令设置项目
npx create-react-app <<Project_Name>>
步骤2 ：使用命令导航到文件夹
cd <<Project_Name>>
步骤3 : 使用命令安装所需的依赖项
npm install -D tailwindcss
步骤4： 使用命令创建tailwind配置文件
npx tailwindcss init
步骤5：将 tailwind.config.js 文件修改为以下内容
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
步骤6： 在src目录中创建一个名为components的文件夹，并添加文件Banner.js、Navbar.js和Post.js
项目结构：
package.json中更新的依赖看起来会是这样的：
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
"devDependencies": {
"tailwindcss": "^3.3.3"
}
示例： 在相应的文件中添加以下代码
- App.js： 该文件导入所有组件并传递必要的数据
- Navbar.js： 页面上最顶部的导航组件
- Banner.js： 创建一个欢迎组件
- Post.js： 根据传递给组件的数据显示博客文章
- Index.css： 导入必要的Tailwind组件
// App.js
import './App.css';
import Navbar from './components/Navbar';
import Banner from './components/Banner';
import Post from './components/Post';
export default function App() {
// Adding Dummy Data to pass as props
const postData = [
{
department: "Web Tech",
title: "Top 7 JavaScript One liners",
author: "Amit Singh",
designation: "TCE",
info: `This post tells you about best approaches
to write single line codes in JavaScript.
Use this post as a quick guide to
short but important JS codes`,
},
{
department: "DSA",
title: "Top Interview DSA Questions",
author: "Jatin Sharma",
designation: "TCE",
info: `No need to worry about technical round interviews
as this post will guide you 步骤by 步骤to
prepare for DSA round`,
},
{
department: "Cotent",
title: "Best Antiviruses of 2023",
author: "Shobhit Sharma",
designation: "TCE",
info: `Worried about your PC safety? No Problem,
this post tells you about the best antiviruses
to choose in 2023`,
}
]
return (
<div >
<Navbar />
<Banner />
<div className='grid grid-cols-3 gap-4 p-8'>
{postData.map((e) => {
return <Post content={e} />
})}
</div>
</div>
)
}
Navbar.js
// Navbar.js
export default function Navbar() {
return (
<div>
<nav classNameName="bg-white fixed w-full
z-20 top-0 left-0
border-b border-gray-200">
<div className="flex flex-wrap items-center
justify-between mx-auto p-4">
<a href="https://geeksforgeeks.org/"
className="flex items-center">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
className="mr-2"
alt="GFG Logo" />
<span className="self-center text-2xl font-semibold ">
GeeksforGeeks
</span>
</a>
<div className="items-center justify-between hidden
w-full md:flex md:w-auto md:order-1"
id="navbar-sticky">
<ul className="flex flex-col p-4
md:p-0 mt-4 font-medium
border border-gray-100 rounded-lg
bg-gray-50 md:flex-row md:space-x-8
md:mt-0 md:border-0 md:bg-white">
<li>
<a href="#"
className="block py-2 pl-3
pr-4 text-white bg-blue-700
rounded md:bg-transparent
md:text-blue-700 md:p-0">
Home
</a>
</li>
<li>
<a href="#"
className="block py-2 pl-3
pr-4 text-gray-900 rounded
hover:bg-gray-100
md:hover:bg-transparent
md:hover:text-blue-700 md:p-0">
Posts
</a>
</li>
<li>
<a href="#"
className="block py-2 pl-3
pr-4 text-gray-900 rounded
hover:bg-gray-100
md:hover:bg-transparent
md:hover:text-blue-700 md:p-0">
About us
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
)
}
Banner.js
// Banner.js
export default function Banner() {
return (
<div className="h-32 w-full border-2
h-screen flex items-center
justify-center bg-emerald-500 text-white">
<p className="text-2xl"> Welcome to GeeksforGeeks Blog Page!!!</p>
</div>
)
}
Post.js
// Post.js
export default function Post(props) {
return (
// Accessing and Displaying the data passed as props
<div>
<div className="bg-white shadow-2xl w-96">
<div className="mx-auto max-w-7xl ">
<div className="mx-5 grid max-w-2xl
grid-cols-1 gap-x-8
gap-y-16 p-10 lg:grid-cols-1">
<article className="flex max-w-xl flex-col
items-start justify-between">
<div className="flex items-center gap-x-4 text-xs">
<time datetime="2023-03-16"
className="text-gray-500">
Mar 16, 2023
</time>
<a
href="#"
className="relative z-10 rounded-full
bg-gray-50 px-3 py-1.5
font-medium text-gray-600
hover:bg-gray-100">
{props.content.department}
</a>
</div>
<div className="group relative">
<h3 className="mt-3 text-lg font-semibold
leading-6 text-gray-900
group-hover:text-gray-600">
<a href="#">
<span className="absolute inset-0">
</span>
{props.content.title}
</a>
</h3>
<p className="mt-5 line-clamp-3 text-sm
leading-6 text-gray-600">
{props.content.info}
</p>
</div>
<div className="relative mt-8 flex
items-center gap-x-4">
<svg fill="#000000"
viewBox="0 0 32 32"
className="h-10 w-10 rounded-full"
xmlns=
"http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier"
stroke-linecap="round" stroke-linejoin="round">
</g>
<g id="SVGRepo_iconCarrier">
<path d=
"M 16 4 C 9.382813 4 4 9.382813 4 16 C 4 22.617188 9.382813 28 16 28 C 22.617188 28 28 22.617188 28 16 C 28 9.382813 22.617188 4 16 4 Z M 16 6 C 21.535156 6 26 10.464844 26 16 C 26 21.535156 21.535156 26 16 26 C 10.464844 26 6 21.535156 6 16 C 6 10.464844 10.464844 6 16 6 Z M 11.5 12 C 10.671875 12 10 12.671875 10 13.5 C 10 14.328125 10.671875 15 11.5 15 C 12.328125 15 13 14.328125 13 13.5 C 13 12.671875 12.328125 12 11.5 12 Z M 18 13 L 18 15 L 23 15 L 23 13 Z M 20.96875 17.03125 C 20.96875 18.714844 20.292969 19.882813 19.3125 20.71875 C 18.332031 21.554688 17.035156 22 16 22 C 13.878906 22 12.4375 21.140625 11.3125 20.03125 L 9.90625 21.46875 C 11.300781 22.839844 13.320313 24 16 24 C 17.554688 24 19.261719 23.414063 20.625 22.25 C 21.988281 21.085938 22.96875 19.289063 22.96875 17.03125 Z">
</path></g></svg>
<div className="text-sm leading-6">
<p className="font-semibold text-gray-900">
<a href="#">
<span className="absolute inset-0"></span>
{props.content.author}
</a>
</p>
<p className="text-gray-600">{props.content.designation}</p>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
);
}
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
运行应用程序的步骤：
步骤1：在终端中输入以下命令
npm run start
步骤2：打开您的网络浏览器，并输入以下URL
http://localhost:3000/
输出：
