-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
175 lines (163 loc) · 9.86 KB
/
Copy pathindex.html
File metadata and controls
175 lines (163 loc) · 9.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title data-i18n-html-title="siteTitle">AI Nav · 全球 AI 工具导航</title>
<meta name="description" data-i18n-content="siteDesc" content="收录全球 280+ AI 工具的导航站，分类齐全，支持模糊搜索。涵盖聊天、绘画、视频、写作、代码、办公、设计等全部主流方向。">
<meta name="keywords" data-i18n-content="siteKeywords" content="AI 工具,AI 导航,AI 工具大全,ChatGPT,Midjourney,Sora,Claude,DeepSeek,通义千问,文心一言,AI 写作,AI 绘画,AI 编程">
<meta name="theme-color" content="#0B1020">
<link rel="sitemap" type="application/xml" href="sitemap.xml">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SKES4GTDCS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-SKES4GTDCS');
</script>
<!-- Google AdSense Auto Ads -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6473783239192829"
crossorigin="anonymous"></script>
<link rel="icon" type="image/svg+xml" href="logo.svg?v=26">
<link rel="stylesheet" href="styles.css?v=26">
<!-- Fuse.js 模糊搜索（CDN，GitHub Pages 可直接访问） -->
<script src="https://cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.min.js"></script>
<!-- i18n（必须在 data.js / app.js 之前；首次访问按浏览器语言自动加载） -->
<script src="i18n.js?v=26"></script>
</head>
<body>
<!-- Google AdSense Auto Ads 激活（让 AdSense 自动选位置插入；移动端约 7 个、桌面端约 6 个） -->
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-6473783239192829",
enable_page_level_ads: true
});
</script>
<!-- 顶部背景光晕 -->
<div class="bg-glow" aria-hidden="true">
<span class="blob blob-1"></span>
<span class="blob blob-2"></span>
<span class="blob blob-3"></span>
</div>
<header class="site-header">
<div class="brand">
<img src="logo.svg" alt="AI Nav" class="brand-logo">
<div class="brand-text">
<h1>AI Nav</h1>
<p class="brand-sub" data-i18n="brandSub">全球 AI 工具导航 · 持续更新</p>
</div>
</div>
<!-- 搜索框 -->
<div class="search-wrap">
<span class="search-icon" aria-hidden="true">🔍</span>
<input
id="search"
type="search"
data-i18n-placeholder="placeholder"
placeholder="搜索工具名、关键词、分类… 如：gpt、绘画、国产、代码"
autocomplete="off"
spellcheck="false"
>
<kbd class="search-kbd">/</kbd>
</div>
<!-- 统计 + 语言切换 -->
<div class="header-right">
<div class="header-stats">
<span><b id="stat-total">0</b> <span data-i18n="statTools">个工具</span></span>
<span><b id="stat-cat">0</b> <span data-i18n="statCats">个分类</span></span>
</div>
<div class="lang-switch" role="group" aria-label="Language switch">
<button class="lang-btn" data-lang="zh" type="button" title="简体中文">中</button>
<button class="lang-btn" data-lang="en" type="button" title="English">EN</button>
</div>
</div>
</header>
<!-- 主体 + 右侧分类栏（桌面端两栏，移动端单栏） -->
<div class="layout">
<!-- 主体内容 -->
<main id="content" class="content">
<!-- 静态 SEO/介绍（v24：JS 渲染前 crawler/用户可见，JS 渲染后保留在 main 顶部） -->
<section class="static-intro" aria-label="site intro">
<h2 class="intro-h2" data-i18n="introH2">AI 工具导航 · 全球最全 AI 工具大全</h2>
<p class="intro-p" data-i18n="introP">收录 533 个 AI 工具、32 个分类，覆盖聊天、写作、图像、视频、音频、代码、设计、Agent、开源模型、办公、搜索、翻译、教育、数据分析、营销、3D / 世界模型、科研、会议、简历、播客、修图、PPT、数字人、输入法、游戏、健康、法律、金融、天气、垂直小众等全部方向。支持中英文 / 拼音 / 缩写 / 关键词容错的模糊搜索。</p>
<h3 class="intro-h3" data-i18n="introPicksTitle">🔥 编辑精选（每周更新）</h3>
<ul class="editor-picks">
<li><a href="https://chat.openai.com" target="_blank" rel="noopener noreferrer" class="pick-link"><b>ChatGPT</b><span data-i18n="pickChatGPT">OpenAI 多模态对话，新手入门首选</span></a></li>
<li><a href="https://claude.ai" target="_blank" rel="noopener noreferrer" class="pick-link"><b>Claude</b><span data-i18n="pickClaude">Anthropic 出品，长文档与代码能力强</span></a></li>
<li><a href="https://www.midjourney.com" target="_blank" rel="noopener noreferrer" class="pick-link"><b>Midjourney</b><span data-i18n="pickMidjourney">AI 图像生成画质天花板</span></a></li>
<li><a href="https://openai.com/sora" target="_blank" rel="noopener noreferrer" class="pick-link"><b>Sora</b><span data-i18n="pickSora">OpenAI 视频生成（文生视频）</span></a></li>
<li><a href="https://www.suno.ai" target="_blank" rel="noopener noreferrer" class="pick-link"><b>Suno</b><span data-i18n="pickSuno">AI 音乐生成（含人声）</span></a></li>
<li><a href="https://www.cursor.com" target="_blank" rel="noopener noreferrer" class="pick-link"><b>Cursor</b><span data-i18n="pickCursor">AI 优先的代码编辑器</span></a></li>
<li><a href="https://github.com/features/copilot" target="_blank" rel="noopener noreferrer" class="pick-link"><b>GitHub Copilot</b><span data-i18n="pickCopilot">GitHub + OpenAI 的 AI 结对编程</span></a></li>
<li><a href="https://www.perplexity.ai" target="_blank" rel="noopener noreferrer" class="pick-link"><b>Perplexity</b><span data-i18n="pickPerplexity">AI 答案引擎，带引用来源</span></a></li>
</ul>
<p class="intro-tip" data-i18n="introTip">💡 使用提示：按 <kbd>/</kbd> 聚焦搜索框；右侧分类栏快速筛选；搜索关键词会同步到 URL，可分享。</p>
</section>
<!-- 分类区块由 JS 注入 -->
</main>
<!-- 右侧分类导航 -->
<aside class="cat-sidebar" aria-label="分类筛选">
<div class="cat-sidebar-inner">
<div class="cat-sidebar-title" data-i18n="catAll">分类</div>
<nav class="cat-nav" id="catNav">
<!-- 分类按钮由 JS 注入 -->
</nav>
</div>
<!-- 移动端下拉（桌面端隐藏） -->
<select id="catSelect" class="cat-select" aria-label="分类筛选">
<!-- 选项由 JS 注入 -->
</select>
</aside>
</div>
<!-- 空状态 -->
<div id="empty" class="empty" hidden>
<div class="empty-icon">🛰️</div>
<h2 data-i18n="emptyTitle">没找到匹配的工具</h2>
<p><span data-i18n="emptyDesc">试试别的关键词，或者</span><a href="#" id="resetLink" data-i18n="emptyReset">查看全部</a></p>
</div>
<!-- 底部广告位（v24：删掉"待激活"占位文字，避免 AdSense crawler 读出负面信号；
AdSense 激活后由 Auto Ads 自动填入） -->
<div class="ad-slot ad-bottom" aria-hidden="true">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6473783239192829"
data-ad-slot="0000000000"
data-ad-format="horizontal"
data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<footer class="site-footer">
<p>© <span id="year"></span> AI Nav · <span data-i18n="footerCopyright">收录于互联网公开信息，工具归各自作者所有</span></p>
<p class="muted"><span data-i18n="footerNote">本站仅作导航整理</span> · <a href="./about.html" data-i18n="footerAbout">关于</a> · <a href="./privacy.html" data-i18n="footerPrivacy">隐私政策</a> · <a href="https://github.com/Aaron88915/AItools" target="_blank" rel="noopener" data-i18n="footerGithub">GitHub</a></p>
</footer>
<!-- 深度文章区（v25：放在 footer 之前，给 AdSense bot 和用户看到「有原创内容」） -->
<section class="articles-block" aria-label="深度评测文章">
<h3 class="articles-title" data-i18n="articlesBlockTitle">📚 深度评测文章</h3>
<p class="articles-desc" data-i18n="articlesBlockDesc">除了工具目录，我们还发布基于真实使用经验的深度评测文章，帮你做出更合适的选择：</p>
<ul class="articles-list">
<li>
<a href="./blog/best-ai-writing-tools-2026.html" class="article-link">
<span class="article-name" data-i18n="aboutArticlesA1">2026 年最值得关注的 10 个 AI 写作工具深度对比</span>
<span class="article-meta">8.4K 字 · 写作类</span>
</a>
</li>
<li>
<a href="./blog/free-ai-tools-list.html" class="article-link">
<span class="article-name" data-i18n="aboutArticlesA2">2026 年免费 AI 工具推荐清单（实测好用）</span>
<span class="article-meta">7.3K 字 · 全场景</span>
</a>
</li>
<li>
<a href="./blog/chatgpt-vs-claude-vs-gemini.html" class="article-link">
<span class="article-name" data-i18n="aboutArticlesA3">ChatGPT vs Claude vs Gemini 真实使用体验对比（2026）</span>
<span class="article-meta">8.1K 字 · 大模型对比</span>
</a>
</li>
</ul>
</section>
<!-- 数据 + 逻辑 -->
<script src="data.js?v=26"></script>
<script src="app.js?v=26"></script>
</body>
</html>