自动为外部资料库生成首页并自动更新到 Netlify

[iblogc]

如果使用坚果云同步的话，是可以直接在 https://simpread.pro/@简悦昵称/reading/ 里看导出的稍后读快照，这个算是首页吧😂

@kchen0x 也提供了使用 netlify 来搭建资料库 #3823

而我只是在这个基础上为资料库增加一个首页，方便直接浏览

PC 首页效果预览

开始

首先

需要按照 #3823 使用 Netlify 搭建外部资料库

然后是本地的设置

先看下我的目录结构（将就看一下）：
--SimpRead
------output
----------html（这是资料库，就是简悦导出的 html 文件位置）
--------------.netlify
--------------favicon.png
--------------manifest.json
----------tools
--------------index_template.html
--------------generate_home_page.py

自动更新策略有两种：

1. 使用 RPA 软件实时监控资料库文件夹里的 html 文件有变化 > 执行 python 脚本 python generate_home_page.py > 执行 netlify deploy --prod -d .
2. 计划任务定时触发 > 执行 python 脚本 python generate_home_page.py > 执行 netlify deploy --prod -d .

我目前使用的是第一种，如果对于实时性要求不高，其实用第二种就行，第一种太重了，我自己后面也会使用第二种策略，干扰少

其中 python 脚本做了两件事：

1. 把资料库里 html 文件里 base64 编码的图片数据转换为文件，并更新 html 里的图片引用 src（因为我使用简悦导出的是离线 html，所以图片都转成 base64 放在 html 的 图片 src 里，本地直接打开浏览没啥剖，但上传到 netlify，在线打开会很卡，所以需要这步转换，如果你导出的不是离线 html 这一步没有副作用）
2. 读取 simpread_config.json，根据里面 unrdist 节点下的数据生成 index.htm 文件

其中 netlify deploy --prod -d . 操作的前提是根据 #3823 已经配置过好了，并且执行过下面命令

npm install netlify-cli -g
netlify login
netlify link

generate_home_page.py

脚本里注释已经写的很详细了，大家拿去用需要根据自己的目录结构修改下【绝对路径配置】或【相对路径配置】那一块的配置
前提电脑上上要有 python3

# -*- coding: utf-8 -*-

import os
import re
import json
from base64 import b64decode


def base64_2_file (html_file):

    """把 static_html_dir 根目录下 html 文件里 base64 编码的图片数据转换为文件，并更新 html 里的图片引用 src"""

    print (f'base64 处理：{html_file}')
    # 读取 HTML 文件
    with open (html_file, encoding='utf-8') as f:
        html = f.read ()

    # 使用正则表达式匹配 base64 字符串
    img_base64_regex = r'src="data:image/(?P<ext>.*?);base64,(?P<data>.*?)"'
    matches = re.findall (img_base64_regex, html)
    # print (matches)
    # 遍历图片匹配结果
    for i, match in enumerate (matches):
        print (f'  第 {i+1} 张图 ')
        ext = match [0]  # 图片扩展名
        data = match [1]  # base64 编码的数据

        # 解码 base64 字符串
        image_data = b64decode (data)

        html_file_name = re.search (r'[^\\/]+(?=\.html$)', html_file).group ()
        # 相对于 html 静态文件的图片路径
        image_file_relative = os.path.join (img_dir_prefix, f'{html_file_name}-img-{i+1}.{ext}')
        image_file = os.path.join (static_html_dir, image_file_relative)
        # 将图片写入文件
        with open (image_file, 'wb') as f:
            f.write (image_data)

        # 替换 HTML 中的 base64 为图片地址
        
        html = html.replace (f'data:image/{ext};base64,{data}', image_file_relative)

        # 输出修改后的 HTML 内容
        # print (html)
        # 保存修改后的 HTML 文件
        with open (html_file, 'w', encoding='utf-8') as file:
            file.write (html)


def batch_deal_html_of_base64 ():

    """
    遍历 static_html_dir 根目录下的所有 html 后缀文件
    并把 html 文件里 base64 编码的图片数据转换为文件，并更新 html 里的图片引用 src
    """

    for root, dirs, files in os.walk (static_html_dir):
        for file in files:
            if file.endswith (".html"):
                html_file = os.path.join (root, file)
                base64_2_file (html_file)


def generate_index_html ():

    """读取 simpread_config.json，生成 index.htm"""

    print (' 生成 index.htm')
    with open (simpread_config_file, 'r', encoding='utf-8') as f:
        simpread_config = json.load (f)

    sorted_data = sorted (simpread_config ['unrdist'], key=lambda x: x ['idx'], reverse=True)

    article_list_html = ""

    for i in sorted_data:

        article_title = f"{i ['idx']}-{i ['title']}"
        article_url = f"{i ['idx']}-{i ['title']}.html"
        article_date = i.get ('create', '')
        article_content = i.get ('desc', '')
        tags = ''
        for tag in i.get ('tags', []):
            tags += f'<span class="tag">{tag}</span>'

        article_list_html += f"""
    <li>
      <h2 class="article-title"><a href="{article_url}">{article_title}</a></h2> 
      <div class="article-tags">
          {tags}
      </div>
      <p class="article-date">{article_date}</p>
      <div class="article-content">
        <p>{article_content}</p>
      </div>
    </li>
    """

    with open ('./index_template.html', 'r', encoding='utf-8') as html:
        out_html = html.read ().replace ('{article_list}', article_list_html)
    # 保存为 index.html 文件
    # 使用.htm 后缀是为了 RPA 监控能跳过这个文件（RPA 监控 html 文件）
    with open (index_file, 'w', encoding='utf-8') as f:
        f.write (out_html)

# 相对路径配置，方便在自己不同设备上使用
# 简悦配置
simpread_config_file = '../../simpread_config.json'
# 静态 html 路径
static_html_dir = '../html/'
# base64 转成的图片存储的路径前缀（相对于 static_html_dir）, 文件夹需先手动创建
img_dir_prefix = 'images/'
# 静态首页
index_file = '../html/index.htm'

# 绝对路径配置
# # 简悦配置
# simpread_config_file = 'D:/ 资料 / SimpRead/simpread_config.json'
# # 静态 html 路径
# static_html_dir = 'D:/ 资料 / SimpRead/output/html/'
# # base64 转成的图片存储的路径前缀（相对于 static_html_dir）, 文件夹需先手动创建
# img_dir_prefix = 'images/'
# # 静态首页
# index_file = 'D:/ 资料 / SimpRead/output/html/index.htm'

if __name__ == '__main__':
    # 把 static_html_dir 根目录下 html 文件里 base64 编码的图片数据转换为文件，并更新 html 里的图片引用 src
    batch_deal_html_of_base64 ()
    # # 读取 simpread_config.json，生成 index.html
    generate_index_html ()

index_template.html

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <link rel="shortcuticon" href="favicon.png" />
        <link rel="icon" href="favicon.png" type="image/png">
        <link rel="manifest" href="manifest.json">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title > 文章列表 </title>
    </head>

    <body>

        <div class="container">
            <h1>📖 收藏的文章 </h1>

            <ul class="article-list">
                {article_list}
                <!-- <li>
                    <h2 class="article-title"><a href="41 - 如何编写完美的元描述？.html"> 文章标题 1</a></h2>
                    <div class="article-tags">
                        <span class="tag"> 标签 1</span>
                        <span class="tag"> 标签 2</span>
                    </div>
                    <p class="article-date"> 发布日期：2023 年 7 月 1 日 </p>
                    <div class="article-content">
                        <p > 这是第一篇文章的内容。</p>
                    </div>
                </li> -->
            </ul>

        </div>

    </body>

    <style>
        /* 添加下面这段 CSS */
        .article-title a {
            text-decoration: none;
            color: #000;
        }

        .article-title a:hover {
            color: blue;
        }

        /* 其他样式 */

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 0px;
        }

        h1 {
            text-align: center;
            margin: 10px 0;
        }

        .article-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .article-list li {
            margin-bottom: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 5px;
        }

        .article-title {
            font-size: 20px;
            margin: 0;
        }

        .article-date {
            color: #666;
            font-size: 12px;
        }

        .article-content {
            margin-top: 10px;
        }

        .tag {
            display: inline-block;
            padding: 2px 5px;
            font-size: 14px;
            border-radius: 4px;
            background: #eee;
            margin: 15px 8px 5px 0;
            font-size: 13px;
        }
    </style>

</html>

manifest.json

支持浏览器 PWA 用的，可以把网页简单的打包成一个应用

{
  "name": "收藏的文章",
  "short_name": "阅读",
  "icons": [
    {
      "src": "favicon.png",
      "type": "image/png",
      "sizes": "128x128" 
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#3f51b5"
}

favicon.png

手机效果预览