前言
本文将详细介绍如何在Hexo博客中实现自动生成每日早报文章功能效果。
固定单页面访问
需要使用到 ALAPI 的 每日60秒早报 接口，可免费调用
注册登录后在 个人管理 => 个人中心 => 获取token
静态页面访问
如果只想生成一个固定的静态页面访问，可以直接使用以下代码，替换自己的token
将代码保存到一个html文件内，存放博客主目录source文件夹即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>每日早报</title>
</head>
<body>
<div style="text-align: center;"> <img src="https://v3.alapi.cn/api/zaobao?token=xxxxxxxxxxx&format=image"
alt="每日早报" width="100%"> </div>
</body>
</html>
|
page页面
创建一个page页面
hexo new page "daily-news-detail"
|
然后修改source\daily-news-detail\index.md文件，打开源码模式，粘贴以下代码，替换token内容
---
title: 每日早报
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>每日早报</title>
</head>
<body>
<div style="text-align: center;"> <img src="https://v3.alapi.cn/api/zaobao?token=xxxxxxxxxxx&format=image"
alt="每日早报" width="100%"> </div>
</body>
</html>
|
直接访问刚才生成的 daily-news-detail目录即可
每天生成新的文章
由于 Front Matter 是静态的，不能直接在 Markdown 文件中动态引用 JSON 文件的内容。
所以如果想仅生成一篇文章每天动态加载文章标题及封面也需要使用下面的方法。
在 主题目录scripts 文件夹下创建一个新的JavaScript文件，例如 fetch-daily-news.js，
我使用的主题是 Butterfly，具体目录为 themes\butterfly\scripts，替换代码中的token
const axios = require('axios');
const fs = require('fs');
const path = require('path');
const moment = require('moment');
moment.locale('zh-cn');
hexo.on('ready', () => {
const apiUrl = 'https://v3.alapi.cn/api/zaobao';
const token = 'xxxxxxxxxxx';
axios.get(apiUrl, {
params: {
token: token
}
})
.then(response => {
const data = response.data;
if (data.code === 200) {
let newsData = data.data;
const postDate = newsData.date;
const postDayOfWeek = moment(postDate).format('dddd');
const filePath = path.join(__dirname, '../../../source/_data/daily_news_'+postDate+'.json');
console.log('Daily news save data filePath is :', filePath);
fs.writeFileSync(filePath, JSON.stringify(newsData, null, 2));
const postTitle = `【每日早报】-${postDate} - ${postDayOfWeek}`;
const postContent = `---
title: ${postTitle}
date: ${postDate} 00:00:00
tags:
- 每日早报
categories:
- 每日早报
series: 每日早报
cover: ${newsData.head_image}
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>每日早报</title>
</head>
<body>
<div style="text-align: center;"> <img src="`+newsData.image+`"
alt="每日早报" width="100%"> </div>
</body>
</html>`;
const postFilePath = path.join(__dirname, '../../../source/_posts', `${postTitle}.md`);
fs.writeFileSync(postFilePath, postContent);
console.log('Daily news post generated successfully:', postFilePath);
} else {
console.error('Failed to fetch daily news:', data.msg);
}
})
.catch(error => {
console.error('Error fetching daily news:', error);
});
});
|
此处需要 用到两个插件 axios 和 moment
#安装 axios
npm install axios
#安装 moment
npm install moment
|
调用接口生成的数据会保存在博客主目录 /source/_data/daily_news_xxxx-xx-xx.json，如果没有_data目录可以手动创建一下，防止因找不到目录文件保存失败。
注意根据实际情况调整文件的存放路径
const postFilePath = path.join(__dirname, '../../../source/_posts', `${postTitle}.md`);
|
文章的标题，目录，标签，系列文章分类等也可自行调整
tags:
- 每日早报
categories:
- 每日早报
series: 每日早报
|
为了确保 Hexo 能够正确加载 _data 目录下的数据文件。可以在 _config.yml 文件中添加以下配置，确保 _data 目录被正确加载
如果你只想生成一篇文章，然后把这篇文章置顶，那只需要将生成的markdown文件名固定就可以了
const postFilePath = path.join(__dirname, '../../../source/_posts', `每日早报.md`);
|
这样每次执行 hexo g 时重新生成的文件会覆盖原来的文件
插件
安装
要在你的 Hexo 项目目录中安装此插件
npm install hexo-daily-news --save
|
配置
将以下配置添加到你的 _config.yml 文件中
如果当天多次执行 hexo g ，最好禁用插件，否则会频繁消耗api调用额度，目前免费账户每日请求上限为100条
hexo-daily-news:
enable: true
apiUrl: 'https://v3.alapi.cn/api/zaobao'
token: 'your-api-token'
|
使用
安装并配置好插件后，运行以下命令生成每日新闻文章
插件将从指定的 API 获取最新的新闻数据，将其保存为 source/_data 目录中的 JSON 文件，并在 source/_posts 目录中生成一个新的 Markdown 文章。
参考
時光
hexo-daily-news
