yetao
/
hello-algo
mirror of https://github.com/krahets/hello-algo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Reduce the file size of the landing page (#1105)

Browse Source 
* 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
pull/1107/head
Yudong Jin 9 months ago committed by GitHub
parent 89679a4a13
commit 87e5b297f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 411 additions and 397 deletions
Show Stats Download Patch File Download Diff File

2
docs/chapter_preface/suggestions.md
Unescape View File

@ -220,7 +220,7 @@ git clone https://github.com/krahets/hello-algo.git
从总体上看，我们可以将学习数据结构与算法的过程划分为三个阶段。 从总体上看，我们可以将学习数据结构与算法的过程划分为三个阶段。
1. **阶段一：算法入门**。我们需要熟悉各种数据结构的特点和用法，学习不同算法的原理、流程、用途和效率等方面的内容。 1. **阶段一：算法入门**。我们需要熟悉各种数据结构的特点和用法，学习不同算法的原理、流程、用途和效率等方面的内容。
2. **阶段二：刷算法题**。建议从热门题目开刷，推荐的题单、题解和刷题计划和请见此 [GitHub 仓库](https://github.com/krahets/LeetCode-Book)。初次刷题时，“知识遗忘”可能是一个挑战，但请放心，这是很正常的。我们可以按照“艾宾浩斯遗忘曲线”来复习题目，通常在进行 3～5 轮的重复后，就能将其牢记在心。 2. **阶段二：刷算法题**。建议从热门题目开刷，先积累至少 100 道题目，熟悉主流的算法问题。初次刷题时，“知识遗忘”可能是一个挑战，但请放心，这是很正常的。我们可以按照“艾宾浩斯遗忘曲线”来复习题目，通常在进行 3～5 轮的重复后，就能将其牢记在心。推荐的题单和刷题计划请见此 [GitHub 仓库](https://github.com/krahets/LeetCode-Book)。
3. **阶段三：搭建知识体系**。在学习方面，我们可以阅读算法专栏文章、解题框架和算法教材，以不断丰富知识体系。在刷题方面，可以尝试采用进阶刷题策略，如按专题分类、一题多解、一解多题等，相关的刷题心得可以在各个社区找到。 3. **阶段三：搭建知识体系**。在学习方面，我们可以阅读算法专栏文章、解题框架和算法教材，以不断丰富知识体系。在刷题方面，可以尝试采用进阶刷题策略，如按专题分类、一题多解、一解多题等，相关的刷题心得可以在各个社区找到。
如下图所示，本书内容主要涵盖“阶段一”，旨在帮助你更高效地展开阶段二和阶段三的学习。 如下图所示，本书内容主要涵盖“阶段一”，旨在帮助你更高效地展开阶段二和阶段三的学习。

364
docs/index.html
Unescape View File

@ -0,0 +1,364 @@
<!--Section: hero -->
<section data-md-color-scheme="slate" data-md-color-primary="grey" class="home-div"
style="height: min(100vh, 120vw); position: relative; margin-top:-2.4rem; padding: 0; overflow: hidden;">
<!-- hero image -->
<img src="assets/hero/universe_bg.png" class="hero-bg" alt="">
<div class="hero-div">
<img src="assets/hero/ground.png" alt=""
style="position: absolute; width: auto; height: 26.445%; left: 28.211%; top: 54.145%;">
<img src="assets/hero/links.png" alt=""
style="position: absolute; width: auto; height: 78.751%; left: 10.545%; top: 7.326%;">
<a href="/chapter_introduction/">
<img src="assets/hero/astronaut.png" alt="" style="height: 46.673%; left: 35.413%; top: 24.343%;">
<span style="left: 52.244%; top: 20.919%;">初识算法</span>
</a>
<a href="/chapter_computational_complexity/">
<img src="assets/hero/chapter_computational_complexity.png" alt=""
style="height: 12.347%; left: 36.267%; top: 37.653%;">
<span style="left: 39.244%; top: 33.919%;">复杂度</span>
</a>
<a href="/chapter_array_and_linkedlist/">
<img src="assets/hero/chapter_array_and_linkedlist.png" alt=""
style="height: 22.242%; left: 73.242%; top: 52.481%;">
<span style="left: 90.897%; top: 76.259%;">数组与链表</span>
</a>
<a href="/chapter_stack_and_queue/">
<img src="assets/hero/chapter_stack_and_queue.png" alt=""
style="height: 14.302%; left: 62.646%; top: 77.875%;">
<span style="left: 77.571%; top: 91.25%;">栈与队列</span>
</a>
<a href="/chapter_hashing/">
<img src="assets/hero/chapter_hashing.png" alt="" style="height: 15.266%; left: 63.281%; top: 27.933%;">
<span style="left: 68.862%; top: 46.292%;">哈希表</span>
</a>
<a href="/chapter_tree/">
<img src="assets/hero/chapter_tree.png" alt="" style="height: 19.615%; left: 80.137%; top: 26.678%;">
<span style="left: 96.159%; top: 44.8%;">树</span>
</a>
<a href="/chapter_heap/">
<img src="assets/hero/chapter_heap.png" alt="" style="height: 10.566%; left: 77.226%; top: 11.559%;">
<span style="left: 88.103%; top: 15.422%;">堆</span>
</a>
<a href="/chapter_graph/">
<img src="assets/hero/chapter_graph.png" alt="" style="height: 16.112%; left: 51.854%; top: 5.575%;">
<span style="left: 71.195%; top: 6.503%;">图</span>
</a>
<a href="/chapter_searching/">
<img src="assets/hero/chapter_searching.png" alt="" style="height: 15.149%; left: 18.185%; top: 16.404%;">
<span style="left: 14.556%; top: 20.876%;">搜索</span>
</a>
<a href="/chapter_sorting/">
<img src="assets/hero/chapter_sorting.png" alt="" style="height: 9.574%; left: 25.409%; top: 40.747%;">
<span style="left: 28.805%; top: 53.808%;">排序</span>
</a>
<a href="/chapter_divide_and_conquer/">
<img src="assets/hero/chapter_divide_and_conquer.png" alt=""
style="height: 18.681%; left: 32.721%; top: 4.816%;">
<span style="left: 31.42%; top: 8.679%;">分治</span>
</a>
<a href="/chapter_backtracking/">
<img src="assets/hero/chapter_backtracking.png" alt="" style="height: 17.338%; left: 4.875%; top: 32.925%;">
<span style="left: 4.742%; top: 50.113%;">回溯</span>
</a>
<a href="/chapter_dynamic_programming/">
<img src="assets/hero/chapter_dynamic_programming.png" alt=""
style="height: 15.47%; left: 9.406%; top: 57.472%;">
<span style="left: 8.561%; top: 75.351%;">动态规划</span>
</a>
<a href="/chapter_greedy/">
<img src="assets/hero/chapter_greedy.png" alt="" style="height: 14.127%; left: 23.132%; top: 75.803%;">
<span style="left: 21.619%; top: 86.85%;">贪心</span>
</a>
</div>
<!-- heading -->
<div class="heading-div">
<img style="height: min(9vh, 12vw);"
src="https://readme-typing-svg.demolab.com/?font=Noto+Sans+SC&weight=400&duration=3500&pause=2000&color=FFF&center=true&vCenter=true&random=false&width=200&lines=Hello%2C+%E7%AE%97%E6%B3%95+!"
alt="" />
<div style="pointer-events: auto;">
<p style="margin-top: max(-1vh, -2vw); margin-bottom: min(2vh, 3.5vw);">
动画图解、一键运行的数据结构与算法教程
</p>
<a href="/chapter_preface/" class="rounded-button">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M160 96a96 96 0 1 1 192 0A96 96 0 1 1 160 96zm80 152V512l-48.4-24.2c-20.9-10.4-43.5-17-66.8-19.3l-96-9.6C12.5 457.2 0 443.5 0 427V224c0-17.7 14.3-32 32-32H62.3c63.6 0 125.6 19.6 177.7 56zm32 264V248c52.1-36.4 114.1-56 177.7-56H480c17.7 0 32 14.3 32 32V427c0 16.4-12.5 30.2-28.8 31.8l-96 9.6c-23.2 2.3-45.9 8.9-66.8 19.3L272 512z" />
</svg>
<span>开始阅读</span>
</a>
<a href="https://github.com/krahets/hello-algo" class="rounded-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
</path>
</svg>
<span>代码仓库</span>
</a>
</div>
<!-- arrow -->
<div style="text-align: center; margin-top: min(2.5vh, 3.5vw);">
<svg xmlns="http://www.w3.org/2000/svg" fill="var(--md-default-fg-color)" height="2vh"
viewBox="0 0 384 512">
<path
d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
</svg>
</div>
</div>
</section>
<!-- Section: brief introduction -->
<section data-md-color-scheme="slate" class="home-div">
<div class="section-content">
<img src="index.assets/hello_algo_header.png" style="width: 100%; max-width: 39em;" alt="Preview">
<div class="code-badge">
<img src="https://img.shields.io/badge/Python-snow?logo=python&logoColor=3776AB" alt="">
<img src="https://img.shields.io/badge/C%2B%2B-snow?logo=c%2B%2B&logoColor=00599C" alt="">
<img src="https://img.shields.io/badge/Java-snow?logo=coffeescript&logoColor=FC4C02" alt="">
<img src="https://img.shields.io/badge/C%23-snow?logo=csharp&logoColor=512BD4" alt="">
<img src="https://img.shields.io/badge/Go-snow?logo=go&logoColor=00ADD8" alt="">
<img src="https://img.shields.io/badge/Swift-snow?logo=swift&logoColor=F05138" alt="">
<img src="https://img.shields.io/badge/JavaScript-snow?logo=javascript&logoColor=E9CE30" alt="">
<img src="https://img.shields.io/badge/TypeScript-snow?logo=typescript&logoColor=3178C6" alt="">
<img src="https://img.shields.io/badge/Dart-snow?logo=dart&logoColor=0175C2" alt="">
<img src="https://img.shields.io/badge/Rust-snow?logo=rust&logoColor=000000" alt="">
<img src="https://img.shields.io/badge/C-snow?logo=c&logoColor=A8B9CC" alt="">
<img src="https://img.shields.io/badge/Zig-snow?logo=zig&logoColor=F7A41D" alt="">
</div>
<p style="margin-top: 2em;">500 幅动画图解、12 种编程语言代码、3000 条社区问答，助你快速入门数据结构与算法</p>
</div>
</section>
<!-- Section: reading -->
<section data-md-color-scheme="default" data-md-color-primary="white" class="home-div">
<div class="section-content">
<div class="reading-media">
<!-- devices -->
<!-- book height = 250 mm -->
<!-- mac height = 248.1 mm -->
<!-- ipad height = 280.6mm -->
<!-- iphone height = 160.7mm -->
<div class="media-block">
<div style="height: 8.17%;"></div>
<img class="device-on-hover" style="height: 66.83%;" src="assets/hero/cover_render.png" alt="Cover">
<div class="text-button" style="color: var(--md-accent-fg-color);">
<span>纸质书<br>（即将发布）</span>
</div>
</div>
<div class="media-block">
<a href="/chapter_preface/">
<div style="height: 4.34%;"></div>
<img class="device-on-hover" style="height: 66.31%;" src="assets/hero/web_mac_iphone.png" alt="">
<div style="height: 4.34%;"></div>
<div class="text-button">
<span>在线阅读</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path
d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
</svg>
</div>
</a>
</div>
<div class="media-block">
<a href="https://github.com/krahets/hello-algo/releases">
<img class="device-on-hover" style="height: 75%;" src="assets/hero/pdf_ipad.png" alt="">
<div class="text-button">
<span>下载 PDF</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
<path
d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
</svg>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- Section: endorsements -->
<section data-md-color-scheme="slate" data-md-color-primary="grey" class="home-div">
<div class="section-content">
<h3 style="text-align: center; margin: 1em auto;">推荐语</h3>
<div class="intro-container" style="margin: 0 auto;">
<div class="intro-text endor-text">
<p style="margin-bottom: 0;">“一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读。”</p>
<p style="font-weight: bold;">—— 邓俊辉，清华大学计算机系教授</p>
</div>
<div class="intro-text endor-text">
<p style="margin-bottom: 0;">“如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！”</p>
<p style="font-weight: bold;">—— 李沐，亚马逊资深首席科学家</p>
</div>
</div>
</div>
</section>
<!-- Section: features -->
<section data-md-color-scheme="default" data-md-color-primary="white" class="home-div">
<div class="section-content">
<div class="intro-container">
<div class="intro-text">
<div>
<div style="display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" height="1.5em" width="1.5em" viewBox="0 0 640 512">
<path fill="var(--md-primary-bg-color)"
d="M256 0H576c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64zM476 106.7C471.5 100 464 96 456 96s-15.5 4-20 10.7l-56 84L362.7 169c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h80 48H552c8.9 0 17-4.9 21.2-12.7s3.7-17.3-1.2-24.6l-96-144zM336 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM64 128h96V384v32c0 17.7 14.3 32 32 32H320c17.7 0 32-14.3 32-32V384H512v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192c0-35.3 28.7-64 64-64zm8 64c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V208c0-8.8-7.2-16-16-16H72zm0 104c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V312c0-8.8-7.2-16-16-16H72zm0 104c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V416c0-8.8-7.2-16-16-16H72zm336 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16V416c0-8.8-7.2-16-16-16H424c-8.8 0-16 7.2-16 16z" />
</svg>
<h3 style="margin-left: 0.5em;">动画图解</h3>
</div>
<p style="margin: 0;">内容清晰易懂，学习曲线平滑</p>
<p class="intro-quote">"A picture is worth a thousand words."<br>“一图胜千言”</p>
</div>
</div>
<img class="intro-image" src="index.assets/animation.gif" alt="Animation example">
</div>
<div class="intro-container">
<img class="intro-image" src="index.assets/running_code.gif" alt="Running code example">
<div class="intro-text">
<div>
<div style="display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" height="1.5em" width="1.5em" viewBox="0 0 640 512">
<path fill="var(--md-primary-bg-color)"
d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" />
</svg>
<h3 style="margin-left: 0.5em;">一键运行</h3>
</div>
<p style="margin: 0;">十余种编程语言，代码可视化运行</p>
<p class="intro-quote">"Talk is cheap. Show me the code."<br>“少吹牛，看代码”</p>
</div>
</div>
</div>
<div class="intro-container">
<div class="intro-text">
<div>
<div style="display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" height="1.5em" width="1.5em" viewBox="0 0 640 512">
<path fill="var(--md-primary-bg-color)"
d="M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.7 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z" />
</svg>
<h3 style="margin-left: 0.5em;">互助学习</h3>
</div>
<p style="margin: 0;">欢迎讨论与提问，读者间携手共进</p>
<p class="intro-quote">"Learning by teaching."<br>“教学相长”</p>
</div>
</div>
<img class="intro-image" src="index.assets/comment.gif" alt="Comments example">
</div>
</div>
</section>
<!-- Section: contributors -->
<section data-md-color-scheme="slate" data-md-color-primary="grey" class="home-div">
<div class="section-content" style="max-width: 90vw;">
<!-- author -->
<div style="margin: 2em auto;">
<h3>作者</h3>
<div class="profile-div">
<div class="profile-cell">
<a href="https://github.com/krahets">
<img class="profile-img" src="assets/avatar/avatar_yudongjin.jpg" alt="Author: yudongjin" />
<br><b>靳宇栋（@krahets）</b>
</a>
</div>
</div>
</div>
<!-- reviewers -->
<div style="margin: 2em auto;">
<h3>代码审阅者</h3>
<div class="profile-div">
<div class="profile-cell">
<a href="https://github.com/codingonion">
<img class="profile-img" src="assets/avatar/avatar_codingonion.jpg"
alt="Reviewer: codingonion" />
<br><b>codingonion</b>
<br><sub>Zig, Rust</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/Gonglja">
<img class="profile-img" src="assets/avatar/avatar_Gonglja.jpg" alt="Reviewer: Gonglja" />
<br><b>Gonglja</b>
<br><sub>C, C++</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/gvenusleo">
<img class="profile-img" src="assets/avatar/avatar_gvenusleo.jpg" alt="Reviewer: gvenusleo" />
<br><b>gvenusleo</b>
<br><sub>Dart</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/hpstory">
<img class="profile-img" src="assets/avatar/avatar_hpstory.jpg" alt="Reviewer: hpstory" />
<br><b>hpstory</b>
<br><sub>C#</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/justin-tse">
<img class="profile-img" src="assets/avatar/avatar_justin-tse.jpg" alt="Reviewer: justin-tse" />
<br><b>justin-tse</b>
<br><sub>JS, TS</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/krahets">
<img class="profile-img" src="assets/avatar/avatar_krahets.jpg" alt="Reviewer: krahets" />
<br><b>krahets</b>
<br><sub>Python, Java</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/night-cruise">
<img class="profile-img" src="assets/avatar/avatar_night-cruise.jpg"
alt="Reviewer: night-cruise" />
<br><b>night-cruise</b>
<br><sub>Rust</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/nuomi1">
<img class="profile-img" src="assets/avatar/avatar_nuomi1.jpg" alt="Reviewer: nuomi1" />
<br><b>nuomi1</b>
<br><sub>Swift</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/Reanon">
<img class="profile-img" src="assets/avatar/avatar_Reanon.jpg" alt="Reviewer: Reanon" />
<br><b>Reanon</b>
<br><sub>Go, C</sub>
</a>
</div>
</div>
</div>
<!-- contributors -->
<div style="margin: 2em auto;">
<h3>贡献者</h3>
<p>本书在开源社区 140 多位贡献者的共同努力下不断完善，感谢他们付出的时间与精力！</p>
<a href="https://github.com/krahets/hello-algo/graphs/contributors">
<img src="https://contrib.rocks/image?repo=krahets/hello-algo&max=300&columns=16" alt="Contributors"
style="width: 100%; max-width: 38.5em;">
</a>
</div>
</div>
</section>
<!-- Section: comments -->
<section data-md-color-scheme="default" data-md-color-primary="white" class="home-div">
<div class="section-content giscus-container">
<p>欢迎在评论区留下你的见解、问题或建议</p>
<!-- Insert generated snippet here -->
<script src="https://giscus.app/client.js" data-repo="krahets/hello-algo" data-repo-id="R_kgDOIXtSqw"
data-category="Announcements" data-category-id="DIC_kwDOIXtSq84CSZk_" data-mapping="pathname"
data-strict="1" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="top"
data-theme="light" data-lang="zh-CN" crossorigin="anonymous" async>
</script>
</div>
</section>

390
docs/index.md
Unescape View File

@ -7,393 +7,3 @@ hide:
- edit - edit
- navigation - navigation
--- ---
<!--Section: hero -->
<section data-md-color-scheme="slate" data-md-color-primary="grey" class="home-div"
style="height: min(100vh, 120vw); position: relative; margin-top:-2.4rem; padding: 0; overflow: hidden;">
<!-- background -->
<img src="assets/hero/universe_bg.png" class="hero-bg">
<!-- hero image -->
<div class="hero-image-div">
<!-- planets -->
<img src="assets/hero/ground.png"
style="position: absolute; width: auto; height: 26.445%; left: 28.211%; top: 54.145%;">
<img src="assets/hero/links.png"
style="position: absolute; width: auto; height: 78.751%; left: 10.545%; top: 7.326%;">
<a href="/chapter_introduction/">
<img class="hero-on-hover" src="assets/hero/astronaut.png" style="height: 46.673%; left: 35.413%; top: 24.343%;">
<span class="hero-caption" style="left: 52.244%; top: 20.919%;">初识算法</span>
</a>
<a href="/chapter_computational_complexity/">
<img class="hero-on-hover" src="assets/hero/chapter_computational_complexity.png"
style="height: 12.347%; left: 36.267%; top: 37.653%;">
<span class="hero-caption" style="left: 39.244%; top: 33.919%;">复杂度</span>
</a>
<a href="/chapter_array_and_linkedlist/">
<img class="hero-on-hover" src="assets/hero/chapter_array_and_linkedlist.png"
style="height: 22.242%; left: 73.242%; top: 52.481%;">
<span class="hero-caption" style="left: 90.897%; top: 76.259%;">数组与链表</span>
</a>
<a href="/chapter_stack_and_queue/">
<img class="hero-on-hover" src="assets/hero/chapter_stack_and_queue.png"
style="height: 14.302%; left: 62.646%; top: 77.875%;">
<span class="hero-caption" style="left: 77.571%; top: 91.25%;">栈与队列</span>
</a>
<a href="/chapter_hashing/">
<img class="hero-on-hover" src="assets/hero/chapter_hashing.png"
style="height: 15.266%; left: 63.281%; top: 27.933%;">
<span class="hero-caption" style="left: 68.862%; top: 46.292%;">哈希表</span>
</a>
<a href="/chapter_tree/">
<img class="hero-on-hover" src="assets/hero/chapter_tree.png"
style="height: 19.615%; left: 80.137%; top: 26.678%;">
<span class="hero-caption" style="left: 96.159%; top: 44.8%;">树</span>
</a>
<a href="/chapter_heap/">
<img class="hero-on-hover" src="assets/hero/chapter_heap.png"
style="height: 10.566%; left: 77.226%; top: 11.559%;">
<span class="hero-caption" style="left: 88.103%; top: 15.422%;">堆</span>
</a>
<a href="/chapter_graph/">
<img class="hero-on-hover" src="assets/hero/chapter_graph.png"
style="height: 16.112%; left: 51.854%; top: 5.575%;">
<span class="hero-caption" style="left: 71.195%; top: 6.503%;">图</span>
</a>
<a href="/chapter_searching/">
<img class="hero-on-hover" src="assets/hero/chapter_searching.png"
style="height: 15.149%; left: 18.185%; top: 16.404%;">
<span class="hero-caption" style="left: 14.556%; top: 20.876%;">搜索</span>
</a>
<a href="/chapter_sorting/">
<img class="hero-on-hover" src="assets/hero/chapter_sorting.png"
style="height: 9.574%; left: 25.409%; top: 40.747%;">
<span class="hero-caption" style="left: 28.805%; top: 53.808%;">排序</span>
</a>
<a href="/chapter_divide_and_conquer/">
<img class="hero-on-hover" src="assets/hero/chapter_divide_and_conquer.png"
style="height: 18.681%; left: 32.721%; top: 4.816%;">
<span class="hero-caption" style="left: 31.42%; top: 8.679%;">分治</span>
</a>
<a href="/chapter_backtracking/">
<img class="hero-on-hover" src="assets/hero/chapter_backtracking.png"
style="height: 17.338%; left: 4.875%; top: 32.925%;">
<span class="hero-caption" style="left: 4.742%; top: 50.113%;">回溯</span>
</a>
<a href="/chapter_dynamic_programming/">
<img class="hero-on-hover" src="assets/hero/chapter_dynamic_programming.png"
style="height: 15.47%; left: 9.406%; top: 57.472%;">
<span class="hero-caption" style="left: 8.561%; top: 75.351%;">动态规划</span>
</a>
<a href="/chapter_greedy/">
<img class="hero-on-hover" src="assets/hero/chapter_greedy.png"
style="height: 14.127%; left: 23.132%; top: 75.803%;">
<span class="hero-caption" style="left: 21.619%; top: 86.85%;">贪心</span>
</a>
</div>
<!-- heading and buttons -->
<div style="width: 100%; position: absolute; transform: translateX(-50%); left: 50%; bottom: min(2vh, 3vw); pointer-events: none; color: #fff;">
<img style="height: min(9vh, 12vw);"
src="https://readme-typing-svg.demolab.com/?font=Noto+Sans+SC&weight=400&duration=3500&pause=2000&color=FFF&center=true&vCenter=true&random=false&width=200&lines=Hello%2C+%E7%AE%97%E6%B3%95+!"
alt="hello-algo-typing-svg" />
<div style="pointer-events: auto;">
<p style="margin-top: max(-1vh, -2vw); margin-bottom: min(2vh, 3.5vw);">
动画图解、一键运行的数据结构与算法教程
</p>
<a href="/chapter_preface/" class="rounded-button">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M160 96a96 96 0 1 1 192 0A96 96 0 1 1 160 96zm80 152V512l-48.4-24.2c-20.9-10.4-43.5-17-66.8-19.3l-96-9.6C12.5 457.2 0 443.5 0 427V224c0-17.7 14.3-32 32-32H62.3c63.6 0 125.6 19.6 177.7 56zm32 264V248c52.1-36.4 114.1-56 177.7-56H480c17.7 0 32 14.3 32 32V427c0 16.4-12.5 30.2-28.8 31.8l-96 9.6c-23.2 2.3-45.9 8.9-66.8 19.3L272 512z" />
</svg>
<span>开始阅读</span>
</a>
<a href="https://github.com/krahets/hello-algo" class="rounded-button">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 496 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z">
</path>
</svg>
<span>代码仓库</span>
</a>
</div>
<!-- arrow -->
<div style="text-align: center; margin-top: min(2.5vh, 3.5vw);">
<svg xmlns="http://www.w3.org/2000/svg" fill="var(--md-default-fg-color)" height="2vh"
viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" />
</svg>
</div>
</div>
</section>
<!-- Section: brief introduction -->
<section data-md-color-scheme="slate" class="home-div">
<div class="section-content">
<img src="index.assets/hello_algo_header.png" style="width: 100%; max-width: 39em;">
<div class="code-badge">
<img src="https://img.shields.io/badge/Python-snow?logo=python&logoColor=3776AB">
<img src="https://img.shields.io/badge/C%2B%2B-snow?logo=c%2B%2B&logoColor=00599C">
<img src="https://img.shields.io/badge/Java-snow?logo=coffeescript&logoColor=FC4C02">
<img src="https://img.shields.io/badge/C%23-snow?logo=csharp&logoColor=512BD4">
<img src="https://img.shields.io/badge/Go-snow?logo=go&logoColor=00ADD8">
<img src="https://img.shields.io/badge/Swift-snow?logo=swift&logoColor=F05138">
<img src="https://img.shields.io/badge/JavaScript-snow?logo=javascript&logoColor=E9CE30">
<img src="https://img.shields.io/badge/TypeScript-snow?logo=typescript&logoColor=3178C6">
<img src="https://img.shields.io/badge/Dart-snow?logo=dart&logoColor=0175C2">
<img src="https://img.shields.io/badge/Rust-snow?logo=rust&logoColor=000000">
<img src="https://img.shields.io/badge/C-snow?logo=c&logoColor=A8B9CC">
<img src="https://img.shields.io/badge/Zig-snow?logo=zig&logoColor=F7A41D">
</div>
<p style="margin-top: 2em;">500 幅动画图解、12 种编程语言代码、3000 条社区问答，助你快速入门数据结构与算法</p>
</div>
</section>
<!-- Section: reading -->
<section data-md-color-scheme="default" data-md-color-primary="white" class="home-div">
<div class="section-content">
<div class="reading-media">
<!-- devices -->
<!-- book height = 250 mm -->
<!-- mac height = 248.1 mm -->
<!-- ipad height = 280.6mm -->
<!-- iphone height = 160.7mm -->
<div class="media-block">
<div style="height: 8.17%;"></div>
<img class="device-on-hover" style="height: 66.83%;" src="assets/hero/cover_render.png">
<div class="text-button" style="color: var(--md-accent-fg-color);">
<span>纸质书<br>（即将发布）</span>
</div>
</div>
<div class="media-block">
<a href="/chapter_preface/">
<div style="height: 4.34%;"></div>
<img class="device-on-hover" style="height: 66.31%;" src="assets/hero/web_mac_iphone.png">
<div style="height: 4.34%;"></div>
<div class="text-button">
<span>在线阅读</span>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
</svg>
</div>
</a>
</div>
<div class="media-block">
<a href="https://github.com/krahets/hello-algo/releases">
<img class="device-on-hover" style="height: 75%;" src="assets/hero/pdf_ipad.png">
<div class="text-button">
<span>下载 PDF</span>
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
</svg>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- Section: endorsements -->
<section data-md-color-scheme="slate" data-md-color-primary="grey" class="home-div">
<div class="section-content">
<h3 style="text-align: center; margin: 1em auto;">推荐语</h3>
<div class="intro-container" style="margin: 0 auto;">
<div class="intro-text endor-text">
<p style="margin-bottom: 0;">“一本通俗易懂的数据结构与算法入门书，引导读者手脑并用地学习，强烈推荐算法初学者阅读。”</p>
<p style="font-weight: bold;">—— 邓俊辉，清华大学计算机系教授</p>
</div>
<div class="intro-text endor-text">
<p style="margin-bottom: 0;">“如果我当年学数据结构与算法的时候有《Hello 算法》，学起来应该会简单 10 倍！”</p>
<p style="font-weight: bold;">—— 李沐，亚马逊资深首席科学家</p>
</div>
</div>
</div>
</section>
<!-- Section: features -->
<section data-md-color-scheme="default" data-md-color-primary="white" class="home-div">
<div class="section-content">
<div class="intro-container">
<div class="intro-text">
<div>
<div style="display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" height="1.5em" width="1.5em"
viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path fill="var(--md-primary-bg-color)"
d="M256 0H576c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64zM476 106.7C471.5 100 464 96 456 96s-15.5 4-20 10.7l-56 84L362.7 169c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h80 48H552c8.9 0 17-4.9 21.2-12.7s3.7-17.3-1.2-24.6l-96-144zM336 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM64 128h96V384v32c0 17.7 14.3 32 32 32H320c17.7 0 32-14.3 32-32V384H512v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192c0-35.3 28.7-64 64-64zm8 64c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V208c0-8.8-7.2-16-16-16H72zm0 104c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V312c0-8.8-7.2-16-16-16H72zm0 104c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V416c0-8.8-7.2-16-16-16H72zm336 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16V416c0-8.8-7.2-16-16-16H424c-8.8 0-16 7.2-16 16z" />
</svg>
<h3 style="margin-left: 0.5em;">动画图解</h3>
</div>
<p style="margin: 0;">内容清晰易懂，学习曲线平滑</p>
<p class="intro-quote">"A picture is worth a thousand words."</br>“一图胜千言”</p>
</div>
</div>
<img class="intro-image" src="index.assets/animation.gif">
</div>
<div class="intro-container">
<img class="intro-image" src="index.assets/running_code.gif">
<div class="intro-text">
<div>
<div style="display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" height="1.5em" width="1.5em"
viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path fill="var(--md-primary-bg-color)"
d="M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" />
</svg>
<h3 style="margin-left: 0.5em;">一键运行</h3>
</div>
<p style="margin: 0;">十余种编程语言，代码可视化运行</p>
<p class="intro-quote">"Talk is cheap. Show me the code."</br>“少吹牛，看代码”</p>
</div>
</div>
</div>
<div class="intro-container">
<div class="intro-text">
<div>
<div style="display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" height="1.5em" width="1.5em"
viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.-->
<path fill="var(--md-primary-bg-color)"
d="M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.7 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z" />
</svg>
<h3 style="margin-left: 0.5em;">互助学习</h3>
</div>
<p style="margin: 0;">欢迎讨论与提问，读者间携手共进</p>
<p class="intro-quote">"Learning by teaching."</br>“教学相长”</p>
</div>
</div>
<img class="intro-image" src="index.assets/comment.gif">
</div>
</div>
</section>
<!-- Section: contributors -->
<section data-md-color-scheme="slate" data-md-color-primary="grey" class="home-div">
<div class="section-content" style="max-width: 90vw;">
<!-- author -->
<div style="margin: 2em auto;">
<h3>作者</h3>
<div class="profile-div">
<div class="profile-cell">
<a href="https://github.com/krahets">
<img class="profile-img" src="assets/avatar/avatar_yudongjin.jpg" alt="yudongjin" />
<br><b>靳宇栋（@krahets）</b>
</a>
</div>
</div>
</div>
<!-- reviewers -->
<div style="margin: 2em auto;">
<h3>代码审阅者</h3>
<div class="profile-div">
<div class="profile-cell">
<a href="https://github.com/codingonion">
<img class="profile-img" src="assets/avatar/avatar_codingonion.jpg" alt="codingonion" />
<br><b>codingonion</b>
<br><sub>Zig, Rust</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/Gonglja">
<img class="profile-img" src="assets/avatar/avatar_Gonglja.jpg" alt="Gonglja" />
<br><b>Gonglja</b>
<br><sub>C, C++</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/gvenusleo">
<img class="profile-img" src="assets/avatar/avatar_gvenusleo.jpg" alt="gvenusleo" />
<br><b>gvenusleo</b>
<br><sub>Dart</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/hpstory">
<img class="profile-img" src="assets/avatar/avatar_hpstory.jpg" alt="hpstory" />
<br><b>hpstory</b>
<br><sub>C#</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/justin-tse">
<img class="profile-img" src="assets/avatar/avatar_justin-tse.jpg" alt="justin-tse" />
<br><b>justin-tse</b>
<br><sub>JS, TS</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/krahets">
<img class="profile-img" src="assets/avatar/avatar_krahets.jpg" alt="krahets" />
<br><b>krahets</b>
<br><sub>Python, Java</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/night-cruise">
<img class="profile-img" src="assets/avatar/avatar_night-cruise.jpg" alt="night-cruise" />
<br><b>night-cruise</b>
<br><sub>Rust</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/nuomi1">
<img class="profile-img" src="assets/avatar/avatar_nuomi1.jpg" alt="nuomi1" />
<br><b>nuomi1</b>
<br><sub>Swift</sub>
</a>
</div>
<div class="profile-cell">
<a href="https://github.com/Reanon">
<img class="profile-img" src="assets/avatar/avatar_Reanon.jpg" alt="Reanon" />
<br><b>Reanon</b>
<br><sub>Go, C</sub>
</a>
</div>
</div>
</div>
<!-- contributors -->
<div style="margin: 2em auto;">
<h3>贡献者</h3>
<p>本书在开源社区 130 多位贡献者的共同努力下不断完善，感谢他们付出的时间与精力！</p>
<a href="https://github.com/krahets/hello-algo/graphs/contributors">
<img src="https://contrib.rocks/image?repo=krahets/hello-algo" style="width: 100%; max-width: 38.5em;">
</a>
</div>
</div>
</section>
<section data-md-color-scheme="default" data-md-color-primary="white" class="home-div">
<div class="section-content giscus-container">
<p>欢迎在评论区留下你的见解、问题或建议</p>
<!-- Insert generated snippet here -->
<script
src="https://giscus.app/client.js"
data-repo="krahets/hello-algo"
data-repo-id="R_kgDOIXtSqw"
data-category="Announcements"
data-category-id="DIC_kwDOIXtSq84CSZk_"
data-mapping="pathname"
data-strict="1"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="light"
data-lang="zh-CN"
crossorigin="anonymous"
async
>
</script>
</div>
</section>

2
mkdocs.yml
Unescape View File

@ -20,7 +20,7 @@ theme:
custom_dir: build/overrides custom_dir: build/overrides
language: zh language: zh
features: features:
# - announce.dismiss - announce.dismiss
- content.action.edit - content.action.edit
# - content.action.view # - content.action.view
- content.code.annotate - content.code.annotate

17
overrides/main.html
Unescape View File

@ -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 %}
<div class="banner-svg">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
<path
d="M480 32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9L381.7 53c-48 48-113.1 75-181 75H192 160 64c-35.3 0-64 28.7-64 64v96c0 35.3 28.7 64 64 64l0 128c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V352l8.7 0c67.9 0 133 27 181 75l43.6 43.6c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V300.4c18.6-8.8 32-32.5 32-60.4s-13.4-51.6-32-60.4V32zm-64 76.7V240 371.3C357.2 317.8 280.5 288 200.7 288H192V192h8.7c79.8 0 156.5-29.8 215.3-83.3z" />
</svg>
<span>{{ announcements }}</span>
</div>
{% endblock %}

33
overrides/stylesheets/extra.css
Unescape View File

@ -207,6 +207,19 @@ body {
width: 1.25em; 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 { .pythontutor-iframe {
width: 125%; width: 125%;
height: 125%; height: 125%;
@ -321,7 +334,7 @@ a:hover .text-button span {
} }
/* hero image */ /* hero image */
.hero-image-div { .hero-div {
height: min(84vh, 75vw); height: min(84vh, 75vw);
width: min(112vh, 100vw); width: min(112vh, 100vw);
margin: 0 auto; margin: 0 auto;
@ -340,13 +353,13 @@ a:hover .text-button span {
} }
/* hover on the planets */ /* hover on the planets */
.hero-on-hover { .hero-div > a > img {
width: auto; width: auto;
position: absolute; position: absolute;
transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
} }
.hero-caption { .hero-div > a > span {
margin: 0; margin: 0;
position: absolute; position: absolute;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
@ -354,17 +367,27 @@ a:hover .text-button span {
color: white; color: white;
} }
a:hover .hero-on-hover { .hero-div > a:hover > img {
filter: brightness(1.15) saturate(1.1) filter: brightness(1.15) saturate(1.1)
drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.2)); drop-shadow(0 0 0.5rem rgba(255, 255, 255, 0.2));
transform: scale(1.03); transform: scale(1.03);
} }
a:hover .hero-caption { .hero-div > a:hover > span {
text-decoration: underline; text-decoration: underline;
color: var(--md-typeset-btn-color); 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 */
.code-badge { .code-badge {
width: 100%; width: 100%;

Write Preview
Loading…
Cancel
Save