导言#

之前笔者学前端都是浅尝辄止，只会抄个界面下来调 elementUI 这种组件库，没学过任何一个前端框架。但是笔者一直觉得前端很有意思，只是没空去学习，现在笔者决定借助大模型，一边开发一边学习 React 开发，并且基于 Deno 和 Supabase 创建个人全栈应用。

React 据说所有东西都是拆成组件的，很适合喂给 AI 慢慢看，也很适合逐步开发，而且 deno 已经完全兼容了 next.js 这经典的生态。

从零创建一个 Fresh 应用#

笔者想先抄一下 vitepress 的主页，来实现一版课题组主页。

既然已经开始用 Deno 了，这边先创建一个 Fresh 框架的应用：

1
deno run -Ar jsr:@fresh/init

接下来我们阅读示例项目的源码：

首先从 main.ts 看起

1
import { App, staticFiles } from "fresh";
2
import { define, type State } from "./utils.ts";
3

4
export const app = new App<State>();
5

6
app.use(staticFiles());
7

8
// Pass a shared value from a middleware
9
app.use((ctx) => {
10
  ctx.state.test_global = "全局变量测试";
11
  return ctx.next();
12
});
13

14
// this can also be defined via a file. feel free to delete this!
15
const exampleLoggerMiddleware = define.middleware(async (ctx) => {
16
  console.log(`${ctx.req.method} ${ctx.req.url}`);
17
  const res = await ctx.next();
18
  console.log(`${ctx.req.method} ${ctx.req.url}` + `-> ${res.status}`);
19
  return res;
20
});
21
app.use(exampleLoggerMiddleware);
22

23
// Include file-system based routes here
24
app.fsRoutes();

1
import { createDefine } from "fresh";
2

3
// This specifies the type of "ctx.state" which is used to share
4
// data among middlewares, layouts and routes.
5
export interface State {
6
  state: string;
7
  test_global: string;
8
}
9

10
export const define = createDefine<State>();

这个展示了 Fresh 的一些核心特性，包括下面这些：

export const app = new App<State>(); 创建一个 app 实例，而 State 则是一个自定义的上下文类型，自己可以随便改，把一些全局变量存在这里就行了，不过生命周期只有一个 http 请求。这里我提供了个 string 的 test_global 方便理解。
app.use(async (ctx) => {...}); 这里主要是介绍 app.use() 的用法。use() 是用来添加中间件的。我们还可以用文件导入，这里用 Middleware helper 就好，直接 define.middleware(...) ，这个会返回一个 use() 可以使用的自定义 middleware。

这里的写法类似下面的

1
import { App, staticFiles } from "fresh";
2
import { type State } from "./utils.ts";
3
import { LoggerMiddleware } from "./middleware/LoggerMiddleware.ts";
4

5
export const app = new App<State>();
6

7
app.use(staticFiles());
8

9
// Pass a shared value from a middleware
10
app.use((ctx) => {
11
  ctx.state.test_global = "全局变量测试";
12
  return ctx.next();
13
});
14

15
app.use(LoggerMiddleware);
16

17
// Include file-system based routes here
18
app.fsRoutes();

1
import { define } from "../utils.ts";
2

3
// this can also be defined via a file. feel free to delete this!
4
export const LoggerMiddleware = define.middleware(async (ctx) => {
5
  console.log(`${ctx.req.method} ${ctx.req.url}`);
6
  const res = await ctx.next();
7
  console.log(`${ctx.req.method} ${ctx.req.url}` + `-> ${res.status}`);
8
  return res;
9
});

OK，接下来看我们经典的 index.tsx，因为本质上是 fsRoute() 所以这里实际上很方便，在 route 目录下找到就好了。不过 Fresh 有一个很神奇的东西，叫 App wrapper，这里先看

我们先看 _app.tsx, 他相当于一个 App wrapper ，也就是对全局的一个包裹，不过从 fs 的角度来说，似乎是 _app.tsx 这种用法更自然。

1
import { define } from "../utils.ts";
2

3
export default define.page(function App({ Component }) {
4
  return (
5
    <html>
6
      <head>
7
        <meta charset="utf-8" />
8
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
        <title>uestc-ndsl-hpc-web</title>
10
      </head>
11
      <body>
12
        <Component />
13
      </body>
14
    </html>
15
  );
16
});

随后我们阅读 index.tsx:

1
import { useSignal } from "@preact/signals";
2
import { Head } from "fresh/runtime";
3
import { define } from "../utils.ts";
4
import Counter from "../islands/Counter.tsx";
5

6
export default define.page(function Home(ctx) {
7
  const count = useSignal(3);
8

9
  console.log("Shared value " + ctx.state.shared);
10

11
  return (
12
    <div class="px-4 py-8 mx-auto fresh-gradient min-h-screen">
13
      <Head>
14
        <title>Fresh counter</title>
15
      </Head>
16
      <div class="max-w-3xl mx-auto flex flex-col items-center justify-center">
17
        <img
18
          class="my-6"
19
          src="/logo.svg"
20
          width="128"
21
          height="128"
22
          alt="the Fresh logo: a sliced lemon dripping with juice"
23
        />
24
        <h1 class="text-4xl font-bold">Welcome to Fresh</h1>
25
        <p class="my-4">
26
          Try updating this message in the
27
          <code class="mx-2">./routes/index.tsx</code> file, and refresh.
28
        </p>
29
        <Counter count={count} />
30
      </div>
31
    </div>
32
  );
33
});

这个展示了 Fresh 的一些核心特性，包括下面这些：

export default define.page(function Home(ctx) { ... }); 是用来给页面提供类型提示的，避免只有在浏览器运行、用户点击时才报错。Home 则是一个 function 在前端可能以组件的想法更合适。
const count = useSignal(3); 类似声明一个局部变量，更准确的说是一个带自动通知机制的响应式变量，可以用数据表示状态。
console.log 则是经典的控制台日志，前端第一课。
return(...) 看起来像返回的是 html 实际上这里返回的是一个 jsx，是 react 的写法。

下面再看一下其他的几个 fresh 提供的 define 的属性

1
import { define } from "../utils.ts";
2

3
export default define.page(function App({ Component }) {
4
  return (
5
    <html>
6
      <head>
7
        <meta charset="utf-8" />
8
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9
        <title>uestc-ndsl-hpc-web</title>
10
      </head>
11
      <body>
12
        <Component />
13
      </body>
14
    </html>
15
  );
16
});

这里相当于提供了这个文件代表的界面。

看完了这些，基本上对于 fresh 如何编写有了初步的认识，接下来笔者将会设计一个 Navbar 的场景，然后利用 fresh 的 layout 特性。

我们接下来设计一下 navbar，当然我们不能完全自己写，那么很多操作写起来很麻烦。

先按官方的教程导入我们的 daisyui：

1
deno i -D npm:daisyui@latest

不过现在的 style.css 在 asset 目录下。

1
  @import "tailwindcss";
2
  @plugin "daisyui";

现在我们就可以用 daisyui 的组件了。

我们设计一个 logo ，一个黑夜模式按钮加上一个 menu 菜单如下

1
import { asset } from "fresh/runtime";
2
import { MdModeNight } from "@preact-icons/md";
3

4
interface NavbarProps {
5
  text?: string;
6
  logo_url?: string;
7
  navItems?: string[];
8
  home_click?: () => void;
9
  dark_mode_click?: () => void;
10
}
11

12
export default function Navbar({
13
  text = "Navbar",
14
  logo_url = asset("img/avatar-test.jpg"),
15
  navItems = ["Item1", "Item 2", "Item 3"],
16
  home_click,
17
  dark_mode_click,
18
}: NavbarProps) {
19
  return (
20
    <div className="navbar bg-primary text-primary-content rounded-box justify-between">
21
      {/* Logo */}
22
      <button
23
        type="button"
24
        className="btn btn-xs sm:btn-xs md:btn-sm lg:btn-md xl:btn-lg btn-ghost text-md btn-secondary"
25
        onClick={home_click}
26
      >
27
        <div className="avatar">
28
          <div className="w-10 rounded-full">
29
            <img
30
              src={`${logo_url}`}
31
              alt="Logo"
32
            />
33
          </div>
34
        </div>
35
        {text}
36
      </button>
37

38
      {/* 右侧容器：导航和黑夜模式 */}
39
      <div className="flex items-center gap-4">
40
        {/* 导航菜单 */}
41
        <ul className="menu menu-xs sm:menu-xs md:menu-sm lg:menu-md xl:menu-lg menu-horizontal menu-ghost rounded-box text-md">
42
          {navItems.map((item, index) => (
43
            <li key={index}>
44
              <a>{item}</a>
45
            </li>
46
          ))}
47
        </ul>
48

49
        {/* 黑夜模式 */}
50
        <button
51
          type="button"
52
          className="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg xl:btn-xl btn-ghost btn-circle btn-secondary"
53
          onClick={dark_mode_click}
54
        >
55
          <MdModeNight />
56
        </button>
57
      </div>
58
    </div>
59
  );
60
}

稍做改动，迁移到 _layout.tsx 下：

1
import { define } from "../utils.ts";
2
import { asset } from "fresh/runtime";
3
import Navbar from "../components/navbar.tsx";
4

5
export default define.page(function Home({ Component }) {
6
  return (
7
    <div class="px-4 py-8 mx-auto min-h-screen bg-base-100">
8
      <Navbar
9
        text="UESTC NDSL HPC"
10
        navItems={["Home", "Team", "Pub"]}
11
        logo_url={asset("img/logo.png")}
12
      />
13
      <Component />
14
    </div>
15
  );
16
});

最后的效果如下

接下来我们可以对标 vitepress 写一个 Hero 组件，初步掌握这个怎么写以后可以借助 AI 的力量了。我们实现了下面的 Hero.tsx 组件

1
import { asset } from "fresh/runtime";
2

3
interface HeroProps {
4
  title?: string;
5
  subtitle?: string;
6
  tagline?: string;
7
  logo_url?: string;
8
  button_accent_text?: string;
9
  button_secondary_text?: string;
10
  cards?: { card_title: string; card_text: string }[];
11
}
12

13
export default function Hero({
14
  title = "UESTC NDSL HPC",
15
  subtitle =
16
    "A group led by Dr. Zhang focusing on High Performance Computing and Numerical Linear Algebra.",
17
  tagline = "University of Electronic Science and Technology of China",
18
  logo_url = asset("img/logo.png"),
19
  button_accent_text = "Learn More",
20
  button_secondary_text = "Contact Us",
21
    cards = [
22
    { card_title: "Cookies!", card_text: "We are using cookies for no reason." },
23
    { card_title: "Cookies!", card_text: "We are using cookies for no reason." },
24
    { card_title: "Cookies!", card_text: "We are using cookies for no reason." },
25
  ],
26
}: HeroProps) {
27
  return (
28
    <div>
29
      <div className="w-full h-auto mx-auto bg-base-200 text-base-content rounded-box my-8">
30
        <div className="hero-content gap-10 flex-col lg:flex-row items-center">
31
          {/* Left: Text */}
32
          <div className="flex-1 max-w-3xl">
33
            <p className="sm:text-3xl md:text-4xl lg:text-5xl font-semibold tracking-tight bg-linear-to-r from-primary/80 to-secondary/80 bg-clip-text text-transparent">
34
              {title}
35
            </p>
36
            <p className="mt-4 sm:text-xl md:text-2xl lg:text-3xl font-extrabold leading-[1.05]">
37
              {subtitle}
38
            </p>
39
            <p className="mt-6 text-base opacity-70">{tagline}</p>
40
            <div className="mt-6 flex gap-4">
41
              <button
42
                type="button"
43
                className="btn btn-accent text-accent-content px-6 py-2 rounded-lg"
44
              >
45
                {button_accent_text}
46
              </button>
47
              <button
48
                type="button"
49
                className="btn btn-secondary text-secondary-content px-6 py-2 rounded-lg"
50
              >
51
                {button_secondary_text}
52
              </button>
53
            </div>
54
          </div>
55

56
          {/* Right: Image */}
57
          <div className="w-full h-auto xs:w-3xs sm:w-2xs md:w-xs rounded-lg overflow-hidden bg-base-300 mx-auto lg:mx-0">
58
            <img
59
              src={`${logo_url}`}
60
              alt="Logo"
61
              className="w-full h-auto object-contain p-6" // No shadow here, just rounded corners
62
            />
63
          </div>
64
        </div>
65
      </div>
66
            {/* Cards Section */}
67
      <div className="flex justify-center gap-4">
68
        {cards.map((card, index) => (
69
          <div key={index} className="card bg-neutral text-neutral-content w-96">
70
            <div className="card-body items-center text-center">
71
              <h2 className="card-title">{card.card_title}</h2>
72
              <p>{card.card_text}</p>
73
            </div>
74
          </div>
75
        ))}
76
      </div>
77

78
    </div>
79
  );
80
}

效果如图

再增加一个 pub 组件，效果如下：

效果喜人啊～

接下来我要实现主题切换和 Recent Publication 从 api 接口读取（从而方便加个后端来修改）。这就要用到 island，就之后再写了。

导言#

从零创建一个 Fresh 应用#

Navbar 的设计和应用#