讲真太香了，5分钟用GPT4写了一个Hack News咨询
原创讲真太香了，5分钟用GPT4写了一个Hack News咨询
原创
上图是我和GPT4的对话，全部是GPT4写的代码就生成了一个Hack News网页端，地址体验： https://hn.brzhang.club
，下面，我把我的实现步骤写出来。
第一步：我直接问GPT4
Q:假设我要使用next.js 来写一个 Hack news ，它的首页是列表，我改如何做，让我们一步一步思考?
以下是他的全部回答：
当然可以！使用 Next.js 构建一个 Hacker News 首页是个不错的选择。Next.js 是一个基于 React 的框架，用于构建服务器渲染和静态生成的 Web 应用。下面是一步一步的指南：
1. 创建项目：
首先，确保你已经安装了 Node.js 和 npm。然后，在命令行中运行以下命令来创建一个新的 Next.js 项目：
npx create-next-app hacker-news
cd hacker-news2. 安装依赖：
为了从 Hacker News API 获取数据，我们需要安装 `axios`。在项目根目录中运行以下命令：
npm install axios3. 设计组件结构：
在 `components` 文件夹中创建以下组件：
- `Header.js`：用于显示页面标题。
- `NewsList.js`：用于显示新闻列表。
- `NewsItem.js`：用于显示单个新闻条目。NewsList.js
import React from "react";
import NewsItem from "./NewsItem";
const NewsList = ({ stories }) => {
return (
<div>
{stories.map((story) => (
<NewsItem key={story.id} story={story} />
))}
</div>
);
};
export default NewsList;
NewsItem.js
import React from "react";
const NewsItem = ({ story }) => {
const { title, url, by, time, score, descendants, text } = story;
return (
<div>
<Link href={url ?? ""} target="_blank">
{title}
</Link>
<div
className="news-item__text"
dangerouslySetInnerHTML={{ __html: text }}
></div>
</div>
);
};
export default NewsItem;
4. 获取数据：
在 `pages` 文件夹中，打开 `index.js` 文件。我们将使用 Next.js 的 `getServerSideProps` 函数来获取数据。在文件底部添加以下代码：
import axios from 'axios';
export async function getServerSideProps() {
const response = await axios.get('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty');
const storyIds = response.data.slice(0, 30);
const stories = await Promise.all(storyIds.map(async (id) => {
const storyResponse = await axios.get(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`);
return storyResponse.data;
}));
return {
props: {
stories,
},
};
}5. 渲染列表：
在 `index.js` 文件中，导入并使用我们创建的组件。将以下代码添加到文件中：
import Header from '../components/Header';
import NewsList from '../components/NewsList';
export default function Home({ stories }) {
return (
<div>
<Header />
<NewsList stories={stories} />
</div>
);
} 然后，在 `NewsList.js` 和 `NewsItem.js` 组件中，使用传入的 `stories` 属性来渲染新闻列表。
6. 添加样式：
你可以使用 Next.js 内置的 CSS 支持来添加样式。在 `styles` 文件夹中创建一个名为 `global.css` 的文件，并在 `_app.js` 文件中导入它。然后，根据需要为每个组件添加样式。
现在，你应该有一个基本的 Hacker News 首页，显示前 30 条顶级新闻条目。你可以根据需要添加更多功能，例如分页、搜索和评论。
按照他说的这些步骤，做完这一步之后，我就看到了一个列表，很简单，没有样式。
第二步，我让他给美化一下：
为了优化卡片项的布局并添加点击卡片跳转到原文的功能，您可以按照以下步骤操作：
Q：优化一下卡片项的布局，By: Posted on:Score: Comments: 这些项可以作为细小的tag，增加点击卡片，跳转到对应的原文
GPT4的回答如下：
1. 首先，更新 `components/NewsItem.js` 文件，将 By、Posted on、Score 和 Comments 作为细小的标签显示，并为每个新闻条目添加一个链接。这是一个示例代码：
import React from 'react';
import Link from 'next/link';
const NewsItem = ({ item }) => {
const { title, url, by, time, score, descendants } = item;
return (
<div className="news-item">
<Link href={url}>
<a className="news-item__title" target="_blank">
{title}
</a>
</Link>
<div className="news-item__details">
<span className="news-item__detail">By: {by}</span>
<span className="news-item__detail">Posted on: {new Date(time * 1000).toLocaleString()}</span>
<span className="news-item__detail">Score: {score}</span>
<span className="news-item__detail">Comments: {descendants}</span>
</div>
</div>
);
};
export default NewsItem;2. 接下来，更新 `styles/NewsItem.module.css` 文件，添加一些样式以改进布局：
.news-item {
background-color: #f6f6ef;
border-radius: 5px;
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.news-item__title {
font-size: 18px;
font-weight: bold;
color: #000;
text-decoration: none;
margin-bottom: 10px;
display: block;
}
.news-item__details {
font-size: 12px;
color: #828282;
}
.news-item__detail {
margin-right: 10px;
}现在，每个新闻条目都将显示为一个卡片，包含标题、作者、发布时间、评分和评论数量。点击标题将在新标签页中打开原文链接。您可以根据需要进一步调整样式。
然后我就得到了这种的效果：可以到这个地址体验： https://hn.brzhang.club
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。