文件结构

HTML

• index.html 首页(轮播图、网站介绍、固定文章/工具推荐)
• nav.html 顶部导航栏
• footer.html 底部栏(copyright行)
• posts.html 帖子首页(分页显示帖子概况、搜索)
• post0.html 帖子-拓展欧拉定理：从快速幂到疾速幂
• post1.html 帖子-C语言输入流浅析
• post2.html 帖子-Python高阶函数浅析
• post3.html 帖子-git指令小结
• post4.html 帖子-线段树、树状数组和块状数组小结
• post5.html 帖子-记解决Ubuntu系统上的小问题几则
• post6.html 帖子-编程相关使用网站小推荐
• tools.html 工具首页
• tool0.html 工具-多功能计算器(常见算法函数计算，代码eval执行)
• tool1.html 工具-文本处理器(查找、替换、统计、正则搜索)
• tool2.html 工具-随机抽取器(多种模式的随机抽签模拟)
• tool3.html 工具-乱数假文生成器(中英)
• about.html 关于(联系方式)

CSS

css/ 下

• general.css 通用样式
• indexx.css 首页专用样式
• nav.css 导航栏专用样式
• footer.css 底部栏专用样式
• tools.css 工具首页专用样式
• tools_common.css 四个具体工具专用样式
• posts.css 帖子首页专用样式
• post_common.css 七个具体帖子专用样式
• star_canvas.css 首页星星月亮动画样式
• about.css 关于页专用样式

JS

js/ 下

• jquery.js jQuery 库
• index.js 首页脚本
• nav.js 导航脚本
• footer.js 底部栏脚本
• star_canvas.js 首页星星月亮动画脚本
• posts.js 帖子首页脚本
• post_info.js 帖子分类、各帖子概述信息、帖子代码块常量内容
• post_common.js 具体帖子通用脚本
• tools.js 工具首页脚本
• tool_common.js 工具通用脚本
• tool0.js 多功能计算器显示逻辑脚本、说明书常量
• tool0_thread.js 多功能计算器各函数具体实现
• tool1.js 文本处理器显示逻辑脚本、说明书常量
• tool2.js 随机抽取器显示逻辑脚本
• tool3.js 乱数假文生成器显示逻辑脚本、常用汉字表

图片

images/ 下

• banner1.png 首页横幅图片
• banner2.png 首页横幅图片
• banner3.png 首页横幅图片
• star.png 星星动画静态素材图
• moon.png 月亮动画静态素材图
• post0_0.png 帖子附图(欧拉定理数学表述)
• post0_1.png 帖子附图(扩展欧拉定理数学表述)
• post1_0.png 帖子附图(代码运行结果)

关键逻辑概述

通用

导航栏

加载

nav.js

具体逻辑：代码注入。即在具体要加载导航栏的网页中，设置一个 id 为 ifr 的 div 标签用于装载导航栏，然后在具体网页执行 nav.js，然后该 JS 将 HTML 代码以字符串形式传送到具体网页，并重新加载。

为了鲁棒性考虑了多种情况(跨域与否)。

当前高亮

比如当前在首页，导航栏当前位置高亮，主要是 build_href 函数，具体而言，通过读取当前 URL，截取 URL 的一部分名字(如得出 index)，然后查看是否跟当前导航栏名字一致，如果一致就高亮。

回到顶部

当页面太长时，浏览到下面时，点击回到顶部。主要是 set_goto_top 函数。

自动调整宽高

监听 resize 和 scroll 事件，如果调整了宽高，重新加载一次页面，因为 CSS 是按百分比设置的，所以能自动通过 CSS 计算新的宽高。下同。

底部栏

footer.js

主要逻辑代码是自动调整宽高，同上理。

首页

横幅轮播

index.js 的大部分逻辑都是这个相关的。

• 自动播放：具体实现为设置周期事件，每次在播放上一张图片消失的同时播放下一张图片出现的动画，从而实现轮播效果。播放结束更新相关状态。
• 手动跳转：点击左下方可以直接跳转到对应横幅，并播放跳转动画。

星星月亮动画

实现了首页星星和月亮若隐若现的效果。

具体而言，在 star_canvas.js 反复加载了多次同一个星星静态图，并通过给不同的 CSS 样式(star_canvas.css)设置了位置和旋转角度等，然后通过 CSS3 定义了几种若隐若现的动画，并通过 JS 将星星插入到具体 id 为 star 的标签上。月亮同理。

帖子首页

搜索

搜索帖子，主要通过 GET 方法实现，即在 URL 上添加参数代表搜索的要求(如 type 代表类型)，在 load_post 函数具体实现，找到具体满足要求的的帖子列表，如果超过每页显示的数量就分页显示，否则单页显示。

具体浏览哪一页通过 URL 上的 page 参数控制页数。

加载帖子概述

通过 generate_abbr 函数，动态地生成一个帖子概述，通过搜索找到帖子ID(pid)，即帖子位于常量数组的哪个下标，然后根据 ID 读取帖子的标题、日期、标签等内容，并动态组织成帖子信息块，生成的标签添加到 posts 标签里。

具体帖子

post_common.js

每一个帖子都用同一个 JS 生成，动态性较强。具体而言动态生成的部分包括：

标题信息

标题信息是帖子概述和具体帖子共用的，为了实现复用，所以只存了一份信息。通过 build_common 函数加载帖子的标题、标签、日期等具体信息，然后动态加载到网页首部。

渲染代码块

代码块即显示在帖子里的代码文本，属于帖子的一部分。

首先根据代码块的信息(HTML提供，在 render_all_code 进行读取)，读取代码常量(render_code)，将不能正常显示的特殊符号替换，然后处理好分行，合成到一个有序列表里，形成代码文本。

随机推荐

一个帖子的底部会随机推荐若干篇其他帖子。这个随机算法通过 select_except 具体实现，最后在构建帖子的 build_common 调用。

工具首页

tools.js

主要逻辑代码是自动调整宽高，同上理。

并批量地实现了点击跳转到具体逻辑。

多功能计算器

具体显示逻辑略(即读取说明书常量，动态注入到 HTML 里，和控制表单、按钮输入输出等代码)，下同略。仅概述核心逻辑。

整体逻辑：

• 加载网页时，事先通过 append_func_list 调用代码，加载具体的代码说明到前端，并通过 tool0_thread.js 定义对应的函数并加载。
• 用户输入要执行的计算代码(可执行的多行 JS 代码)，然后调用 _cal 函数，通过内置函数 eval 执行计算，并返回计算结果(保存在全局变量 _res)里，通过 _show 显示结果。

文本处理器

常用正则表达式通过动态方式加入到 HTML 列表里显示。

整体逻辑虽然长，但是很好懂，无非就是字符串统计、搜索，并显示搜索结果而已。

随机抽取器

整体逻辑虽然长，但是很好懂，无非就是多种情况下的具体随机抽取逻辑。为了提高性能进行了一定的优化和复杂度分析。

乱数假文生成器

具体生成逻辑实际上是随机抽取的延伸，即随机从字典里抽取字符，然后抽取一定的长度后抽取标点符号，加多点分类讨论即可。