程序聚合 软件案例 个人技术 IP 门户站-博客 / 工具箱 / 作品展示一体化平台

个人技术 IP 门户站-博客 / 工具箱 / 作品展示一体化平台

2026-07-10 17:10:09
行业:内容平台、工业互联网
载体:网站、H5
技术:JavaScript

业务和功能介绍

本项目是一个面向技术创作者的个人 IP 门户站,采用纯前端静态架构,整合了「技术博客发布」「第三方效率工具聚合评测」「个人开源作品展示」三大核心模块,目标是为访客提供一站式的技术内容消费与个人品牌展示体验。

核心功能包括:
1. 博客系统 :支持本地 Markdown 文章渲染,文章列表按技术 / 感悟 / 知识三分类筛选,支持标题/摘要/标签搜索,兼容 CSDN 外链归档与本地文章混合展示。
2. 工具箱聚合 :收录并评测 10+ 款真实第三方效率工具,按文本处理 / 编程开发 / AI 工具 / 设计创作 / 图像处理 / 效率办公分类,支持收藏、搜索、定价标签(真免费 / 部分免费 / 付费)筛选。
3. 作品展示 :集中展示 4 个已开源的真实项目(CSDN 博客爬虫、绿色软件管理器、一键环境搭建、访问量辅助工具),全部附带 Gitee 仓库链接。
4. 主题与交互 :支持深色 / 浅色主题切换并持久化到 localStorage,针对主题切换做了 FOUC(闪烁)优化;全站响应式布局,适配桌面端与移动端。
5. 公共组件 :统一导航栏、页脚、加载动画、滚动渐入动画、粒子背景、访问量统计、社交分享等可复用模块。

项目采用「配置驱动」设计,所有页面内容统一由 config.js 管理,新增文章、工具、作品时只需修改配置文件即可,无需改动页面结构。

项目实现

## 三、项目实现(约 580 字)
本项目为纯静态多页面站点,共 6 个 HTML 页面,数据层通过 config.js 集中配置,逻辑层按页面拆分为 blog.js 、 toolbox.js 、 utils.js 等独立脚本模块,降低耦合。

关键实现细节 :

1. Markdown 浏览器端渲染 :文章详情页通过 URL 参数 ?id=xxx 定位,使用 fetch 加载 posts/{id}.md ,经 marked.js 解析为 HTML,再由 highlight.js 完成代码高亮,实现无需后端的内容发布。
2. 多源文章合并 : blog.js 将本地 Markdown 文章清单与 CSDN 外链归档统一数据结构,按分类展示,并自动推断旧文章的分类。
3. 主题防闪烁优化 :在 中内联同步脚本,优先读取 localStorage 或系统偏好,在页面首次渲染前设置 data-theme ,避免深色模式出现白屏闪烁。
4. 工具箱交互 : toolbox.js 实现分类筛选、关键词搜索(防抖)、localStorage 收藏、定价信号灯与数据统计面板。
5. 安全与性能 :动态插入 DOM 的内容均经 Utils.escapeHtml 转义,防御 XSS;同时使用 DNS 预解析、字体预连接、CDN 加载、懒加载动画优化首屏体验。
难点与解决方案 :

- 主题切换闪烁 :通过 head 同步脚本在渲染前设置主题,消除 FOUC。
- Markdown 高亮时序 :在 fetch 回调中按「加载 → 解析 → 高亮 → 绑定复制」顺序执行。
- 公共组件复用 :将导航栏、页脚、主题切换、滚动动画等抽离到 utils.js ,各页面统一初始化。
项目成果 :6 个页面、3 大功能模块、1 套可复用公共组件;集成 4 个真实开源项目、10+ 款工具评测、本地与 CSDN 文章归档;全站支持响应式布局与深浅主题切换;纯静态部署,无需后端和数据库。
上线网址:https://yibeigen.pages.dev/

示例图片视频


艺杯羹
30天前活跃
方向: 后端-Java、前端-Web前端、
交付率:100.00%
相似推荐
Java 应用集群迁移与 Elasticsearch 数据同步
一、背景与目标 客户因业务调整,需要将现有生产环境的网站服务及数据完整迁移至新服务器。涉及约 10 个 Java 网络应用程序及配套的搜索、消息队列服务。目标是在保证数据完整性的前提下,实现业务的平滑割接,确保迁移后服务可正常访问。 二、功能模块 1.全量服务迁移: 涵盖 Elasticsearch 7.8.0 搜索引擎、Nginx 反向代理、RabbitMQ 消息队列及 Redis 缓存服务的部署与配置还原。 2.Java 应用部署: 迁移并配置 10 个左右的 Java 后端应用,恢复其 JVM 参数及配置文件。 3.数据一致性保障: 执行数据库与索引数据的导出导入操作,确保新旧环境数据一致。
CentOS7 Docker 基础运行环境搭建与组件部署
客户需要在单台 CentOS 7 服务器上快速构建一套标准化的后端开发与运行环境。目标是替代繁琐的手动安装过程,通过容器化技术统一部署 MySQL、MongoDB、Redis、Kafka、Zookeeper、MinIO 等中间件,并预置 GoLang 开发环境,确保环境的一致性和可移植性。 功能模块: 1.中间件容器化: 集成 MySQL 5.7+、MongoDB 6.0+、Redis 7.0+、Kafka 及 Zookeeper 等核心组件,通过 Docker Compose 进行统一编排启动。 2.对象存储服务: 部署 MinIO 对象存储,用于非结构化数据的存储测试。 3.环境初始化: 编写初始化脚本,自动完成各组件的用户名密码配置(如 mysql/mongodb/redis/minio 统一认证),并安装 GoLang 1.18 及 Git 工具链,交付即可用的基础镜像环境。
考霸APP
面向小学、初中、高中学生,主打本地名校真题、同步教材、AI 智能刷题,题库超 350 万道,适配人教版、北师大版等主流教材版本。 核心功能 本地真题资源:名校月考、联考、教研室统考、分班考试卷,贴合本地考情 视频讲解:试卷、难题配套名师视频,支持投屏观看 AI 错题本:自动归集错题,按知识点分类;AI 举一反三推送同类变式题,做一道通一类;学情统计,定位薄弱知识点 音频磨耳朵:语文、历史、道法等文科考点音频,通勤碎片时间背诵记忆 同步教材练习:同步课本章节预习、课后巩固,试卷支持下载打印 PDF 备考计划:寒暑假提分计划、一轮二轮复习、中考真题专项训练
微信小程序商城
本项目围绕微信小程序商城及服务业务场景进行开发,集商品展示、在线预约、订单管理、微信支付、用户中心、服务管理和数据统计等功能于一体。用户可通过小程序完成商品浏览、服务预约、订单提交、在线支付及订单查询等操作,企业则可通过管理后台统一管理商品、服务、用户、订单、支付记录及运营数据,并可根据后续业务需求扩展会员、优惠券、积分、物流配送、消息通知及第三方系统接口等功能。
山姆拼团小程序
一、立项背景和目标 山姆会员店商品多为大容量家庭装,个人/小家庭用户常面临单品分量过大、不易储存或单独购买起送门槛高的问题。本项目旨在打造一款专为山姆商品设计的“社区/同城拼单与分装小程序”,支持用户快速发起拼单、凑单分装、分摊会员优惠与配送费,降低购买门槛,提升商品流通与履约效率。 二、软件功能与核心功能模块 1. 商品与拼团管理模块:支持山姆商品目录展示、拼单发起(支持按份数/按件拆分拼团)、拼团时效倒计时与成团状态流转。 2. 订单与支付分账模块:集成微信支付与预授权机制,支持成团自动扣款、拼团失败自动原路退款及差额多退少补。 3. 履约配送与自提核销:支持团长代收分装、同城配送对接、社区自提点选择及到货动态取件码核销。 4. 社交裂变与通知提醒:提供拼团海报一键生成、微信群转发分享及基于模板消息的成团/发货进度实时提醒。 三、业务流程与功能路径 团长/用户选择山姆商品并发起拼单 -> 设定拼团规则(成团人数/件数/有效时间)并分享至微信群或好友 -> 参团成员加车支付参团 -> 满员触发成团事件与采购通知(未满员超时自动退款) -> 商品到货团长分装/核销自提 -> 完成订单闭环。
帮助文档   Copyright @ 2021-2024 程聚宝 | 浙ICP备2021014372号
人工客服