Atticus的个人博客

我的第一篇博客文章

Atticus的个人博客 — Fri, 24 Apr 2026 00:00:00 GMT

欢迎来到我的博客

这是正文部分，使用标准的 Markdown 语法书写。

我想说的话

今天终于把博客搭好了！接下来我打算在这里记录：

编程学习笔记
日常折腾记录
好玩的开源项目分享

如何添加代码块

如果你想分享代码，可以这样写：

console.log("Hello, Frosti!");

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://frosti.saroprock.com/blog/my-first-post/

Testing Mathematical Formulas in Markdown

Atticus的个人博客 — 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://frosti.saroprock.com/blog/mathematics-examples/

Adding Comment Systems to Frosti

Atticus的个人博客 — 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://frosti.saroprock.com/blog/adding-comment-systems/

Using mdx in Frosti

Atticus的个人博客 — 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://frosti.saroprock.com/blog/frosti-mdx/

Markdown Style Guide

Atticus的个人博客 — 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://frosti.saroprock.com/blog/markdown-style-guide/

Using MDX

Atticus的个人博客 — 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.

Atticus的个人博客

我的第一篇博客文章

欢迎来到我的博客

我想说的话

如何添加代码块

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