爱知乎 - 知乎日报网页版 使用Nodejs开源了

爱知乎 - 知乎日报网页版 使用Nodejs开源了

repo: https://github.com/nihgwu/iZhihu 详细的说明可以看我的博客 希望对学习 Node.js 的朋友有所帮助

爱知乎 我一直觉得这个站功能很简单，实现起来也很容易，开源与否其实没多大意义，精力花费的最多的反而是修改样式，页面布局基本上是不懂美工的我边修改边查看一行行码起来的，从最早的用 BlockIt 实现瀑布流到后来直接用浮动样式，去掉了 Lazyload 到后来的不同分辨率的适配，甚至还花了很多精力去适配老版本的 IE。。。

所以我后来又做了一个类似的站 时时刻刻 就不怎么上心了 XD


5 回复

爱知乎 - 知乎日报网页版 使用Node.js开源了

repo:

https://github.com/nihgwu/iZhihu

详细的说明可以看我的博客
希望对学习 Node.js 的朋友有所帮助

爱知乎

我一直觉得这个站功能很简单，实现起来也很容易，开源与否其实没多大意义，精力花费的最多的反而是修改样式。页面布局基本上是不懂美工的我边修改边查看一行行码起来的。从最早的用 BlockIt 实现瀑布流到后来直接用浮动样式，去掉了 Lazyload 到后来的不同分辨率的适配，甚至还花了很多精力去适配老版本的 IE。

示例代码

首先，我们来看一下如何使用 Node.js 和 Express 框架来搭建一个简单的知乎日报网页版。以下是一个基本的项目结构：

iZhihu/
├── app.js
├── package.json
├── public/
│   ├── index.html
│   └── styles.css
└── routes/
    └── zhihu.js

app.js

这是应用的入口文件。我们将在这里设置基本的路由和中间件。

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 引入路由
const zhihuRouter = require('./routes/zhihu');
app.use('/api', zhihuRouter);

// 启动服务器
app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

routes/zhihu.js

这是一个简单的路由文件，用于处理知乎日报的数据请求。

const express = require('express');
const axios = require('axios');
const router = express.Router();

router.get('/daily', async (req, res) => {
    try {
        const response = await axios.get('https://news-at.zhihu.com/api/4/stories/latest');
        const data = response.data;
        res.json(data);
    } catch (error) {
        console.error(error);
        res.status(500).json({ error: 'Failed to fetch data' });
    }
});

module.exports = router;

public/index.html

这是一个简单的 HTML 页面，用于展示数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知乎日报</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div id="app"></div>

    <script src="/api/daily"></script>
    <script>
        // 这里可以添加 JavaScript 代码来渲染数据
    </script>
</body>
</html>

public/styles.css

这是基本的样式文件，用于美化页面。

body {
    font-family: Arial, sans-serif;
}

#app {
    max-width: 800px;
    margin: 20px auto;
}

通过以上步骤，你可以搭建一个简单的知乎日报网页版。该项目的完整代码可以在 GitHub 上找到。希望这对你有帮助！


学习了

赞一个

你就是时时刻刻的作者呀。。。

这个项目名为“爱知乎”，是由 nihgwu 开源的一个基于 Node.js 的知乎日报网页版。该站点旨在为用户提供一个简单且易用的知乎日报浏览方式。你可以通过以下链接访问其 GitHub 仓库：

示例代码

为了更好地理解项目的结构和工作原理，这里提供一个简单的示例代码片段。这个代码片段展示了如何使用 Node.js 和 Express 框架来创建一个基本的 HTTP 服务器，并处理请求以获取数据。

const express = require('express');
const axios = require('axios');

const app = express();
const PORT = process.env.PORT || 3000;

app.get('/api/stories', async (req, res) => {
    try {
        const response = await axios.get('https://news-at.zhihu.com/api/4/news/latest');
        const stories = response.data.stories;
        res.json(stories);
    } catch (error) {
        console.error(error);
        res.status(500).send('Internal Server Error');
    }
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

代码解释

  1. 引入依赖:

    • express: 用于创建 HTTP 服务器。
    • axios: 用于发送 HTTP 请求获取数据。

  2. 创建应用实例:

    const app = express();

  3. 定义端口:

    const PORT = process.env.PORT || 3000;

  4. 路由处理:

    • /api/stories 路由用于获取最新故事数据。
    • 使用 axios 发送 GET 请求到知乎 API。
    • 返回 JSON 格式的数据。
    • 如果发生错误，则返回 500 错误状态码。

  5. 启动服务器:

    app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

项目背景

作者提到这个项目不仅仅是为了实现功能，更多的是为了展示如何使用 Node.js 进行开发。他花了很多时间调整样式和页面布局，以适应不同设备和浏览器。此外，他还提到后续制作了另一个类似项目《时时刻刻》。

总结

该项目不仅提供了基础的功能实现，还包含了样式和布局的详细调整，适合对 Node.js 有兴趣的学习者参考和学习。

回到顶部