从零构建赛事排名系统:数据处理、算法设计与可视化实战
这次我们来看一个关于“三角洲主播S2巅峰赛300进30晋级排名”的数据分析项目。这个项目本身不是一个软件工具或AI模型而是一个典型的赛事数据分析与可视化案例。它的核心价值在于通过一套系统化的数据处理流程将一场有300名主播参与的复杂赛事晋级结果转化为清晰、直观、可交互的排名榜单为观众、主办方乃至主播自身提供决策参考。对于技术开发者而言这个项目的重点不在于赛事本身而在于其背后可能涉及的技术栈和方法论如何从原始数据如积分、投票、直播数据中清洗、计算并生成排名如何设计一个公平、透明且可追溯的晋级算法以及最终如何将结果以网页、API或报表的形式呈现出来本文将从一个技术实现的角度拆解这类“赛事排名系统”的通用构建思路、核心模块、数据流设计以及可视化方案。无论你是想学习数据处理、Web开发还是需要为自己的社区活动、内部竞赛搭建一个轻量级的排名系统这篇文章都能提供一套可直接落地的技术框架和避坑指南。1. 核心能力速览能力项说明项目类型赛事数据清洗、计算、排名与可视化系统核心输入主播原始数据如场次积分、观众投票、有效时长、礼物价值等核心处理数据清洗、权重计算、总分排序、晋级逻辑判定输出形式静态排名网页、动态API接口、可导出报表CSV/Excel技术栈可选Python (Pandas/NumPy) 用于数据处理Flask/FastAPI 用于后端服务ECharts/Chart.js 用于前端图表数据库可选SQLite/MySQL部署门槛极低纯数据处理脚本可在任何有Python环境的机器运行Web服务部署需要基础服务器知识核心复杂度晋级规则与权重模型的设计确保公平性与可解释性适合场景线上/线下赛事排名、社区活动积分榜、内部竞赛结果公示、自动化报表生成2. 适用场景与使用边界适合谁用赛事运营人员需要快速、准确、自动化地处理大量参赛者数据并生成最终晋级名单。社区管理者为社区内的比赛、活动搭建一个透明的积分与排名系统。全栈/后端开发者学习如何设计一个从数据到展示的完整数据处理流水线。数据分析爱好者实践数据清洗、转换、聚合和可视化的完整流程。能解决什么问题数据整合将来自不同渠道如直播平台数据接口、手动录入的Excel表格、投票系统日志的异构数据统一格式。规则落地将复杂的文字版赛事规则如“总分70%场次积分30%观众投票取前30名晋级”转化为可执行的代码逻辑。结果公示生成一个公开、实时或定时更新的排名页面减少人工统计错误和争议。过程追溯记录中间计算过程当对结果有疑问时可以回溯查看每位主播的每一项得分明细。不适合什么场景高并发实时竞技系统如电竞游戏内的天梯排名需要更专业的游戏服务器和实时通信架构。主观评分占比过高的评选如才艺比赛最终排名严重依赖评委主观打分自动化系统仅能辅助汇总。需要高度保密、结果公布前绝对不允许泄露的评审任何自动化系统都存在潜在的数据泄露风险。合规与边界数据安全与隐私处理主播数据时需遵守相关个人信息保护规定公开的信息应仅限于赛事规则允许的范围如昵称、总分避免泄露手机号、身份证等敏感信息。规则透明晋级算法和权重必须公开或可查询确保结果公平公正经得起质疑。结果复核自动化系统输出结果后应有人工复核环节特别是处于晋级边缘的位次。3. 环境准备与前置条件构建一个基础的排名系统不需要高性能GPU重点在于数据处理和Web服务。基础开发环境操作系统Windows 10/11, macOS, Linux (Ubuntu/CentOS) 均可。Python 环境推荐 Python 3.8 及以上版本。这是数据处理的核心。包管理工具pip用于安装Python依赖。核心Python库数据处理pandas(数据操作),numpy(数值计算)Web框架 (可选)Flask(轻量) 或FastAPI(现代支持异步)数据库 (可选)sqlite3(内置轻量)或pymysql/sqlalchemy(连接MySQL等)图表库 (可选)pyecharts(生成静态HTML图表)或服务于前端库的API前端环境 (可选如果做Web展示)现代浏览器即可Chrome, Firefox, Edge。如果需要复杂交互可引入ECharts或Chart.js等JavaScript图表库。数据准备准备一份模拟或真实的赛事原始数据表如CSV或Excel格式。至少应包含字段主播ID、主播昵称、场次积分、观众投票数、有效直播时长等。4. 系统设计与模块拆解我们不直接提供“三角洲主播”的具体代码而是给出一个可复用的通用系统设计。你可以根据实际规则填充具体计算逻辑。4.1 数据层原始数据存储通常原始数据可能来自多个源头。建议先统一清洗并存储到一张raw_data表或一个CSV文件中。# 示例原始数据结构 (Python字典列表 或 Pandas DataFrame) raw_data [ {anchor_id: 1001, anchor_name: 主播A, match_score: 850, votes: 12000, live_duration: 45.5}, {anchor_id: 1002, anchor_name: 主播B, match_score: 920, votes: 9800, live_duration: 38.0}, # ... 更多数据 ]4.2 计算层晋级算法引擎这是核心。你需要一个独立的计算模块如ranking_calculator.py。# ranking_calculator.py import pandas as pd class RankingCalculator: def __init__(self, raw_df): self.raw_df raw_df.copy() self.result_df None def calculate_total_score(self): 根据规则计算总分 # 示例规则总分 场次积分 * 0.7 观众投票数 * 0.3 # 注意通常需要先归一化因为积分和投票数量级可能不同 df self.raw_df # 假设这里已经做了归一化处理生成 normalized_match_score 和 normalized_votes df[total_score] df[normalized_match_score] * 0.7 df[normalized_votes] * 0.3 self.result_df df return self def sort_and_rank(self): 排序并标记晋级 if self.result_df is None: self.calculate_total_score() # 按总分降序排序 df_sorted self.result_df.sort_values(bytotal_score, ascendingFalse).reset_index(dropTrue) # 添加排名从1开始 df_sorted[rank] df_sorted.index 1 # 标记前30名晋级 df_sorted[qualified] df_sorted[rank] 30 self.result_df df_sorted return self def get_top_n(self, n30): 获取前N名晋级名单 if self.result_df is None: self.calculate_total_score().sort_and_rank() return self.result_df.head(n).to_dict(records) def get_full_ranking(self): 获取完整排名 if self.result_df is None: self.calculate_total_score().sort_and_rank() return self.result_df.to_dict(records)4.3 服务层API接口提供使用 Flask 快速搭建一个提供排名数据的API服务。# app.py from flask import Flask, jsonify import pandas as pd from ranking_calculator import RankingCalculator app Flask(__name__) # 模拟加载数据 def load_data(): # 这里应从数据库或文件读取此处用模拟数据 data [...] # 你的原始数据 return pd.DataFrame(data) app.route(/api/ranking/top30, methods[GET]) def get_top_30(): df load_data() calculator RankingCalculator(df) top_30 calculator.get_top_n(30) return jsonify({code: 0, msg: success, data: top_30}) app.route(/api/ranking/full, methods[GET]) def get_full_ranking(): df load_data() calculator RankingCalculator(df) full_list calculator.get_full_ranking() return jsonify({code: 0, msg: success, data: full_list}) if __name__ __main__: app.run(host0.0.0.0, port5000, debugTrue)4.4 展示层前端页面一个简单的HTML页面通过JavaScript调用上述API并用ECharts渲染榜单。!-- ranking.html -- !DOCTYPE html html head meta charsetutf-8 titleS2巅峰赛晋级排名/title script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script style body { font-family: sans-serif; padding: 20px; } #chart { width: 100%; height: 600px; } .qualified { color: green; font-weight: bold; } /style /head body h1三角洲主播S2巅峰赛 - 300进30晋级排名/h1 div idchart/div script fetch(http://127.0.0.1:5000/api/ranking/full) .then(response response.json()) .then(result { if (result.code 0) { renderChart(result.data); } }); function renderChart(data) { const dom document.getElementById(chart); const myChart echarts.init(dom); const option { tooltip: { trigger: axis, formatter: {b}br/排名{c} }, xAxis: { type: category, data: data.map(item item.anchor_name), axisLabel: { rotate: 45 } }, yAxis: { type: value, name: 排名, inverse: true }, // 排名第1在顶部 series: [{ data: data.map(item ({ value: item.rank, itemStyle: { color: item.qualified ? #91cc75 : #5470c6 } })), type: bar, label: { show: true, position: top } }] }; myChart.setOption(option); } /script /body /html5. 部署与启动方式5.1 纯脚本模式最快验证如果你只需要一次性计算并生成排名表格可以完全不用Web服务。准备数据将原始数据保存为raw_data.csv。编写计算脚本在ranking_calculator.py中完善数据加载和计算逻辑。运行脚本python ranking_calculator.py输出结果脚本运行后可以将result_df输出到新的CSV文件或直接打印。# 在脚本末尾添加 calculator.result_df.to_csv(final_ranking.csv, indexFalse, encodingutf-8-sig) print(排名结果已保存至 final_ranking.csv)5.2 本地Web服务模式适合需要提供API或展示页面的场景。安装依赖pip install flask pandas组织项目文件your_project/ ├── app.py # Flask主程序 ├── ranking_calculator.py # 计算模块 ├── raw_data.csv # 原始数据 └── templates/ └── ranking.html # 前端页面 (如果需要)启动服务python app.py访问服务API接口浏览器或工具访问http://127.0.0.1:5000/api/ranking/top30前端页面将ranking.html放在templates目录并在app.py中添加路由返回该页面然后访问http://127.0.0.1:5000/5.3 生产环境部署建议使用Gunicorn代替Flask内置服务器提升并发能力。pip install gunicorn gunicorn -w 4 -b 0.0.0.0:5000 app:app使用Nginx反向代理处理静态文件、负载均衡和SSL。数据库化将原始数据和计算结果存入MySQL/PostgreSQL便于管理和历史查询。定时任务如果数据源更新使用cron(Linux) 或APScheduler定时触发计算和更新API数据。6. 功能测试与效果验证部署完成后需要系统性地测试整个流水线。6.1 数据计算准确性测试测试目的验证晋级算法是否与规则文档完全一致。操作步骤准备一份极小的测试数据集如5条记录手动计算这5人的预期排名和晋级状态。运行计算脚本或调用计算模块输出结果。对比手动计算结果与程序输出结果。预期结果两者完全一致。常见问题权重配置错误。排序方向错误升序/降序。归一化公式有误导致某项指标影响过大或过小。6.2 API接口功能测试测试目的验证Web服务能否正确响应请求并返回数据。操作步骤# 使用curl测试 curl http://127.0.0.1:5000/api/ranking/top30预期结果返回JSON格式数据包含code,msg,data字段data为包含30条记录的数组。判断成功HTTP状态码为200code为0数据条数正确且数据内容与计算脚本输出一致。6.3 前端展示测试测试目的验证网页能否正常加载并正确渲染图表。操作步骤确保后端服务正在运行。在浏览器中打开ranking.html页面或对应的Flask路由。检查页面元素标题、图表是否正常显示。检查图表数据鼠标悬停在柱子上查看提示框信息是否正确主播名、排名。检查晋级标记前30名的柱子颜色是否与31名之后不同根据代码配置。预期结果页面完整加载图表直观展示了300名主播的排名晋级区高亮显示。6.4 边界条件与压力测试同分处理设计两名主播总分完全相同的测试数据检查排名逻辑是否按第二指标排序是否允许并列。数据缺失某位主播的“观众投票数”字段为空程序是否能处理应视为0或采用默认值数据量将测试数据扩大到1000条观察计算速度和页面渲染性能。7. 资源占用与性能观察此类系统的资源消耗主要取决于数据量和计算复杂度。CPU/内存占用数据处理阶段Pandas加载和计算300条记录的数据对现代CPU来说几乎无感。内存占用主要取决于数据表大小通常很小几MB到几十MB。Web服务阶段Flask单进程服务在空闲时内存占用约50-100MB。并发请求时CPU和内存会有小幅上升。响应时间API响应对于300条数据从请求到返回JSON应在100毫秒以内。页面加载首次加载需要下载ECharts库约700KB后续加载仅传输数据几KB到几十KB速度很快。优化建议缓存计算结果如果原始数据不频繁变动可以将calculator.result_df缓存起来如使用functools.lru_cache或 Redis避免每次API请求都重新计算。前端分页/虚拟滚动如果排名列表非常长如超过1000条前端不应一次性渲染所有DOM节点应采用分页或虚拟滚动技术。数据库索引如果使用数据库且需要频繁按总分、排名查询在相应字段上建立索引。8. 常见问题与排查方法问题现象可能原因排查方式解决方案导入pandas或flask失败Python环境未安装相应库或存在多个Python版本冲突在终端执行pip list | grep pandas使用pip install pandas flask安装。确保使用的python和pip是同一环境下的。运行app.py提示端口被占用端口5000已被其他程序如其他Flask应用、macOS AirPlay使用执行netstat -ano | findstr :5000(Win) 或lsof -i :5000(Mac/Linux)1. 终止占用端口的进程。2. 修改app.py中的port为其他值如5001。前端页面访问API失败跨域错误浏览器安全策略阻止了从file://协议或不同端口的页面访问API打开浏览器开发者工具查看Console网络报错信息1. 将前端页面也由Flask服务托管放在templates和static目录。2. 在Flask后端启用CORS支持安装flask-cors。排名结果与预期不符1. 数据清洗规则有误。2. 计算公式错误。3. 排序逻辑错误。1. 打印出计算过程中的中间DataFrame。2. 对边界数据如第30、31名进行手动验算。1. 检查数据加载和清洗代码。2. 逐行调试计算函数对比变量值与预期值。3. 编写单元测试覆盖各种情况。页面图表不显示或显示异常1. ECharts库未成功加载。2. API返回的数据格式与前端预期不符。3. DOM容器大小未设置。1. 检查浏览器Console是否有JS错误。2. 检查Network面板看API请求是否成功数据格式是否正确。3. 检查#chartdiv的宽度和高度是否有效。1. 确保网络通畅能访问CDN。2. 调整API返回的数据结构确保与前端renderChart函数匹配。3. 为图表容器设置明确的宽高px或百分比。9. 最佳实践与使用建议配置与代码分离将晋级规则如权重0.7、0.3、晋级名额30等参数提取到配置文件如config.yaml或settings.py中而不是硬编码在计算逻辑里。这样规则变更时无需修改代码。版本化与备份对原始数据、计算脚本和最终结果进行版本管理如使用Git。每次计算前备份原始数据计算后存档输入、代码和输出便于审计和回溯。日志记录在关键步骤数据加载、计算开始、计算结束、异常捕获添加日志记录便于线上问题追踪。结果复核流程自动化系统生成初步排名后应设计一个复核流程。例如将处于晋级线附近如第28-32名的主播数据单独列出供人工二次确认。安全考虑API防护生产环境的API应考虑增加简单的认证如API Key或限流防止被恶意刷取。输入验证如果允许上传数据文件必须对文件格式、大小、内容进行严格校验防止恶意文件注入。扩展性思考多维度评分未来可能增加“内容质量评分”、“互动率”等新指标设计时应考虑计算模块的可扩展性。实时排名如果数据需要近实时更新可以考虑使用WebSocket或Server-Sent Events (SSE) 向前端推送排名变化。通过以上步骤你可以从零开始搭建一个类似“三角洲主播S2巅峰赛”的排名系统。它的核心价值在于将模糊、复杂的规则转化为清晰、自动化的流程不仅提高了效率也增强了结果的公信力。下次当你需要处理任何形式的排名、打分、晋级任务时这套技术框架都可以直接套用或作为参考起点。

相关新闻

AI驱动Pygame游戏开发:用大语言模型快速生成与迭代代码

AI驱动Pygame游戏开发:用大语言模型快速生成与迭代代码

1. 项目概述:当经典游戏框架遇上现代AI大脑最近在社区里看到不少朋友在讨论用AI生成代码,特别是结合游戏开发,感觉挺有意思的。我自己也花了些时间,把经典的Pygame游戏开发框架和DeepSeek这类大语言模型(LLM&#xff0…

2026/10/12 5:54:29 阅读更多 →
UE4 HTML5项目C++与JavaScript互调全链路优化策略

UE4 HTML5项目C++与JavaScript互调全链路优化策略

1. 项目概述:为什么UE4 HTML5项目的互调是个“硬骨头”?如果你正在尝试将你的UE4项目发布到HTML5平台,并且想让网页上的一个按钮能控制游戏里的角色跳跃,或者反过来,让游戏里的一个事件能触发网页弹出一个提示框&#…

2026/10/8 19:05:09 阅读更多 →
Unity音频开发进阶:AudioToolkit 8.0核心架构与实战指南

Unity音频开发进阶:AudioToolkit 8.0核心架构与实战指南

1. 项目概述:为什么我们需要一个专门的音频工具集?如果你在Unity3D里做过音频相关的开发,大概率经历过这样的场景:想给一个按钮加个点击音效,得拖个AudioSource组件,再拖个AudioClip,然后写几行…

2026/10/10 0:32:40 阅读更多 →

最新新闻

Doris JSON数组解析优化:从正则切分到JSONB+EXPLODE的实践

Doris JSON数组解析优化:从正则切分到JSONB+EXPLODE的实践

1. 这个版本优化到底解决了什么问题1.1 日志场景里的 JSON 数组字段做数仓的人大概率都有过这种经历:上游埋点日志为了省事,把一个事件的所有上下文全塞进一个大 JSON 字段里,其中一定会有个数组字段,比如用户浏览商品列表、曝光位…

2026/10/12 5:54:29 阅读更多 →
no_DS.zip:macOS 隐藏文件清理与跨平台交付包净化指南

no_DS.zip:macOS 隐藏文件清理与跨平台交付包净化指南

简介:一个仅763B的ZIP压缩包,内含run.bat与no-ds.js两个文件,面向对Windows批处理与JavaScript脚本协同工作感兴趣的开发者和技术爱好者。ZIP格式使这个小巧的脚本组合便于存储和传播,压缩包共2个文件,其中run.bat为批…

2026/10/12 5:54:29 阅读更多 →
Flutter开发实战:从Widget布局到状态管理与打包

Flutter开发实战:从Widget布局到状态管理与打包

1. 先说说我为什么盯着 Flutter 不放在移动开发这行做了快十年,我先后用过原生、跨平台方案,也带过几个项目从零搭架构。这期间最让我头疼的不是写业务逻辑,而是“一套代码交付多个平台”这件事:iOS 和 Android 的定制逻辑、多端对…

2026/10/12 5:54:29 阅读更多 →
在 Xcode 里使用 Cursor 编程:把 Base URL 改到 TaoToken 的配置与验证

在 Xcode 里使用 Cursor 编程:把 Base URL 改到 TaoToken 的配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/12 5:54:29 阅读更多 →
私有IP与公有IP详解:从RFC1918到NAT端口映射,彻底搞懂内网外网通信

私有IP与公有IP详解:从RFC1918到NAT端口映射,彻底搞懂内网外网通信

聊到 IP 地址,很多刚入门的朋友第一件事就是打开浏览器去搜“我的 IP 是多少”,然后看到一串类似58.xxx.xxx.xxx的数字,又去路由器后台看一眼,发现 WAN 口和 LAN 口的地址完全不一样,甚至和自己电脑上ipconfig出来的结…

2026/10/12 5:54:29 阅读更多 →
从Shape案例彻底搞懂Java抽象类设计与落地细节

从Shape案例彻底搞懂Java抽象类设计与落地细节

写这篇的时候,我心里其实挺有感触的。很多人学抽象类,都是从 Shape 这个类入手的——课本上画个圆、画个矩形,定义个area()方法,然后就没下文了。结果到了实际项目里,一用就懵:抽象类到底该放哪些方法&…

2026/10/12 5:53:28 阅读更多 →

日新闻

复古胶片颗粒感噪点合成器:Canvas ImageData 像素高斯杂色注入算法

复古胶片颗粒感噪点合成器:Canvas ImageData 像素高斯杂色注入算法

在数码相机、高清显示屏与现代矢量图形技术高度发达的今天,画面可以做到绝对的锐利、平滑与无瑕。然而,当一张秋日手账插画或拍立得照片过于“平整无瑕”时,往往会散发出一种冰冷生硬的“数码塑料感(Digital Plasticity&#xff0…

2026/10/12 0:00:59 阅读更多 →
活字印刷古籍线装排版:Canvas 竖排文字与栏线自适应算法

活字印刷古籍线装排版:Canvas 竖排文字与栏线自适应算法

在现代网页与移动端设计中,横排(Horizontal Layout)早已经成为了绝对的主流。然而,当我们翻开泛黄的线装古籍、宋版木刻诗集,或是欣赏一张茶道雅集的手写便签时,那种**自上而下纵向书写、自右向左逐列铺展&…

2026/10/12 0:00:59 阅读更多 →
周日晚间的“精神松绑减震器”:无压力情绪倾倒箱与温和轻声陪伴

周日晚间的“精神松绑减震器”:无压力情绪倾倒箱与温和轻声陪伴

每到周日的晚上八点到十点,很多人心里都会悄悄亮起一盏警示灯。 在心理学上,这种现象有一个专门的称谓——“周日夜晚焦虑症(Sunday Scaries)”。明天又是周一,闹钟又要重新在七点响彻卧房;脑海里仿佛有一个…

2026/10/12 0:00:59 阅读更多 →

周新闻

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

简介:基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码,面向计算机相关专业课程设计与期末大作业学生,以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程,…

2026/10/12 0:16:30 阅读更多 →
影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化,十个新手有八个栽在"往输入框里填东西"这件事上:要么填不进去,要么填了一半,要么直接把原来内容追加在后面。这背后的根因&…

2026/10/12 0:16:38 阅读更多 →
影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀:什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面,跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/12 0:16:43 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/11 10:45:37 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/11 14:36:53 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/11 14:36:54 阅读更多 →