Mo_Han136

F1 BanGDream 企划

Mo_Han136 — Mon, 27 Apr 2026 00:00:00 GMT

F1 BanGDream 企划

有关推进 F1 BanGDream 企划的一些想法（持续更新中……）

其实这是一个以年为跨度不断思考改进的想法

也许正好借这个机会梳理一下有关入坑F1和BanGDream的总体经历

时间线

2021冬天：周冠宇官宣加入阿尔法罗密欧车队

虽然之前就有听说过F1，包括rr3也是接触过F1赛车（某一天突然发现这单座赛车前面怎么放了个人字拖好难受），但真正入坑大概还是2022赛季。

2022

This rendering was automatically generated by the site feed and may have formatting issues. For the best experience, please visit: https://example.com/blog/20260427f1bangdream/

博客第一篇文章测试

Mo_Han136 — Sun, 26 Apr 2026 00:00:00 GMT

博客第一篇文章测试

一、文字

主播主播，什么是 undercut 什么是 overcut ？

所谓 undercut 和 overcut 都是使用进站完成超车的策略。所谓 undercut 指的是比对手早进站，让自己的排名先 under ，然后用新胎做出很快的圈速，在对手完成换胎出站之后，排在对手的前面完成超车。

所谓 overcut 指的是在对手进站之后，仍然留在赛道上，让自己的排名先 over ，然后用旧胎做出比对手更快的圈速，在自己进站之后出站排在对手的前面完成超车。

二、图片

Syntax

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

Output

三、引用

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.  — <cite>Rob Pike[^1] </cite>

四、表格

Syntax

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

Output

Italics	Bold	Code
italics	bold	`code`

五、代码块

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;
}

六、列表类型

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

七、其他元素

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

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

H  2 O

X  n  + Y  n  = Z  n 

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

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

This rendering was automatically generated by the site feed and may have formatting issues. For the best experience, please visit: https://example.com/blog/20260426testing/

Testing Mathematical Formulas in Markdown

Mo_Han136 — 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 the site feed and may have formatting issues. For the best experience, please visit: https://example.com/blog/examplemathematics-examples/

Adding Comment Systems to Frosti

Mo_Han136 — 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 the site feed and may have formatting issues. For the best experience, please visit: https://example.com/blog/exampleadding-comment-systems/

Using mdx in Frosti

Mo_Han136 — 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/GoudoMahan/Frosti"
  img="/logo.png"
/>

This rendering was automatically generated by the site feed and may have formatting issues. For the best experience, please visit: https://example.com/blog/examplefrosti-mdx/

Markdown Style Guide

Mo_Han136 — 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

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.  — <cite>Rob Pike[^1]</cite>

Tables

Syntax

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

Output

Italics	Bold	Code
italics	bold	`code`

Code Blocks

Syntax

```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

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

H2O

Xn + Yn = Zn

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

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

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

This rendering was automatically generated by the site feed and may have formatting issues. For the best experience, please visit: https://example.com/blog/examplemarkdown-style-guide/

Using MDX

Mo_Han136 — 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.