开发日记之静态资源库主页设计

因为自己开发网站时经常会用到各种各样的静态资源，有些静态资源可以通过第三方的cdn直接引入，但是部分资源还是需要放置在自己的网站上的，这也造成了有些时候需要一个自己的静态库存储静态文件，但是如果只是一个静态库太过于简陋，便着手设计了一个单页。下面请看开发日志

  1. 构想和准备阶段：

    • 确定了创建静态资源仓库主页的目标，希望能够展示 GitHub 仓库中的静态资源文件，并实现自动更新时间的功能。
    • 定义了项目需求，包括展示仓库信息、自动更新时间、显示文件类型和注释内容等功能。
    • 选择了 GitHub 作为静态资源仓库，并准备了基本的 HTML 结构和样式，以及所需的 JavaScript 代码。

  2. 展示仓库信息和自动更新时间：

    • 开发了 HTML 结构和样式，包括仓库名称、创建者、描述以及更新时间等信息的展示。
    • 使用 GitHub API 获取仓库的最后更新时间，并通过 JavaScript 实现了自动更新功能，确保页面上的时间信息随着仓库的更新而实时更新。

  3. 展示文件类型和注释内容：

    • 修改 JavaScript 代码，利用 GitHub API 获取最新的提交信息。
    • 从提交信息中提取文件类型和注释内容，并在页面上进行展示。
    • 为了避免重复显示文件类型，对文件类型进行了去重处理，并以逗号分隔的形式展示。

  4. 项目优化和美化：

    • 使用 Bootstrap 的 CSS 框架和图标库进行页面美化，提升页面的可读性和视觉吸引力。
    • 选择了中国可用的 CDN 加速页面加载速度，并确保了资源的可访问性，提供更好的用户体验。
    • 采用中国风格的字体，如华文行楷，以增强页面的视觉效果，让页面更具个性和独特魅力。

  5. 测试和发布：

    • 对页面进行了全面测试，确保功能正常且页面稳定可靠。
    • 将页面部署到 GitHub Pages 上，为用户提供方便的访问方式，确保用户能够轻松查看我的静态资源仓库信息。