🚀 使用Svelte和Supabase构建HackerNews克隆版

“一个无需后端模板的极速HackerNews克隆版？当然要！”

在本教程中，我们将使用Svelte（前端魔法师🧙）和Supabase（开源Firebase替代方案💾）构建一个轻量级、快速且现代的HackerNews克隆版。

📦 为什么选择Svelte + Supabase？

Svelte编译为小巧、高性能的JS

Supabase提供：

带有RESTful和实时API的PostgreSQL
认证、存储、边缘函数
无需服务器端代码

两者结合让您构建全栈应用而无需全栈开发的烦恼。

🧰 我们将构建什么

一个HackerNews风格的应用，包含： ✅ 注册/登录（通过Supabase Auth） 🔗 提交链接（标题+URL） 🗳️ 帖子投票 💬 评论线程（基础功能） ⚡ 实时更新

🛠️ 项目设置

1. 安装SvelteKit应用

1
2
3


npm create svelte@latest hackernews-clone
cd hackernews-clone
npm install

2. 安装Supabase客户端

1

npm install @supabase/supabase-js

3. 设置Supabase项目

访问 https://app.supabase.com

创建新项目
获取您的ANON KEY和PROJECT URL

添加到.env文件：

1
2


VITE_SUPABASE_URL=https://xyzcompany.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

4. 初始化Supabase客户端

创建 src/lib/supabaseClient.ts：

1
2
3
4
5
6


import { createClient } from '@supabase/supabase-js';

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

🧑‍💻 认证：注册/登录

创建 src/routes/login/+page.svelte

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<script lang="ts">
  import { supabase } from '$lib/supabaseClient';
  let email = '';
  let password = '';

  const login = async () => {
    const { error } = await supabase.auth.signInWithPassword({ email, password });
    if (error) alert(error.message);
  };
</script>

<input bind:value={email} placeholder="Email" />
<input type="password" bind:value={password} placeholder="Password" />
<button on:click={login}>Log In</button>

🔗 提交帖子

创建posts表，包含字段：

id
title
url
user_email
upvotes (默认: 0)

提交页面示例：

1
2
3
4
5
6
7


let title = '';
let url = '';

const submit = async () => {
  const user = await supabase.auth.getUser();
  await supabase.from('posts').insert([{ title, url, user_email: user.data.user.email }]);
};

🧠 显示帖子

src/routes/+page.svelte

1
2
3
4
5
6


let posts = [];

onMount(async () => {
  const { data } = await supabase.from('posts').select('*').order('upvotes', { ascending: false });
  posts = data;
});

🔼 投票功能

1
2
3
4
5


const upvote = async (postId, currentVotes) => {
  await supabase.from('posts')
    .update({ upvotes: currentVotes + 1 })
    .eq('id', postId);
};

⚡ 实时更新

在Supabase UI中为posts启用Realtime功能：

1
2
3
4
5
6


supabase
  .channel('posts')
  .on('postgres_changes', { event: '*', schema: 'public', table: 'posts' }, payload => {
    // 更新本地posts[]
  })
  .subscribe();

🔐 认证保护（可选）

添加到 src/hooks.server.ts：

1
2
3
4
5


export async function handle({ event, resolve }) {
  const { user } = await supabase.auth.getUser();
  event.locals.user = user;
  return resolve(event);
}

🧪 可添加的功能

🧵 评论表 + 嵌套评论 🧙 管理员标志审核 🕶️ 暗黑模式切换 🚀 PWA设置 📱 移动优先UI

💡 结论

您刚刚使用Svelte和Supabase构建了一个现代的HackerNews克隆版！

Svelte保持您的前端极速运行⚡ Supabase像魔法一样处理后端🧙

🌐 有用链接

SvelteKit文档
Supabase
实时文档
HackerNews

🔥 如果您想要第二部分——“添加评论和暗黑模式”——请告诉我！