From 87e5b297f8fd67ff04daa8e26f42d378a6be9841 Mon Sep 17 00:00:00 2001 From: Yudong Jin Date: Mon, 4 Mar 2024 13:37:29 +0800 Subject: [PATCH] Reduce the file size of the landing page (#1105) * Update suggestions.md * Add announcement of the paper book release * Fix size of svg * Update contrib rocks image * Optimize HTML of the landing page * Fix the line breaks --- docs/chapter_preface/suggestions.md | 2 +- docs/index.html | 364 ++++++++++++++++++++++++++ docs/index.md | 390 ---------------------------- mkdocs.yml | 2 +- overrides/main.html | 17 ++ overrides/stylesheets/extra.css | 33 ++- 6 files changed, 411 insertions(+), 397 deletions(-) create mode 100644 docs/index.html create mode 100644 overrides/main.html diff --git a/docs/chapter_preface/suggestions.md b/docs/chapter_preface/suggestions.md index 421f32acd..6fde43e99 100644 --- a/docs/chapter_preface/suggestions.md +++ b/docs/chapter_preface/suggestions.md @@ -220,7 +220,7 @@ git clone https://github.com/krahets/hello-algo.git 从总体上看，我们可以将学习数据结构与算法的过程划分为三个阶段。 1. **阶段一：算法入门**。我们需要熟悉各种数据结构的特点和用法，学习不同算法的原理、流程、用途和效率等方面的内容。 -2. **阶段二：刷算法题**。建议从热门题目开刷，推荐的题单、题解和刷题计划和请见此 [GitHub 仓库](https://github.com/krahets/LeetCode-Book)。初次刷题时，“知识遗忘”可能是一个挑战，但请放心，这是很正常的。我们可以按照“艾宾浩斯遗忘曲线”来复习题目，通常在进行 3～5 轮的重复后，就能将其牢记在心。 +2. **阶段二：刷算法题**。建议从热门题目开刷，先积累至少 100 道题目，熟悉主流的算法问题。初次刷题时，“知识遗忘”可能是一个挑战，但请放心，这是很正常的。我们可以按照“艾宾浩斯遗忘曲线”来复习题目，通常在进行 3～5 轮的重复后，就能将其牢记在心。推荐的题单和刷题计划请见此 [GitHub 仓库](https://github.com/krahets/LeetCode-Book)。 3. **阶段三：搭建知识体系**。在学习方面，我们可以阅读算法专栏文章、解题框架和算法教材，以不断丰富知识体系。在刷题方面，可以尝试采用进阶刷题策略，如按专题分类、一题多解、一解多题等，相关的刷题心得可以在各个社区找到。 如下图所示，本书内容主要涵盖“阶段一”，旨在帮助你更高效地展开阶段二和阶段三的学习。 diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 000000000..d3c40f3e6 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,364 @@ + +
+ + +
+ + + + + 初识算法 + + + + 复杂度 + + + + 数组与链表 + + + + 栈与队列 + + + + 哈希表 + + + + 树 + + + + 堆 + + + + 图 + + + + 搜索 + + + + 排序 + + + + 分治 + + + + 回溯 + + + + 动态规划 + + + + 贪心 + +
+ + +
+ +
+

+ 动画图解、一键运行的数据结构与算法教程 +

+ + + + + 开始阅读 + + + + + + + 代码仓库 + +
+ +
+ + + +
+
+
+ + +
+
+ Preview +
+ + + + + + + + + + + + +
+

500 幅动画图解、12 种编程语言代码、3000 条社区问答，助你快速入门数据结构与算法

+
+
+ + +
+
+
+ + + + + +
+
+ Cover +
+ 纸质书
（即将发布） +
+
+
+ +
+ +
+
+ 在线阅读 + + + +
+ +
+
+ + +
+ 下载 PDF + + + +
+ +
+
+
+
+ + +
+
+

推荐语

+
+
+

“一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读。”

+

—— 邓俊辉，清华大学计算机系教授

+
+
+

“如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！”

+

—— 李沐，亚马逊资深首席科学家

+
+
+
+
+ + +
+
+
+
+
+
+ + + +

动画图解

+
+

内容清晰易懂，学习曲线平滑

+

"A picture is worth a thousand words."
“一图胜千言”

+
+
+ Animation example +
+ +
+ Running code example +
+
+
+ + + +

一键运行

+
+

十余种编程语言，代码可视化运行

+

"Talk is cheap. Show me the code."
“少吹牛，看代码”

+
+
+
+ +
+
+
+
+ + + +

互助学习

+
+

欢迎讨论与提问，读者间携手共进

+

"Learning by teaching."
“教学相长”

+
+
+ Comments example +
+ +
+
+ + +
+
+ +
+

作者

+
+
+ + Author: yudongjin +
靳宇栋（@krahets） + +
+
+
+ + +
+

代码审阅者

+
+
+ + Reviewer: codingonion +
codingonion +
Zig, Rust + +
+
+ + Reviewer: Gonglja +
Gonglja +
C, C++ + +
+
+ + Reviewer: gvenusleo +
gvenusleo +
Dart + +
+
+ + Reviewer: hpstory +
hpstory +
C# + +
+
+ + Reviewer: justin-tse +
justin-tse +
JS, TS + +
+
+ + Reviewer: krahets +
krahets +
Python, Java + +
+
+ + Reviewer: night-cruise +
night-cruise +
Rust + +
+
+ + Reviewer: nuomi1 +
nuomi1 +
Swift + +
+
+ + Reviewer: Reanon +
Reanon +
Go, C + +
+
+
+ + +
+

贡献者

+

本书在开源社区 140 多位贡献者的共同努力下不断完善，感谢他们付出的时间与精力！

+ + Contributors + +
+
+
+ + +
+
+

欢迎在评论区留下你的见解、问题或建议

+ + +
+
\ No newline at end of file diff --git a/docs/index.md b/docs/index.md index a347ea86f..402b9b2af 100644 --- a/docs/index.md +++ b/docs/index.md @@ -7,393 +7,3 @@ hide: - edit - navigation --- - - -
- - - - -
- - - - - - 初识算法 - - - - 复杂度 - - - - 数组与链表 - - - - 栈与队列 - - - - 哈希表 - - - - 树 - - - - 堆 - - - - 图 - - - - 搜索 - - - - 排序 - - - - 分治 - - - - 回溯 - - - - 动态规划 - - - - 贪心 - -
- - -
- hello-algo-typing-svg -
-

- 动画图解、一键运行的数据结构与算法教程 -

- - - - - 开始阅读 - - - - - - - 代码仓库 - -
- -
- - - -
-
-
- - -
-
- -
- - - - - - - - - - - - -
-

500 幅动画图解、12 种编程语言代码、3000 条社区问答，助你快速入门数据结构与算法

-
-
- - -
-
-
- - - - - -
-
- -
- 纸质书
（即将发布） -
-
-
- -
- -
-
- 在线阅读 - - - -
- -
-
- - -
- 下载 PDF - - - -
- -
-
-
-
- - -
-
-

推荐语

-
-
-

“一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读。”

-

—— 邓俊辉，清华大学计算机系教授

-
-
-

“如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！”

-

—— 李沐，亚马逊资深首席科学家

-
-
-
-
- - -
-
-
-
-
-
- - - -

动画图解

-
-

内容清晰易懂，学习曲线平滑

-

"A picture is worth a thousand words."
“一图胜千言”

-
-
- -
- -
- -
-
-
- - - -

一键运行

-
-

十余种编程语言，代码可视化运行

-

"Talk is cheap. Show me the code."
“少吹牛，看代码”

-
-
-
- -
-
-
-
- - - -

互助学习

-
-

欢迎讨论与提问，读者间携手共进

-

"Learning by teaching."
“教学相长”

-
-
- -
- -
-
- - -
-
- -
-

作者

-
-
- - yudongjin -
靳宇栋（@krahets） - -
-
-
- - -
-

代码审阅者

-
-
- - codingonion -
codingonion -
Zig, Rust - -
-
- - Gonglja -
Gonglja -
C, C++ - -
-
- - gvenusleo -
gvenusleo -
Dart - -
-
- - hpstory -
hpstory -
C# - -
-
- - justin-tse -
justin-tse -
JS, TS - -
-
- - krahets -
krahets -
Python, Java - -
-
- - night-cruise -
night-cruise -
Rust - -
-
- - nuomi1 -
nuomi1 -
Swift - -
-
- - Reanon -
Reanon -
Go, C - -
-
-
- - -
-

贡献者

-

本书在开源社区 130 多位贡献者的共同努力下不断完善，感谢他们付出的时间与精力！

- - - -
-
-
- -
-
-

欢迎在评论区留下你的见解、问题或建议

- - -
-
\ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 8d1a32d81..37ec6b585 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -20,7 +20,7 @@ theme: custom_dir: build/overrides language: zh features: - # - announce.dismiss + - announce.dismiss - content.action.edit # - content.action.view - content.code.annotate diff --git a/overrides/main.html b/overrides/main.html new file mode 100644 index 000000000..1e12c6591 --- /dev/null +++ b/overrides/main.html @@ -0,0 +1,17 @@ +{% extends "base.html" %} + +{% block announce %} +{% if config.theme.language == 'zh' %} + {% set announcements = "纸质书将于近期发布，敬请关注！" %} +{% elif config.theme.language == 'en' %} + {% set announcements = "The paper book (Chinese edition) will be published soon. Stay tuned!" %} +{% endif %} + +{% endblock %} \ No newline at end of file diff --git a/overrides/stylesheets/extra.css b/overrides/stylesheets/extra.css index 358a6a3e2..951f11976 100644 --- a/overrides/stylesheets/extra.css +++ b/overrides/stylesheets/extra.css @@ -207,6 +207,19 @@ body { width: 1.25em; } +/* header banner */ +.md-banner { + background-color: var(--md-code-bg-color); + color: var(--md-default-fg-color); + font-size: 0.75rem; +} + +.md-banner .banner-svg svg { + margin-right: 0.3rem; + height: 0.63rem; + fill: var(--md-default-fg-color); +} + .pythontutor-iframe { width: 125%; height: 125%; @@ -321,7 +334,7 @@ a:hover .text-button span { } /* hero image */ -.hero-image-div { +.hero-div { height: min(84vh, 75vw); width: min(112vh, 100vw); margin: 0 auto; @@ -340,13 +353,13 @@ a:hover .text-button span { } /* hover on the planets */ -.hero-on-hover { +.hero-div > a > img { width: auto; position: absolute; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; } -.hero-caption { +.hero-div > a > span { margin: 0; position: absolute; transform: translateX(-50%) translateY(-50%); @@ -354,17 +367,27 @@ a:hover .text-button span { color: white; } -a:hover .hero-on-hover { +.hero-div > a:hover > img { filter: brightness(1.15) saturate(1.1) drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.2)); transform: scale(1.03); } -a:hover .hero-caption { +.hero-div > a:hover > span { text-decoration: underline; color: var(--md-typeset-btn-color); } +.heading-div { + width: 100%; + position: absolute; + transform: translateX(-50%); + left: 50%; + bottom: min(2vh, 3vw); + pointer-events: none; + color: #fff; +} + /* code badge */ .code-badge { width: 100%;