mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-15 11:12:54 +02:00
docs: update README
- Completely revamp README structure and content - Add detailed project description, demo links, and feature list - Include performance metrics and deployment instructions - Update acknowledgments and project roadmap - Add Lighthouse score SVG - Minor updates to example posts and image paths
This commit is contained in:
radishzzz
parent
807459d6ed
commit
fd9db66ac8
8 changed files with 232 additions and 52 deletions
112
README.md
112
README.md
|
|
@ -1,57 +1,79 @@
|
|||
# 重新编排
|
||||
Retypeset 是一款基于 [Astro](https://astro.build/) 框架的静态博客主题，中文名为重新编排，最初灵感来自 [Typography](https://astro-theme-typography.vercel.app/)。本主题以原主题风格为基础，通过建立统一的色彩、版式、字体规范，对所有页面都进行重新编排，力求还原活字印刷时代的阅读体验，同时不失现代设计的优雅与简约。处处皆为细节，方寸尽显优雅。
|
||||
# Retypeset
|
||||
|
||||
## 🚧 进度
|
||||
当前开发进度约 50%，暂不建议使用本主题
|
||||
一款基于 [Astro](https://astro.build/) 开发的博客主题。
|
||||
|
||||
## 🔎 预览
|
||||
- [开发预览](https://retypeset.radishzz.cc/)
|
||||
- [移动端设计图](https://mastergo.com/file/151079538766773?fileOpenFrom=home&page_id=M&source=link_share&shareId=151079538766773)
|
||||
- [主题配置介绍](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts)
|
||||
> 正在开发中，暂不建议使用
|
||||
|
||||
<!-- 首页宣传图：重新编排，再现版式之美 -->
|
||||
|
||||
## 🔎 Demo
|
||||
|
||||
- [Retypeset](https://retypeset.radishzz.cc/)
|
||||
- [移动端设计稿](https://mastergo.com/file/151079538766773?fileOpenFrom=home&page_id=M&source=link_share&shareId=151079538766773)
|
||||
|
||||
## ✨ 特征
|
||||
|
||||
- 基于 Astro 与 UnoCSS 开发
|
||||
- 支持 RSS、Sitemap、OpenGraph、MDX、LaTeX
|
||||
- 亮色/暗色模式
|
||||
- i18n 多语言
|
||||
- 优雅的过渡动画
|
||||
- 中文排版优化
|
||||
- 响应式设计
|
||||
- 评论系统
|
||||
- 高度自定义
|
||||
|
||||
## 🚀 性能
|
||||
[PageSpeed Insights](https://pagespeed.web.dev/analysis/https-retypeset-radishzz-cc/f3h9h891jn?form_factor=mobile)
|
||||
|
||||
## ✨ 特征：
|
||||
1. 工具：基于 Astro、Typescript 与 Unocss 开发
|
||||
2. 扩展：支持 RSS、Sitemap、MDX、LaTeX 等
|
||||
3. i18n ：支持简体中文、繁体中文、日语、英语、西班牙语、俄语
|
||||
4. 按键：支持多语言切换、亮暗主题切换、返回顶部/主页
|
||||
5. 字体：包含初夏明朝体 VF、Snell Roundhand SF、STIX Two Text VF，无商用/嵌入限制
|
||||
6. 排版：针对 CJK 字体，使用赫蹏进行排版样式增强
|
||||
7. 动画：支持 View Transitions 与 GSAP
|
||||
8. 性能： 最小化 CSS 与 JavaScript，支持资源预加载、图片懒加载
|
||||
9. 配置：支持切换黑体/宋体、设置评论、站点验证、自定义页脚等
|
||||
<p align="center">
|
||||
<a href="https://pagespeed.web.dev/analysis?url=https%3A%2F%2Fretypeset.radishzz.cc%2F">
|
||||
<img width="710" alt="Retypeset Lighthouse Score" src=Retypeset-lighthouse-score.svg>
|
||||
<a>
|
||||
</p>
|
||||
|
||||
## 🎯 TODO
|
||||
1. 英文 readme
|
||||
2. waline 评论
|
||||
3. 目录
|
||||
4. 搜索
|
||||
5. 自动生成 OG
|
||||
6. GSAP
|
||||
7. 主题说明文档
|
||||
8. 优化 heti css
|
||||
9. 自定义文章 slug
|
||||
10. 首页同步滚动
|
||||
11. img to figure
|
||||
12. 样式 bug 测试
|
||||
13. 内存异常增长测试
|
||||
## 📦 部署
|
||||
|
||||
## 📦 安装
|
||||
Fork and Deploy
|
||||
1. 点击 [`Fork`](https://github.com/radishzzz/astro-theme-retypeset/fork) 克隆仓库。
|
||||
|
||||
## ⏫ 更新
|
||||
Sync Fork
|
||||
2. 点击 `Deploy to Netlify` 或 `Deploy (to Vercel)`。
|
||||
|
||||
## 📝 文档
|
||||
TODO
|
||||
 [](https://app.netlify.com/start)
|
||||
[](https://vercel.com/new)
|
||||
|
||||
## 💖 感谢
|
||||
优秀主题参考
|
||||
- [Typography](https://astro-theme-typography.vercel.app/)
|
||||
3. 选择对应仓库，点击 `Deploy` 即可。
|
||||
|
||||
参考 [Astro 部署指南](https://docs.astro.build/zh-cn/guides/deploy/) 可选择其它平台进行部署。
|
||||
|
||||
## 更新
|
||||
|
||||
1. 参考 [GitHub 文档](https://docs.github.com/zh/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork)。
|
||||
|
||||
2. 在克隆仓库中执行 `Sync fork` 同步最新分支。
|
||||
|
||||
3. 不要点击 `Discard Changes` 放弃你的更改。
|
||||
|
||||
## 📄 文档
|
||||
|
||||
正在施工中...
|
||||
|
||||
- [主题配置](https://github.com/radishzzz/astro-theme-retypeset/blob/master/src/config.ts)
|
||||
|
||||
## ❤️ 感谢
|
||||
|
||||
- [Typography](https://github.com/moeyua/astro-theme-typography)
|
||||
- [Fuwriu](https://github.com/saicaca/fuwari)
|
||||
- [Astro Paper](https://github.com/satnaing/astro-paper)
|
||||
- [Redefine](https://github.com/EvanNotFound/hexo-theme-redefine)
|
||||
- [AstroPaper](https://github.com/satnaing/astro-paper)
|
||||
- [赫蹏](https://github.com/sivan/heti)
|
||||
- [初夏明朝体](https://github.com/GuiWonder/EarlySummerSerif)
|
||||
|
||||
## 🌟 Star History
|
||||
TODO
|
||||
## ⭐ Star History
|
||||
|
||||
<p align="center">
|
||||
<a href="https://star-history.com/#radishzzz/astro-theme-retypeset&Date">
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=radishzzz/astro-theme-retypeset&type=Date&theme=dark" />
|
||||
<source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=radishzzz/astro-theme-retypeset&type=Date" />
|
||||
<img alt="Star History Chart" src="https://api.star-history.com/svg?repos=radishzzz/astro-theme-retypeset&type=Date" />
|
||||
</picture>
|
||||
</p>
|
||||
|
|
|
|||
159
Retypeset-lighthouse-score.svg
Normal file
159
Retypeset-lighthouse-score.svg
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="theme--agnostic" fill="none" width="1000" height="330">
|
||||
<style>
|
||||
.gauge-base {
|
||||
opacity: 0.1
|
||||
}
|
||||
|
||||
.gauge-arc {
|
||||
fill: none;
|
||||
animation-delay: 250ms;
|
||||
stroke-linecap: round;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: 100px 60px;
|
||||
animation: load-gauge 1s ease forwards
|
||||
}
|
||||
|
||||
.guage-text {
|
||||
font-size: 40px;
|
||||
font-family: monospace;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.guage-red {
|
||||
color: #ff4e42;
|
||||
fill: #ff4e42;
|
||||
stroke: #ff4e42
|
||||
}
|
||||
.guage-orange {
|
||||
color: #ffa400;
|
||||
fill: #ffa400;
|
||||
stroke: #ffa400
|
||||
}
|
||||
.guage-green {
|
||||
color: #0cce6b;
|
||||
fill: #0cce6b;
|
||||
stroke: #0cce6b
|
||||
}
|
||||
.theme--agnostic .guage-undefined {
|
||||
color: #5c5c5c;
|
||||
fill: #5c5c5c;
|
||||
stroke: #5c5c5c
|
||||
}
|
||||
.theme--light .guage-undefined {
|
||||
color: #1e1e1e;
|
||||
fill: #1e1e1e;
|
||||
stroke: #1e1e1e
|
||||
}
|
||||
.theme--dark .guage-undefined {
|
||||
color: #f5f5f5;
|
||||
fill: #f5f5f5;
|
||||
stroke: #f5f5f5
|
||||
}
|
||||
|
||||
.guage-title {
|
||||
stroke: none;
|
||||
font-size: 26px;
|
||||
line-height: 26px;
|
||||
font-family: Roboto, Halvetica, Arial, sans-serif
|
||||
}
|
||||
.metric.guage-title {
|
||||
font-family: 'Courier New', Courier, monospace
|
||||
}
|
||||
.theme--agnostic .guage-title {
|
||||
color: #737373;
|
||||
fill: #737373
|
||||
}
|
||||
.theme--light .guage-title {
|
||||
color: #212121;
|
||||
fill: #212121
|
||||
}
|
||||
.theme--dark .guage-title {
|
||||
color: #f5f5f5;
|
||||
fill: #f5f5f5
|
||||
}
|
||||
|
||||
@keyframes load-gauge {
|
||||
from {
|
||||
stroke-dasharray: 0 352.858
|
||||
}
|
||||
}
|
||||
.lh-gauge--pwa__disc {
|
||||
fill: #e0e0e0
|
||||
}
|
||||
.lh-gauge--pwa__logo {
|
||||
position: relative;
|
||||
fill: #b0b0b0
|
||||
}
|
||||
.lh-gauge--pwa__invisible {
|
||||
display: none
|
||||
}
|
||||
.lh-gauge--pwa__visible {
|
||||
display: inline
|
||||
}
|
||||
.guage-invisible {
|
||||
display: none
|
||||
}
|
||||
.lh-gauge--pwa__logo--primary-color {
|
||||
fill: #304ffe
|
||||
}
|
||||
.theme--agnostic .lh-gauge--pwa__logo--secondary-color {
|
||||
fill: #787878
|
||||
}
|
||||
.theme--light .lh-gauge--pwa__logo--secondary-color {
|
||||
fill: #3d3d3d
|
||||
}
|
||||
.theme--dark .lh-gauge--pwa__logo--secondary-color {
|
||||
fill: #d8b6b6
|
||||
}
|
||||
.theme--light #svg_2 {
|
||||
stroke: #00000022
|
||||
}
|
||||
.theme--agnostic #svg_2 {
|
||||
stroke: #616161
|
||||
}
|
||||
.theme--light #svg_2 {
|
||||
stroke: #00000022
|
||||
}
|
||||
.theme--dark #svg_2 {
|
||||
stroke: #f5f5f566
|
||||
}
|
||||
</style>
|
||||
<svg class="guage-div guage-perf guage-green" viewBox="0 0 200 200" width="200" height="200" x="100" y="0">
|
||||
<circle class="gauge-base" r="56" cx="100" cy="60" stroke-width="8"/>
|
||||
<circle class="gauge-arc guage-arc-1" r="56" cx="100" cy="60" stroke-width="8" style="stroke-dasharray: 351.858, 351.858;"/>
|
||||
<text class="guage-text" x="100px" y="60px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">100</text>
|
||||
<text class="guage-title" x="100px" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">Performance</text>
|
||||
</svg>,<svg class="guage-div guage-perf guage-green" viewBox="0 0 200 200" width="200" height="200" x="300" y="0">
|
||||
<circle class="gauge-base" r="56" cx="100" cy="60" stroke-width="8"/>
|
||||
<circle class="gauge-arc guage-arc-1" r="56" cx="100" cy="60" stroke-width="8" style="stroke-dasharray: 351.858, 351.858;"/>
|
||||
<text class="guage-text" x="100px" y="60px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">100</text>
|
||||
<text class="guage-title" x="100px" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">Accessibility</text>
|
||||
</svg>,<svg class="guage-div guage-perf guage-green" viewBox="0 0 200 200" width="200" height="200" x="500" y="0">
|
||||
<circle class="gauge-base" r="56" cx="100" cy="60" stroke-width="8"/>
|
||||
<circle class="gauge-arc guage-arc-1" r="56" cx="100" cy="60" stroke-width="8" style="stroke-dasharray: 351.858, 351.858;"/>
|
||||
<text class="guage-text" x="100px" y="60px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">100</text>
|
||||
<text class="guage-title" x="100px" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">Best Practices</text>
|
||||
</svg>,<svg class="guage-div guage-perf guage-green" viewBox="0 0 200 200" width="200" height="200" x="700" y="0">
|
||||
<circle class="gauge-base" r="56" cx="100" cy="60" stroke-width="8"/>
|
||||
<circle class="gauge-arc guage-arc-1" r="56" cx="100" cy="60" stroke-width="8" style="stroke-dasharray: 351.858, 351.858;"/>
|
||||
<text class="guage-text" x="100px" y="60px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">100</text>
|
||||
<text class="guage-title" x="100px" y="160px" alignment-baseline="central" dominant-baseline="central" text-anchor="middle">SEO</text>
|
||||
</svg>
|
||||
<svg width="604" height="76" x="200" y="250">
|
||||
<g>
|
||||
<rect fill="none" id="canvas_background" height="80" width="604" y="-1" x="-1"/>
|
||||
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
|
||||
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<rect fill-opacity="0" stroke-width="2" rx="40" id="svg_2" height="72" width="600" y="1" x="0" fill="#000000"/>
|
||||
<rect stroke="#000" rx="8" id="svg_3" height="14" width="48" y="30" x="35" stroke-opacity="null" stroke-width="0" fill="#ff4e42"/>
|
||||
<rect stroke="#000" rx="6" id="svg_4" height="14" width="48" y="30" x="220" stroke-opacity="null" stroke-width="0" fill="#ffa400"/>
|
||||
<rect stroke="#000" rx="6" id="svg_5" height="14" width="48" y="30" x="410" stroke-opacity="null" stroke-width="0" fill="#0cce6b"/>
|
||||
<text class="metric guage-title" xml:space="preserve" text-anchor="start" font-size="26" id="svg_6" y="45" x="100" stroke-opacity="null" stroke-width="0" stroke="#000">0-49</text>
|
||||
<text class="metric guage-title" xml:space="preserve" text-anchor="start" font-size="26" id="svg_7" y="45" x="280" stroke-opacity="null" stroke-width="0" stroke="#000">50-89</text>
|
||||
<text class="metric guage-title" xml:space="preserve" text-anchor="start" font-size="26" id="svg_8" y="45" x="470" stroke-opacity="null" stroke-width="0" stroke="#000">90-100</text>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
|
|
@ -1,8 +1,7 @@
|
|||
---
|
||||
title: Markdown Extended Features
|
||||
title: Markdown 扩展样式
|
||||
published: 2022-04-01
|
||||
tags: ["Markdown"]
|
||||
lang: en
|
||||
---
|
||||
|
||||
FROM https://github.com/saicaca/fuwari
|
||||
|
|
@ -5,4 +5,4 @@ tags: ["Astro", "Blog Theme"]
|
|||
lang: en
|
||||
---
|
||||
|
||||
Retypeset, an Astro-powered blog theme with the Chinese name "Recomposition", draws initial inspiration from typographic artistry. While preserving the quintessential charm of movable-type printing, it revolutionizes all page layouts with meticulous typographic design. This theme crafts a minimalist modern aesthetic that simultaneously resonates with the humanistic elegance inherent in traditional printing craftsmanship.
|
||||
A blog theme based on [Astro](https://astro.build/) framework, initially inspired by [Typography](https://astro-theme-typography.vercel.app/). This theme builds upon its original style by establishing unified color schemes, layouts, font standards while recomposing all pages aiming at recreating reading experiences from movable type printing era without losing modern designs elegance & simplicity; every detail matters here where elegance is revealed within inches.
|
||||
|
|
|
|||
|
|
@ -4,4 +4,4 @@ published: 2024-01-25
|
|||
tags: ["Astro", "博客主题"]
|
||||
---
|
||||
|
||||
Retypeset 是一款基于 Astro 的博客主题，中文名为『重新编排』，最初灵感来源于 Typography。本主题在保留原『活字印刷』风格的基础上，以版式设计为核心，对所有页面都进行了重新编排，营造出简约现代的视觉风格，同时又流淌着传统印刷的人文气韵。
|
||||
一款基于 [Astro](https://astro.build/) 框架的博客主题，中文名为重新编排，最初灵感来自 [Typography](https://astro-theme-typography.vercel.app/)。本主题以原主题风格为基础，通过建立统一的色彩、版式、字体规范，并对所有页面都进行重新编排，来还原活字印刷时代的阅读体验，同时不失现代设计的优雅与简约。处处皆为细节，方寸尽显优雅。
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ tags: ["胡适"]
|
|||
---
|
||||
import { Image } from 'astro:assets';
|
||||
|
||||
<Image src="https://image.radishzz.cc/image/gallery/02.webp" inferSize alt="一只猫在阳光下睡觉。" />
|
||||
<Image src="https://image.radishzz.cc/picsmaller/02.webp" inferSize alt="这是图片的说明文字" />
|
||||
|
||||
十七八年前，我最后一次会见我的母校康耐儿大学的史学大师布尔先生（George Lincoln Burr）。我们谈到英国史学大师阿克顿（Lord Acton）一生准备要著作一部《自由之史》，没有写成他就死了。布尔先生那天谈话很多，有一句话我至今没有忘记。他说，“我年纪越大，越感觉到容忍（tolerance）比自由更重要”。
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ tags: ["鲁迅"]
|
|||
---
|
||||
import { Image } from 'astro:assets';
|
||||
|
||||
<Image src="https://image.radishzz.cc/image/gallery/03.webp" inferSize alt="一只猫在阳光下睡觉。" />
|
||||
<Image src="https://image.radishzz.cc/picsmaller/03.webp" inferSize alt="这是图片的说明文字" />
|
||||
|
||||
我冒了嚴寒，回到相隔二千餘里，別了二十餘年的故鄉去。
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ tags: ["芥川龙之介"]
|
|||
---
|
||||
import { Image } from 'astro:assets';
|
||||
|
||||
<Image src="https://image.radishzz.cc/image/gallery/06.webp" inferSize alt="一只猫在阳光下睡觉。" />
|
||||
<Image src="https://image.radishzz.cc/picsmaller/06.webp" inferSize alt="这是图片的说明文字" />
|
||||
|
||||
ある日の暮方の事である。一人の下人げにんが、羅生門らしょうもんの下で雨やみを待っていた。
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue