用户原话:开源页开篇是从 GitHub README 直接移植的,「部分内容没有居中,有些图片
也没有正常显示,可以自行进行美化,无需完全一致……有些可以直接移植到关于页面」。
病根:README 是 GitHub 专用 markdown——`<div align="center">` 靠 HTML 属性居中
(本站按普通块渲染,故"没居中"),且依赖 7 类外链图(readme-typing-svg /
shields.io / github-readme-stats / streak-stats / activity-graph / snake /
komarev),慢网或被墙时全空白(故"图片不显示")。
T5 开源页重构:
- 新增 geek/GithubProfile.astro:头像 / 名字@handle / 定位叙述 / 社交图标 /
统计四格(followers、公开仓、总星标)/ 语言占比灰阶条(仅第一名 accent,
其余 tokens 灰阶)——**零外链图、零 iframe、零第三方徽章**
- 语言聚合复用 loadProjects 的结果;followers 与公开仓数走 GitHub REST
- 任一取数失败只隐藏该项(catch + warn),绝不炸构建
- opensource.astro / en:档案卡承接原 README 位置 → 热力图 → 项目墙;
README 渲染降级为兼容通道(intro_from=off 时不执行),yaml 注释写明
7 类外链图与 align 失效原因并标「不推荐」
- **修既有隐患**:GitHub API 请求原先不带 token,匿名 60 次/小时在密集构建下
被打满 → 项目墙退化成兜底 JSON(今天一度只剩 1 条)。现对 api.github.com
自动附 Bearer(token 读宿主 0600 文件,不入仓),墙恢复 16 条、总星标 0→66、
语言占比变真值
T6 关于页承接:
- about.yaml blocks 扩为 prose / tracks(兴趣版图)/ prose(关于我)/
linklist(找到我:本站·邮件·GitHub·自建 gitea·RSS)/ prose(本站如何构建),
双语齐备;AboutPage 零改动(blocks 早已驱动)
- 原则落地:关于页讲人,开源页讲开源,两边不再重复
验证: 构建 51 页 exit 0;content-lint 51 页 0/0/0;config-check 全过;
E2E **46/46 PASS**(37 原有 + 本包新增 9 项:置顶顺序与徽标、文章页计数、
模板彩色与折叠、瞬间评论区与只读计数、关于页块驱动);
dist/opensource 七类第三方外链零命中、第三方 img 数 0;数据实值:
语言占比 Python/TypeScript 各 36%、Shell/Rust/JS 各 9%
Spec: 2026-11-02_blog-5h-content-social (T5/T6)
Co-authored-by: GLM-5.3
43 lines
2.7 KiB
Plaintext
43 lines
2.7 KiB
Plaintext
---
|
||
import ProjectWall from '../components/geek/ProjectWall.astro';
|
||
import Heatmap from '../components/geek/Heatmap.astro';
|
||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||
import GithubProfile from '../components/geek/GithubProfile.astro';
|
||
import { t } from '../i18n/ui';
|
||
import { githubReadmeMarkdown, openSourceCopy, openSourceOptions, pageTypography, renderMarkdown } from '../lib/site-content';
|
||
|
||
// 叙述文案 + 置顶名单 + 项目墙选项均改由 content/site/opensource.yaml 供给(后台可改)
|
||
const copy = await openSourceCopy('zh');
|
||
const options = await openSourceOptions();
|
||
// 开篇来源:github-readme → 构建期取 profile 仓 README(缓存 content/.github-readme.md,失败回落 yaml blurb)
|
||
const readmeMd = options.introFrom === 'github-readme' ? await githubReadmeMarkdown() : null;
|
||
const readmeHtml = readmeMd ? await renderMarkdown(readmeMd) : null;
|
||
const typo = await pageTypography('siteOpenSource', 'opensource');
|
||
---
|
||
<BaseLayout title="开源 · wait4x" description="我的开源活动:仓库、贡献与本站源码">
|
||
<h1 class="page-title">开源<span class="count mono">Open Source</span></h1>
|
||
<div class={typo.className || undefined} style={typo.style || undefined}>
|
||
<GithubProfile locale="zh" />
|
||
{/* 兼容通道(不推荐):intro_from=github-readme 时把 profile README 原样渲染在档案卡下方。
|
||
它会引入 7 类第三方外链图(shields.io / readme-typing-svg / stats / snake / 访客徽章)并带失效的
|
||
align 居中;慢网或被墙时整片空白。默认 off,正常内容由上方原生档案卡 + opensource.yaml 叙述承载。 */}
|
||
{readmeHtml && <div class="blurb readme-intro" set:html={readmeHtml} />}
|
||
<Heatmap labels={{
|
||
title: t('heatmap_title', 'zh'), summary: t('heatmap_summary', 'zh'),
|
||
less: t('heatmap_less', 'zh'), more: t('heatmap_more', 'zh'), note: t('heatmap_note', 'zh'),
|
||
}} />
|
||
<ProjectWall limit={99} pinned={copy.pinned} options={options} />
|
||
</div>
|
||
</BaseLayout>
|
||
|
||
<style>
|
||
.page-title { font-size: var(--text-h1); color: var(--ink-1); display: flex; align-items: baseline; gap: var(--space-3); }
|
||
.count { font-size: 13px; color: var(--ink-4); }
|
||
.readme-intro :global(p) { margin-block: 0 var(--space-2); }
|
||
.readme-intro :global(ul) { margin-block: var(--space-1) var(--space-2); padding-left: 1.2em; list-style: disc; }
|
||
.readme-intro :global(h2), .readme-intro :global(h3) { font-size: 16px; margin: var(--space-3) 0 var(--space-1); }
|
||
.readme-intro :global(img) { max-width: 100%; height: auto; border-radius: 8px; }
|
||
.readme-intro :global(a) { color: var(--accent); }
|
||
.blurb { margin-top: var(--space-3); margin-bottom: var(--space-5); font-size: 15px; color: var(--ink-2); line-height: 1.7; max-width: 640px; }
|
||
</style>
|