sanbuphy
269 lines
14 KiB
HTML
269 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Vibe Coding 101</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
|
<!-- Theme: Vue -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css" onerror="this.onerror=null;this.href='https://unpkg.com/docsify@4/lib/themes/vue.css';" />
|
|
<!-- Katex CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" onerror="this.onerror=null;this.href='https://unpkg.com/katex@0.16.0/dist/katex.min.css';" />
|
|
<!-- Viewer.js CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/viewerjs@1.11.6/dist/viewer.min.css" />
|
|
|
|
<style>
|
|
/* --- 样式保持不变 --- */
|
|
.github-corner:hover .octo-arm { animation: octocat-wave 560ms ease-in-out; }
|
|
@keyframes octocat-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-25deg); } 40%, 80% { transform: rotate(10deg); } }
|
|
@media (max-width: 500px) { .github-corner:hover .octo-arm { animation: none; } .github-corner .octo-arm { animation: octocat-wave 560ms ease-in-out; } }
|
|
|
|
:root { --sidebar-width: 230px; --sidebar-padding: 12px 24px; --theme-color: #42b983; }
|
|
.markdown-section {
|
|
padding: 24px 40px 40px 24px;
|
|
max-width: 850px; /* 增加内容宽度，减少左右空白 */
|
|
}
|
|
.sidebar-nav ul { list-style-type: none; }
|
|
|
|
/* 优化侧边栏主菜单间距 */
|
|
.sidebar-nav li { margin: 0; }
|
|
.sidebar-nav ul li a {
|
|
padding: 3px 0;
|
|
line-height: 1.4;
|
|
font-weight: bold; /* 文件标题加粗 */
|
|
}
|
|
|
|
.app-sub-sidebar li { list-style-type: none !important; }
|
|
.app-sub-sidebar li::before { content: none !important; }
|
|
|
|
/* 目录内容（TOC）不加粗，并提高优先级覆盖上面的设置 */
|
|
.sidebar-nav .app-sub-sidebar li a {
|
|
padding: 2px 0;
|
|
line-height: 1.3;
|
|
display: block;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* --- 暗黑模式样式 --- */
|
|
:root {
|
|
--dark-bg: #1a1a1a;
|
|
--dark-sidebar: #141414;
|
|
--dark-border: #333;
|
|
--dark-text: #e6e6e6;
|
|
--dark-code-text: #f8f8f2;
|
|
--dark-code-bg: #2b2b2b;
|
|
}
|
|
body.dark-mode { background-color: var(--dark-bg); color: var(--dark-text); }
|
|
body.dark-mode .sidebar { background-color: var(--dark-sidebar); border-right: 1px solid var(--dark-border); color: var(--dark-text); }
|
|
body.dark-mode .sidebar-nav li a { color: #999; }
|
|
body.dark-mode .sidebar-nav li.active > a { color: var(--theme-color); border-right: 2px solid var(--theme-color); }
|
|
body.dark-mode .search { border-bottom: 1px solid var(--dark-border); }
|
|
body.dark-mode .search input { background-color: transparent; color: var(--dark-text); }
|
|
body.dark-mode .results-panel { background-color: var(--dark-bg); color: var(--dark-text); }
|
|
body.dark-mode .matching-post { border-bottom: 1px solid var(--dark-border); }
|
|
body.dark-mode .matching-post h2, body.dark-mode .matching-post p { color: var(--dark-text); }
|
|
body.dark-mode pre { background-color: var(--dark-code-bg) !important; }
|
|
body.dark-mode code { background-color: var(--dark-code-bg) !important; color: var(--dark-code-text) !important; }
|
|
body.dark-mode .markdown-section code { color: #f08d49; background-color: rgba(255,255,255,0.1); }
|
|
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #ffffff; }
|
|
body.dark-mode blockquote { color: #b0b0b0; background: rgba(255,255,255,0.05); border-left-color: var(--theme-color); }
|
|
body.dark-mode strong { color: #fff; }
|
|
body.dark-mode .markdown-section tr:nth-child(2n) { background-color: rgba(255,255,255,0.03); }
|
|
body.dark-mode .markdown-section td, body.dark-mode .markdown-section th { border-color: var(--dark-border); }
|
|
|
|
.vibe-toggle-text { cursor: pointer; display: inline-flex; align-items: center; padding: 0; margin-left: 8px; font-size: 14px; border: none; background: transparent; transition: opacity 0.2s; vertical-align: middle; line-height: 1; color: inherit; font-weight: normal; }
|
|
body.dark-mode .vibe-toggle-text { background: transparent; border: none; }
|
|
.vibe-toggle-text:hover { opacity: 0.7; }
|
|
.vibe-toggle-text span { margin-left: 4px; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }
|
|
|
|
/* --- 全局图片样式控制 --- */
|
|
.markdown-section img {
|
|
max-width: 80%; /* 限制最大宽度为 80% */
|
|
max-height: 300px; /* 限制最大高度为 300px */
|
|
display: block; /* 块级显示 */
|
|
margin: 10px auto; /* 上下间距 10px，左右自动居中 */
|
|
border-radius: 4px; /* 轻微圆角 */
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 轻微阴影，增加质感 */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">加载中... (如果长时间未加载，请尝试刷新)</div>
|
|
<a href="https://github.com/datawhalechina/vibe-coding" class="github-corner" aria-label="View source on GitHub">
|
|
<svg width="80" height="80" viewBox="0 0 250 250" style="fill: #64ceaa; color: #fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
|
|
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
|
|
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
|
|
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.9,120.9 152.7,125.1 L141.0,136.9 C139.8,138.0 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
|
|
</svg>
|
|
</a>
|
|
<script>
|
|
window.$docsify = {
|
|
name: 'Vibe Coding 101',
|
|
repo: '',
|
|
loadSidebar: true,
|
|
|
|
// 核心修复：禁用了 relativePath，避免搜索插件路径解析错误
|
|
// relativePath: true,
|
|
|
|
alias: {
|
|
'/.*/_sidebar.md': '/_sidebar.md'
|
|
},
|
|
subMaxLevel: 2,
|
|
homepage: 'README.md',
|
|
|
|
// --- 搜索配置 ---
|
|
search: {
|
|
maxAge: 86400000,
|
|
paths: [
|
|
'README.md',
|
|
'project/chapter0-learning-map/chapter0-learning-map.md',
|
|
'project/chapter1/chapter1-how-to-build-a-snake-game.md',
|
|
'project/chapter2/chapter2-reach-the-capability-boundaries-of-ai-tools.md',
|
|
'project/chapter3/chapter3-getting-started-with-dify-and-its-knowledge-base-integration.md',
|
|
'project/chapter4/chapter4-lets-build-hogwarts-portraits.md',
|
|
'project/chapter5/chapter5-from-database-to-supabase.md',
|
|
'project/chapter6/chapter6-no-code-without-an-idea.md',
|
|
'extra/extra1/extra1-what-is-git-and-what-is-github.md',
|
|
'extra/extra2/extra2-what-is-api.md',
|
|
'extra/extra3/extra3-ai-capability-starter-handbook.md',
|
|
'extra/extra4/extra4-what-is-ai-ide-and-trae.md',
|
|
'extra/extra5/extra5-what-is-rag-and-how-does-it-work-and-future.md',
|
|
'extra/extra6/extra6-zeabur-what-is-it-and-how-to-deploy-web-applications.md',
|
|
'extra/extra7/extra7-cli-ai-coding-tools-and-the-principles-of-test-driven-development.md',
|
|
'examples/example0/example0-1/vibe-coding-tools-snake-game-tutorial.md',
|
|
'examples/example0/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents.md',
|
|
'examples/example1/example1-how-to-build-a-wechat-miniprogram.md'
|
|
],
|
|
placeholder: '🔍 搜索',
|
|
noData: '😞 找不到结果',
|
|
depth: 3,
|
|
namespace: 'vibe-coding-search-v5' // 更新命名空间以清理旧缓存
|
|
},
|
|
|
|
pagination: {
|
|
previousText: '上一页',
|
|
nextText: '下一页',
|
|
crossChapter: true,
|
|
crossChapterText: true
|
|
},
|
|
count: {
|
|
countable: true,
|
|
position: 'top',
|
|
margin: '10px 0 20px 0',
|
|
float: 'left',
|
|
fontsize: '0.9em',
|
|
color: 'rgb(90,90,90)',
|
|
language: 'chinese',
|
|
isExpected: true
|
|
},
|
|
plugins: [
|
|
function (hook, vm) {
|
|
hook.doneEach(function () {
|
|
// 暗黑模式切换按钮逻辑
|
|
var appName = document.querySelector('.app-name');
|
|
if (appName) {
|
|
var existing = document.querySelector('.vibe-toggle-text');
|
|
if (!existing) {
|
|
existing = document.createElement('span');
|
|
existing.className = 'vibe-toggle-text';
|
|
existing.onclick = function (e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
document.body.classList.toggle('dark-mode');
|
|
var isDark = document.body.classList.contains('dark-mode');
|
|
localStorage.setItem('theme-mode', isDark ? 'dark' : 'light');
|
|
var html = isDark
|
|
? '🌙 <span style="display:inline; color:inherit;">Dark</span>'
|
|
: '☀️ <span style="display:inline; color:inherit;">Light</span>';
|
|
if (existing.innerHTML !== html) existing.innerHTML = html;
|
|
};
|
|
appName.appendChild(existing);
|
|
}
|
|
|
|
var savedTheme = localStorage.getItem('theme-mode');
|
|
var isDark = savedTheme === 'dark';
|
|
if (isDark) document.body.classList.add('dark-mode');
|
|
else document.body.classList.remove('dark-mode');
|
|
var html = isDark
|
|
? '🌙 <span style="display:inline; color:inherit;">Dark</span>'
|
|
: '☀️ <span style="display:inline; color:inherit;">Light</span>';
|
|
if (existing.innerHTML !== html) existing.innerHTML = html;
|
|
}
|
|
|
|
// 字数统计位置调整
|
|
setTimeout(function () {
|
|
var section = document.querySelector('.markdown-section');
|
|
if (!section) return;
|
|
var title = section.querySelector('h1');
|
|
var counter = section.querySelector('.countable');
|
|
if (title && counter && title.nextSibling !== counter) {
|
|
title.parentNode.insertBefore(counter, title.nextSibling);
|
|
counter.style.display = 'block';
|
|
counter.style.float = 'none';
|
|
counter.style.margin = '10px 0 20px 0';
|
|
}
|
|
}, 0);
|
|
});
|
|
},
|
|
function (hook, vm) {
|
|
hook.doneEach(function () {
|
|
// Viewer.js 图片预览插件初始化
|
|
var container = document.querySelector('.markdown-section');
|
|
if (container) {
|
|
new Viewer(container, {
|
|
filter: function(image) {
|
|
// 过滤掉 emoji 和非内容图片
|
|
return !image.classList.contains('emoji');
|
|
},
|
|
// 工具栏配置：显示缩放、旋转、翻转等
|
|
toolbar: {
|
|
zoomIn: 4,
|
|
zoomOut: 4,
|
|
oneToOne: 4,
|
|
reset: 4,
|
|
prev: 0,
|
|
play: 0,
|
|
next: 0,
|
|
rotateLeft: 4,
|
|
rotateRight: 4,
|
|
flipHorizontal: 4,
|
|
flipVertical: 4,
|
|
},
|
|
title: false, // 不显示标题
|
|
navbar: false, // 不显示底部缩略图导航
|
|
movable: true, // 允许拖动
|
|
zoomable: true, // 允许缩放
|
|
rotatable: true, // 允许旋转
|
|
scalable: true, // 允许翻转
|
|
});
|
|
}
|
|
});
|
|
}
|
|
]
|
|
};
|
|
</script>
|
|
|
|
<!-- 核心 Docsify - 优先使用 jsDelivr -->
|
|
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/docsify.min.js" onerror="this.onerror=null;this.src='https://unpkg.com/docsify@4/lib/docsify.min.js';"></script>
|
|
|
|
<!-- 插件 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.min.js" onerror="this.onerror=null;this.src='https://unpkg.com/docsify@4/lib/plugins/search.min.js';"></script>
|
|
<!-- Viewer.js 替代 zoom-image -->
|
|
<script src="https://cdn.jsdelivr.net/npm/viewerjs@1.11.6/dist/viewer.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js" onerror="this.onerror=null;this.src='https://unpkg.com/docsify-copy-code/dist/docsify-copy-code.min.js';"></script>
|
|
|
|
<!-- Prism 代码高亮 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js" onerror="this.onerror=null;this.src='https://unpkg.com/prismjs@1/components/prism-bash.min.js';"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js" onerror="this.onerror=null;this.src='https://unpkg.com/prismjs@1/components/prism-python.min.js';"></script>
|
|
|
|
<!-- 分页 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/docsify-pagination@2/dist/docsify-pagination.min.js" onerror="this.onerror=null;this.src='https://unpkg.com/docsify-pagination@2/dist/docsify-pagination.min.js';"></script>
|
|
|
|
<!-- Katex 公式 - 确保版本匹配 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" onerror="this.onerror=null;this.src='https://unpkg.com/katex@0.16.0/dist/katex.min.js';"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js" onerror="this.onerror=null;this.src='https://unpkg.com/docsify-katex@latest/dist/docsify-katex.js';"></script>
|
|
|
|
<!-- 字数统计 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/docsify-count@latest/dist/countable.min.js" onerror="this.onerror=null;this.src='https://unpkg.com/docsify-count/dist/countable.js';"></script>
|
|
</body>
|
|
</html>
|