给安知鱼博客新增每日早报页面

给安知鱼博客新增每日早报页面

先看效果

image.png

修改方法

注册一个 免费API，获取个人 token

在博客根目录的 source 文件夹下新建一个 文件夹，命名为 news

在 news 文件夹 下新建 index.md 文件，内容如下（替换其中的 token 值）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
---
title: 每日早报
date: 2024-05-20
type: news
top_img: false
aside: false
---

<div class="image-container">
    <img src="https://v2.alapi.cn/api/zaobao?token=替换为自己申请的TOKEN&format=image" alt="每日早报">
</div>

<style>
    body, html {
        margin: 0;
        padding: 0;
        height: 100%;
        background: transparent;
    }
    .image-container {
        width: 100%;
        height: 90vh;
        overflow-y: scroll;
        display: flex;
        justify-content: center;
    }
    .image-container img {
        width: 90%;
        transform-origin: top;
        transition: transform 0.3s ease;
        transform: scale(1.6); /* 默认缩放设置为1.6 */
    }
    /* 针对移动端的适配 */
    @media (max-width: 768px) {
        .image-container img {
            width: 90%;
            object-fit: contain;
            transform: scale(1); /* 移动端不需要缩放 */
        }
    }
</style>

到主题配置文件的 menu 导航栏 新增一行：

1
每日早报: /news/ || anzhiyu-icon-dice-d20

VS 一键三连预览效果：hexo cl; hexo g; hexo s（git bash 命令为 hexo cl && hexo g && hexo s）

#安知鱼 #博客