1844 字
9 分钟
Fuwari改造计划之文章置顶
2026-02-06
Fuwari
Fuwari
/
教程
前言

本篇文章参考大佬的Pr： feat: add post pinning feature and fix icon dependencies by Lapis0x0 · Pull Request #317 · saicaca/fuwari

成果演示#

如图：

修改过程#

src/components/PostCard.astro
45 collapsed lines
---
import type { CollectionEntry } from "astro:content";
import path from "node:path";
import { Icon } from "astro-icon/components";
import I18nKey from "../i18n/i18nKey";
import { i18n } from "../i18n/translation";
import { getDir } from "../utils/url-utils";
import ImageWrapper from "./misc/ImageWrapper.astro";
import PostMetadata from "./PostMeta.astro";


interface Props {
  class?: string;
  entry: CollectionEntry<"posts">;
  title: string;
  url: string;
  published: Date;
  updated?: Date;
  tags: string[];
  category: string | null;
  image: string;
  description: string;
  draft: boolean;
  style: string;
    pinned?: boolean;
}
const {
  entry,
  title,
  url,
  published,
  updated,
  tags,
  category,
  image,
  description,
  style,
    pinned
} = Astro.props;
const className = Astro.props.class;


const hasCover = image !== undefined && image !== null && image !== "";


const coverWidth = "28%";


const { remarkPluginFrontmatter } = await entry.render();
---
<div class:list={["card-base flex flex-col-reverse md:flex-col w-full rounded-[var(--radius-large)] overflow-hidden relative", className]} style={style}>
    <div class:list={["pl-6 md:pl-9 pr-6 md:pr-2 pt-6 md:pt-7 pb-6 relative", {"w-full md:w-[calc(100%_-_52px_-_12px)]": !hasCover, "w-full md:w-[calc(100%_-_var(--coverWidth)_-_12px)]": hasCover}]}>
        <div class="flex items-center mb-3">
            {pinned && <div class="meta-icon mr-3 bg-[var(--primary)] text-white shadow-sm transition-transform group-hover:scale-105">
                    <Icon name="mdi:pin" class="text-xl" />
                </div>}
        <a href={url}
           class="transition group w-full block font-bold mb-3 text-3xl text-90
           class="transition group w-full block font-bold text-3xl text-90
        hover:text-[var(--primary)] dark:hover:text-[var(--primary)]
        active:text-[var(--title-active)] dark:active:text-[var(--title-active)]
        before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
        before:absolute before:top-[35px] before:left-[18px] before:hidden md:before:block
        ">
        mb-0">
            {title}
            <Icon class="inline text-[2rem] text-[var(--primary)] md:hidden translate-y-0.5 absolute" name="material-symbols:chevron-right-rounded" ></Icon>
            <Icon class="text-[var(--primary)] text-[2rem] transition hidden md:inline absolute translate-y-0.5 opacity-0 group-hover:opacity-100 -translate-x-1 group-hover:translate-x-0" name="material-symbols:chevron-right-rounded"></Icon>
        </a>
        </div>


51 collapsed lines
        <!-- metadata -->
        <PostMetadata published={published} updated={updated} tags={tags} category={category} hideTagsForMobile={true} hideUpdateDate={true} class="mb-4"></PostMetadata>


        <!-- description -->
        <div class:list={["transition text-75 mb-3.5 pr-4", {"line-clamp-2 md:line-clamp-1": !description}]}>
            { description || remarkPluginFrontmatter.excerpt }
        </div>


        <!-- word count and read time  -->
        <div class="text-sm text-black/30 dark:text-white/30 flex gap-4 transition">
            <div>
                {remarkPluginFrontmatter.words} {" " + i18n(remarkPluginFrontmatter.words === 1 ? I18nKey.wordCount : I18nKey.wordsCount)}
            </div>
            <div>|</div>
            <div>
                {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
            </div>
        </div>


    </div>


    {hasCover && <a href={url} aria-label={title}
                    class:list={["group",
                        "max-h-[20vh] md:max-h-none mx-4 mt-4 -mb-2 md:mb-0 md:mx-0 md:mt-0",
                        "md:w-[var(--coverWidth)] relative md:absolute md:top-3 md:bottom-3 md:right-3 rounded-xl overflow-hidden active:scale-95"
                    ]} >
        <div class="absolute pointer-events-none z-10 w-full h-full group-hover:bg-black/30 group-active:bg-black/50 transition"></div>
        <div class="absolute pointer-events-none z-20 w-full h-full flex items-center justify-center ">
            <Icon name="material-symbols:chevron-right-rounded"
                  class="transition opacity-0 group-hover:opacity-100 scale-50 group-hover:scale-100 text-white text-5xl">
            </Icon>
        </div>
        <ImageWrapper src={image} basePath={path.join("content/posts/", getDir(entry.id))} alt="Cover Image of the Post"
                  class="w-full h-full">
        </ImageWrapper>
    </a>}


    {!hasCover &&
        <a href={url} aria-label={title} class="!hidden md:!flex btn-regular w-[3.25rem]
         absolute right-3 top-3 bottom-3 rounded-xl bg-[var(--enter-btn-bg)]
         hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95
        ">
            <Icon name="material-symbols:chevron-right-rounded"
                  class="transition text-[var(--primary)] text-4xl mx-auto">
            </Icon>
        </a>
    }
</div>
<div class="transition border-t-[1px] border-dashed mx-6 border-black/10 dark:border-white/[0.15] last:border-t-0 md:hidden"></div>


<style define:vars={{coverWidth}}>
</style>
src/components/PostPage.astro
20 collapsed lines
---
import type { CollectionEntry } from "astro:content";
import { getPostUrlBySlug } from "@utils/url-utils";
import PostCard from "./PostCard.astro";


const { page } = Astro.props;


let delay = 0;
const interval = 50;
---
<div class="transition flex flex-col rounded-[var(--radius-large)] bg-[var(--card-bg)] py-1 md:py-0 md:bg-transparent md:gap-4 mb-4">
    {page.data.map((entry: CollectionEntry<"posts">) => (
        <PostCard
                entry={entry}
                title={entry.data.title}
                tags={entry.data.tags}
                category={entry.data.category}
                published={entry.data.published}
                updated={entry.data.updated}
                url={getPostUrlBySlug(entry.slug)}
                image={entry.data.image}
                description={entry.data.description}
                draft={entry.data.draft}
                pinned={entry.data.pinned}
                class:list="onload-animation"
                style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`}
        ></PostCard>
2 collapsed lines
    ))}
</div>
src/types/config.ts
91 collapsed lines
import type { AUTO_MODE, DARK_MODE, LIGHT_MODE } from "@constants/constants";


export type SiteConfig = {
  title: string;
  subtitle: string;


  lang:
    | "en"
    | "zh_CN"
    | "zh_TW"
    | "ja"
    | "ko"
    | "es"
    | "th"
    | "vi"
    | "tr"
    | "id";


  themeColor: {
    hue: number;
    fixed: boolean;
  };
  banner: {
    enable: boolean;
    src: string;
    position?: "top" | "center" | "bottom";
    credit: {
      enable: boolean;
      text: string;
      url?: string;
    };
  };
  toc: {
    enable: boolean;
    depth: 1 | 2 | 3;
  };


  favicon: Favicon[];
};


export type Favicon = {
  src: string;
  theme?: "light" | "dark";
  sizes?: string;
};


export enum LinkPreset {
  Home = 0,
  Archive = 1,
  About = 2,
  Friends = 3,
}


export type NavBarLink = {
  name: string;
  url: string;
  external?: boolean;
};


export type NavBarConfig = {
  links: (NavBarLink | LinkPreset)[];
};


export type ProfileConfig = {
  avatar?: string;
  name: string;
  bio?: string;
  links: {
    name: string;
    url: string;
    icon: string;
  }[];
};


export type LicenseConfig = {
  enable: boolean;
  name: string;
  url: string;
};


export type LIGHT_DARK_MODE =
  | typeof LIGHT_MODE
  | typeof DARK_MODE
  | typeof AUTO_MODE;


export type BlogPostData = {
  body: string;
  title: string;
  published: Date;
  description: string;
  tags: string[];
  draft?: boolean;
  image?: string;
  category?: string;
  series?: string;
  pinned?: boolean;
  prevTitle?: string;
  prevSlug?: string;
  nextTitle?: string;
6 collapsed lines
  nextSlug?: string;
};


export type ExpressiveCodeConfig = {
  theme: string;
};
src/utils/content-utils.ts
9 collapsed lines
import { type CollectionEntry, getCollection } from "astro:content";
import I18nKey from "@i18n/i18nKey";
import { i18n } from "@i18n/translation";
import { getCategoryUrl } from "@utils/url-utils.ts";


// // Retrieve posts and sort them by publication date
async function getRawSortedPosts() {
  const allBlogPosts = await getCollection("posts", ({ data }) => {
    return import.meta.env.PROD ? data.draft !== true : true;
  });


  const sorted = allBlogPosts.sort((a, b) => {
    // 首先按置顶状态排序
      if (a.data.pinned && !b.data.pinned) return -1;
      if (!a.data.pinned && b.data.pinned) return 1;
      // 然后按发布时间排序
    const dateA = new Date(a.data.published);
    const dateB = new Date(b.data.published);
    return dateA > dateB ? -1 : 1;
118 collapsed lines
  });
  return sorted;
}


export async function getSortedPosts() {
  const sorted = await getRawSortedPosts();


  for (let i = 1; i < sorted.length; i++) {
    sorted[i].data.nextSlug = sorted[i - 1].slug;
    sorted[i].data.nextTitle = sorted[i - 1].data.title;
  }
  for (let i = 0; i < sorted.length - 1; i++) {
    sorted[i].data.prevSlug = sorted[i + 1].slug;
    sorted[i].data.prevTitle = sorted[i + 1].data.title;
  }


  return sorted;
}
export type PostForList = {
  slug: string;
  data: CollectionEntry<"posts">["data"];
};
export async function getSortedPostsList(): Promise<PostForList[]> {
  const sortedFullPosts = await getRawSortedPosts();


  // delete post.body
  const sortedPostsList = sortedFullPosts.map((post) => ({
    slug: post.slug,
    data: post.data,
  }));


  return sortedPostsList;
}
export type Tag = {
  name: string;
  count: number;
};


export async function getTagList(): Promise<Tag[]> {
  const allBlogPosts = await getCollection<"posts">("posts", ({ data }) => {
    return import.meta.env.PROD ? data.draft !== true : true;
  });


  const countMap: { [key: string]: number } = {};
  allBlogPosts.forEach((post: { data: { tags: string[] } }) => {
    post.data.tags.forEach((tag: string) => {
      if (!countMap[tag]) countMap[tag] = 0;
      countMap[tag]++;
    });
  });


  // sort tags
  const keys: string[] = Object.keys(countMap).sort((a, b) => {
    return a.toLowerCase().localeCompare(b.toLowerCase());
  });


  return keys.map((key) => ({ name: key, count: countMap[key] }));
}


export type Category = {
  name: string;
  count: number;
  url: string;
};


export async function getCategoryList(): Promise<Category[]> {
  const allBlogPosts = await getCollection<"posts">("posts", ({ data }) => {
    return import.meta.env.PROD ? data.draft !== true : true;
  });
  const count: { [key: string]: number } = {};
  allBlogPosts.forEach((post: { data: { category: string | null } }) => {
    if (!post.data.category) {
      const ucKey = i18n(I18nKey.uncategorized);
      count[ucKey] = count[ucKey] ? count[ucKey] + 1 : 1;
      return;
    }


    const categoryName =
      typeof post.data.category === "string"
        ? post.data.category.trim()
        : String(post.data.category).trim();


    count[categoryName] = count[categoryName] ? count[categoryName] + 1 : 1;
  });


  const lst = Object.keys(count).sort((a, b) => {
    return a.toLowerCase().localeCompare(b.toLowerCase());
  });


  const ret: Category[] = [];
  for (const c of lst) {
    ret.push({
      name: c,
      count: count[c],
      url: getCategoryUrl(c),
    });
  }
  return ret;
}


export async function getPostSeries(
  seriesName: string,
): Promise<{ body: string; data: BlogPostData; slug: string }[]> {
  const posts = (await getCollection('posts', ({ data }) => {
    return (
      (import.meta.env.PROD ? data.draft !== true : true) &&
      data.series === seriesName
    )
  })) as unknown as { body: string; data: BlogPostData; slug: string }[]


  posts.sort((a, b) => {
    const dateA = new Date(a.data.published)
    const dateB = new Date(b.data.published)
    return dateA > dateB ? 1 : -1
  })


  return posts
}

随后安装图标包：

Terminal window
pnpm add @iconify-json/mdi

如何使用#

在你的文章中添加一个属性：

src/content/posts/markdown.md
4 collapsed lines
---
title: Markdown Example
published: 2023-10-01
description: A simple example of a Markdown blog post.
tags: [Markdown, Blogging, Demo]
category: Examples
draft: false
pinned: true
---


# An h1 header
165 collapsed lines


Paragraphs are separated by a blank line.


2nd paragraph. _Italic_, **bold**, and `monospace`. Itemized lists
look like:


 - this one
 - that one
 - the other one


Note that --- not considering the asterisk --- the actual text
content starts at 4-columns in.


> Block quotes are
> written like so.
>
> They can span multiple paragraphs,
> if you like.


Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
in chapters 12--14"). Three dots ... will be converted to an ellipsis.
Unicode is supported. ☺


## An h2 header


Here's a numbered list:


1. first item
2. second item
3. third item


Note again how the actual text starts at 4 columns in (4 characters
from the left side). Here's a code sample:


    # Let me re-iterate ...
    for i in 1 .. 10 { do-something(i) }


As you probably guessed, indented 4 spaces. By the way, instead of
indenting the block, you can use delimited blocks, if you like:


```
define foobar() {
    print "Welcome to flavor country!";
}
```


(which makes copying & pasting easier). You can optionally mark the
delimited block for Pandoc to syntax highlight it:


```python
import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print i
```


### An h3 header


Now a nested list:


1. First, get these ingredients:


    - carrots
    - celery
    - lentils


2. Boil some water.


3. Dump everything in the pot and follow
    this algorithm:


        find wooden spoon
        uncover pot
        stir
        cover pot
        balance wooden spoon precariously on pot handle
        wait 10 minutes
        goto first step (or shut off burner when done)


    Do not bump wooden spoon or it will fall.


Notice again how text always lines up on 4-space indents (including
that last line which continues item 3 above).


Here's a link to [a website](http://foo.bar), to a [local
doc](local-doc.html), and to a [section heading in the current
doc](#an-h2-header). Here's a footnote [^1].


[^1]: Footnote text goes here.


Tables can look like this:


size material color


---


9 leather brown
10 hemp canvas natural
11 glass transparent


Table: Shoes, their sizes, and what they're made of


(The above is the caption for the table.) Pandoc also supports
multi-line tables:


---


keyword text


---


red Sunsets, apples, and
other red or reddish
things.


green Leaves, grass, frogs
and other things it's
not easy being.


---


A horizontal rule follows.


---


Here's a definition list:


apples
: Good for making applesauce.
oranges
: Citrus!
tomatoes
: There's no "e" in tomatoe.


Again, text is indented 4 spaces. (Put a blank line between each
term/definition pair to spread things out more.)


Here's a "line block":


| Line one
| Line too
| Line tree


and images can be specified like so:


[//]: # (![example image]&#40;./demo-banner.png "An exemplary image"&#41;)


Inline math equations go in like so: $\omega = d\phi / dt$. Display
math should get its own line and be put in in double-dollarsigns:


$$I = \int \rho R^{2} dV$$


$$
\begin{equation*}
\pi
=3.1415926535
 \;8979323846\;2643383279\;5028841971\;6939937510\;5820974944
 \;5923078164\;0628620899\;8628034825\;3421170679\;\ldots
\end{equation*}
$$


And note that you can backslash-escape any punctuation characters
which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.
Fuwari改造计划之文章置顶
https://testblog.jijiz.cn/posts/fuwari改造计划/2026-02-06-fuwari改造计划之文章置顶/
作者
SakuraVillager
发布于
2026-02-06
许可协议
CC BY-NC-SA 4.0

支持与分享

如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！

赞助
Expressive Code语法
记录一次 ROS 2 部署
© 2026 SakuraVillager. All Rights Reserved. / RSS / Sitemap
Powered by Astro & Fuwari
浙ICP备2025195878号
萌ICP备20260716号