🍷 Ai Lounge

Hello, Ai Lounge！这个小酒馆开张了

Ai Lounge — Sat, 04 Jul 2026 00:00:00 GMT

开张了

你有没有过这种体验——

想学个AI工具，搜出来的教程要么太学术看不懂，要么太浅没啥用，要么全是广告。

我就是被这种体验烦到了，所以决定自己开一个"小酒馆"。

这里写什么

简单说就是我折腾什么就写什么：

🤖 AI工具教程 ChatGPT怎么用、Claude和GPT怎么选、AI写作怎么搞——实操向，不吹不黑。

🎨 ComfyUI 从安装到工作流搭建，AI生图生视频全套。我自己的AI生图站就是用ComfyUI搭的，踩过的坑都记下来。

🖥️ VPS / 服务器 买VPS、装系统、配环境、搭网站——小白也能跟着做。2C2G的小机器能干啥？比你想象的多。

🔒 VPN / 网络 科学上网方案对比、搭建教程。身在加拿大，帮国内朋友翻墙这事儿干了不少。

🍁 北美生活 技术人的加拿大生存日记。不是旅游博主，就是日常碎碎念。

为什么叫"小酒馆"

很多伟大的想法诞生在酒馆里。

萨特的存在主义是在巴黎酒吧聊出来的。DNA双螺旋结构是在剑桥老鹰酒吧宣布的。

AI小酒馆也是这个意思——不端着、不装学术、不搞术语墙。技术就应该像喝酒聊天一样轻松。

你看，如果你愿意，你甚至可以从这杯鸡尾酒中研究出AI来。

关于我

坐标加拿大，白天写代码，晚上折腾AI。

手里有个2C2G的VPS，上面跑着API中转站、AI生图站、图床、VPN——全是自建的，全是从零折腾出来的。

这些项目的搭建教程后面会一篇篇写出来。

接下来的计划

ComfyUI零基础安装教程（Windows/Mac/Linux全平台）
VPS选购指南2026——2C2G能干啥
自建API中转站完整教程
WireGuard VPN搭建——3分钟搞定
Cloudflare Pages博客搭建（就是这个小酒馆本身）

每篇教程的目标：你看完就能动手做，不做概念科普大师。

酒已倒好，座位已备。

欢迎来 AI 小酒馆。🍷

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog-7gd.pages.dev/blog/hello-ai-lounge/

Testing Mathematical Formulas in Markdown

Ai Lounge — Sat, 31 May 2025 00:00:00 GMT

This document serves as a test for rendering mathematical formulas in Markdown using $$ delimiters.

Basic Algebra

Let's start with some fundamental algebraic expressions.

The quadratic formula is given by: $$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$

A simple linear equation: $$y = mx + c$$

Expansion of a binomial square: $$(a+b)^2 = a^2 + 2ab + b^2$$

Calculus

Here are some common expressions from calculus.

The limit definition of a derivative: $$f'(x) = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}$$

A definite integral: $$\int_{a}^{b} f(x) dx$$

The Taylor series expansion of $e^x$ around $x=0$: $$e^x = \sum_{n=0}^{\infty} \frac{x^n}{n!} = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \cdots$$

Trigonometry

Some basic trigonometric identities.

Pythagorean identity: $$\sin^2\theta + \cos^2\theta = 1$$

Angle addition formula for sine: $$\sin(\alpha + \beta) = \sin\alpha\cos\beta + \cos\alpha\sin\beta$$

Euler's formula: $$e^{i\theta} = \cos\theta + i\sin\theta$$

Statistics and Probability

Formulas commonly used in statistics and probability.

The formula for the mean ($\mu$) of a set of $n$ numbers $x_1, x_2, \ldots, x_n$: $$\mu = \frac{1}{n} \sum_{i=1}^{n} x_i$$

The probability density function of a normal distribution: $$f(x | \mu, \sigma^2) = \frac{1}{\sqrt{2\pi\sigma^2}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}$$

Bayes' theorem: $$P(A|B) = \frac{P(B|A)P(A)}{P(B)}$$

Linear Algebra

Examples from linear algebra.

A 2x2 matrix: $$A = \begin{pmatrix} a & b \ c & d \end{pmatrix}$$

The determinant of a 2x2 matrix: $$\det(A) = ad - bc$$

Matrix multiplication of two matrices A and B: $$C = AB$$

Physics

A couple of well-known physics equations.

Einstein's mass-energy equivalence: $$E = mc^2$$

Newton's second law of motion: $$F = ma$$

This should provide a good test of how various mathematical formulas are rendered.

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog-7gd.pages.dev/blog/mathematics-examples/

Adding Comment Systems to Frosti

Ai Lounge — Tue, 15 Apr 2025 00:00:00 GMT

Introduction

One of the essential features of any blog is the ability for readers to engage with your content through comments. While Frosti provides an excellent foundation for your Astro-based blog, adding a comment system requires a few additional steps. This guide will walk you through integrating the Waline comment system into your Frosti blog.

Static sites like those built with Astro don't have built-in comment systems since they lack server-side processing. However, we can use third-party comment services that handle the backend for us, while we integrate their frontend components into our site.

Creating Comment Components in Astro

Before diving into a specific comment system, let's understand how to create and use components in Astro. We'll create a reusable component that can be easily added to any page.

Component Structure

We'll create our comment component in the src/components/comments directory. First, let's ensure this directory exists:

mkdir -p src/components/comments

Integrating Waline

Waline is a simple, safe, and feature-rich comment system with backend and frontend separation. It is highly customizable and easy to set up.

Step 1: Set Up Waline Backend

Before adding Waline to your site, you need to set up the backend:

Create a LeanCloud application to store your comments.
Deploy the Waline server to Vercel or another hosting platform.

Follow the official Waline guide to set up your backend service. After deploying, you'll get a server URL that you will need for the frontend component.

Step 2: Create the Waline Component

Let's create a reusable Waline component:

touch src/components/comments/Waline.astro

Add the following code to this component:

---
interface Props {
  serverURL: string;
  lang?: string;
  dark?: string;
  emoji?: string[];
  meta?: string[];
  requiredMeta?: string[];
  reaction?: boolean;
  pageview?: boolean;
}

const {
  serverURL,
  lang = "en",
  dark = "html[data-theme-type='dark']",
  emoji = ["https://unpkg.com/@waline/emojis@1.1.0/weibo", "https://unpkg.com/@waline/emojis@1.1.0/bilibili"],
  meta = ["nick", "mail", "link"],
  requiredMeta = [],
  reaction = false,
  pageview = false,
} = Astro.props;
---

<div id="waline-container"></div>

<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.css" />

<script
  type="module"
  define:vars={{
    serverURL,
    lang,
    dark,
    emoji,
    meta,
    requiredMeta,
    reaction,
    pageview,
  }}
>
  import { init } from "https://unpkg.com/@waline/client@v3/dist/waline.js";

  async function initWaline() {
    const container = document.querySelector("#waline-container");
    if (!container) return;

    init({
      el: "#waline-container",
      serverURL,
      path: location.pathname,
      lang,
      dark,
      emoji,
      meta,
      requiredMeta,
      reaction,
      pageview,
    });
  }

  document.addEventListener("astro:page-load", () => {
    initWaline();
  });

  if (document.readyState !== "loading") {
    initWaline();
  } else {
    document.addEventListener("DOMContentLoaded", initWaline);
  }
</script>

<style>
  #waline-container {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
</style>

Step 3: Using the Waline Component

You can now use the Waline component in your Astro pages or layouts. Here's how to add it to your blog post template:

---
// In your blog post layout file
import Waline from "../../components/comments/Waline.astro";
// Other imports and frontmatter...
---

<!-- Your blog post content -->
<article>
  <slot />
</article>

<!-- Add the comment section -->
<section class="comments">
  <h2>Comments</h2>
  <Waline serverURL="https://your-waline-server.vercel.app" />
</section>

Replace "https://your-waline-server.vercel.app" with your actual Waline server URL.

Troubleshooting

Common Issues

Comments not displaying: Make sure your serverURL is correctly set and accessible.
CSS issues: Ensure that the Waline stylesheet is properly loaded.
Deployment issues: If your server is on Vercel, check the environment variables and deployment logs.

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog-7gd.pages.dev/blog/adding-comment-systems/

Using mdx in Frosti

Ai Lounge — Fri, 12 Jul 2024 00:00:00 GMT

import Collapse from "../../components/mdx/Collapse.astro"; import Diff from "../../components/mdx/Diff.astro"; import Error from "../../components/mdx/Error.astro"; import Info from "../../components/mdx/Info.astro"; import Kbd from "../../components/mdx/Kbd.astro"; import Success from "../../components/mdx/Success.astro"; import Warning from "../../components/mdx/Warning.astro"; import TimeLine from "../../components/mdx/TimeLine.astro"; import LinkCard from "../../components/mdx/LinkCard.astro";

Preface

This article describes how to use the components provided by Frosti in mdx to realize the functions that can't be realized by normal md.

Main text

Getting started

First you need to create an mdx file, which is as simple as changing the extension to .mdx.

Introducing

The components provided by Frosti are placed in the /mdx folders. Write something under the document properties (frontmatter):

import Collapse from "../../components/mdx/Collapse.astro";
import Diff from "../../components/mdx/Diff.astro";
import Error from "../../components/mdx/Error.astro";
import Info from "../../components/mdx/Info.astro";
import Kbd from "../../components/mdx/Kbd.astro";
import Success from "../../components/mdx/Success.astro";
import Warning from "../../components/mdx/Warning.astro";
import TimeLine from "../../components/mdx/TimeLine.astro";
import LinkCard from "../../components/mdx/LinkCard.astro";

Example

Collapse

This is the hidden content!

<Collapse title="This is an example text.">
  This is the hidden content!
</Collapse>

Diff

<Diff l="/image/l.png" r="/image/r.png" />

Error

Maybe something went wrong?

<Error>Maybe something went wrong? </Error>

Warning

Hey! Watch out for potholes!

<Warning>Hey! Watch out for potholes! </Warning>

Message

It's just a message.

<Info>It's just a message. </Info>

Success

Congratulations on your successful deployment!

<Success>Congratulations on your successful deployment! </Success>

Kbd

Ctrl + C to copy the text.

<Kbd>Ctrl</Kbd> + <Kbd>C</Kbd> to copy the text.

TimeLine

<TimeLine
  items={[
    { year: "1984", event: "First Macintosh computer" },
    { year: "1998", event: "iMac" },
    { year: "2001", event: "iPod" },
    { year: "2007", event: "iPhone" },
    { year: "2015", event: "Apple Watch" },
  ]}
/>

LinkCard

<LinkCard
  title="Frosti"
  desc="My blog project!"
  url="https://github.com/EveSunMaple/Frosti"
  img="/logo.png"
/>

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog-7gd.pages.dev/blog/frosti-mdx/

Markdown Style Guide

Ai Lounge — Mon, 01 Jul 2024 00:00:00 GMT

Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.

Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H1

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

Images

Syntax

![Alt text](./full/or/relative/path/of/image)

Output

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Syntax

> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use _Markdown syntax_ within a blockquote.

Output

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Syntax

> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>

Output

Don't communicate by sharing memory, share memory by communicating.
— Rob Pike[^1]

[^1]: The above quote is excerpted from Rob Pike's talk during Gopherfest, November 18, 2015.

Tables

Syntax

| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

Output

Italics	Bold	Code
italics	bold	`code`

Code Blocks

Syntax

we can use 3 backticks ``` in new line and write snippet and close with 3 backticks on new line and to highlight language specific syntac, write one word of language name after first 3 backticks, for eg. html, javascript, css, markdown, typescript, txt, bash

```cpp
#include <bits/stdc++.h>
using namespace std;
const int N = 1e5 + 5;
int n, k, a[N];
long long ans;
vector<int> v[N];
int main()
{
    scanf("%d%d", &n, &k);
    for (int i = 1; i <= n; i++)
    {
        scanf("%d", &a[i]);
        v[i % k].push_back(a[i]);
    }
    for (int i = 0; i < k; i++)
        sort(v[i].rbegin(), v[i].rend());
    for (int i = 0; i < k; i++)
    {
        for (int j = 0; j + 1 < v[i].size(); j += 2)
        {
            ans += v[i][j] + v[i][j + 1];
        }
    }
    printf("%lld\n", ans);
    return 0;
}
```

Output

#include <bits/stdc++.h>
using namespace std;
const int N = 1e5 + 5;
int n, k, a[N];
long long ans;
vector<int> v[N];
int main()
{
    scanf("%d%d", &n, &k);
    for (int i = 1; i <= n; i++)
    {
        scanf("%d", &a[i]);
        v[i % k].push_back(a[i]);
    }
    for (int i = 0; i < k; i++)
        sort(v[i].rbegin(), v[i].rend());
    for (int i = 0; i < k; i++)
    {
        for (int j = 0; j + 1 < v[i].size(); j += 2)
        {
            ans += v[i][j] + v[i][j + 1];
        }
    }
    printf("%lld\n", ans);
    return 0;
}

List Types

Ordered List

Syntax

1. First item
2. Second item
3. Third item

Output

First item
Second item
Third item

Unordered List

Syntax

- List item
- Another item
- And another item

Output

List item
Another item
And another item

Nested list

Syntax

- Fruit
  - Apple
  - Orange
  - Banana
- Dairy
  - Milk
  - Cheese

Output

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese

Other Elements

Syntax

<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.

H<sub>2</sub>O

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

Press <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> to end the session.

Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

Output

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://blog-7gd.pages.dev/blog/markdown-style-guide/

Using MDX

Ai Lounge — Sat, 02 Jul 2022 00:00:00 GMT

This theme comes with the @astrojs/mdx integration installed and configured in your astro.config.mjs config file. If you prefer not to use MDX, you can disable support by removing the integration from your config file.

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into your Markdown content for things like interactive charts or alerts.

If you have existing content authored in MDX, this integration will hopefully make migrating to Astro a breeze.

Example

Here is how you import and use a UI component inside of MDX.
When you open this page in the browser, you should see the clickable button below.

🍷 Ai Lounge

Hello, Ai Lounge！这个小酒馆开张了

开张了

这里写什么

为什么叫"小酒馆"

关于我

接下来的计划

Testing Mathematical Formulas in Markdown

Basic Algebra

Calculus

Trigonometry

Statistics and Probability

Linear Algebra

Physics

Adding Comment Systems to Frosti

Introduction

Creating Comment Components in Astro

Component Structure

Integrating Waline

Step 1: Set Up Waline Backend

Step 2: Create the Waline Component

Step 3: Using the Waline Component

Troubleshooting

Common Issues

Using mdx in Frosti

Preface

Main text

Getting started

Introducing

Example

Collapse

Diff

Error

Warning

Message

Success

Kbd

TimeLine

LinkCard

Markdown Style Guide

Headings

H1

H2

H3

H4

H5

H6

Paragraph

Images

Syntax

Output

Blockquotes

Blockquote without attribution

Syntax

Output

Blockquote with attribution

Syntax

Output

Tables

Syntax

Output

Code Blocks

Syntax

List Types

Ordered List

Syntax

Output

Unordered List

Syntax

Output

Nested list

Syntax

Output

Other Elements

Syntax

Output

Using MDX

Why MDX?

Example

More Links