Fuwari 博客主题深度定制记录#

1
navbar: [
2
    LinkPreset.Home,
3
    LinkPreset.Archive,
4
    { name: '友人帐', url: '/friends/' },
5
    LinkPreset.About,
6
]

1
---
2
import MainGridLayout from "../layouts/MainGridLayout.astro";
3
import FriendCard from "@components/FriendCard.astro";
4

5
const friends = [
6
    {
7
        name: "fuwari",
8
        description: "博客主题",
9
        url: "https://github.com/saicaca/fuwari",
10
        avatar: "assets/images/demo-avatar.png",
11
        tag: "博客"
12
    },
13
    // ... 更多友链
14
]
15
const tags = ["全部", ...new Set(friends.map(f => f.tag).filter(Boolean))];
16
---
17
<MainGridLayout title="友人帐" description="友情链接">
18
    <!-- 标签筛选按钮 -->
19
    <div class="flex flex-wrap gap-2 px-2">
20
        {tags.map(tag => (
21
            <button class="filter-btn ..." data-tag={tag}>{tag}</button>
22
        ))}
23
    </div>
24
    <!-- 友链卡片网格 -->
25
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="friend-grid">
26
        {friends.map(friend => (
27
            <div class="friend-card-wrapper" data-tag={friend.tag}>
28
                <FriendCard {...friend} />
29
            </div>
30
        ))}
31
    </div>
32
</MainGridLayout>

1
// === Friends page tag filtering ===
2
function setupFilters() {
3
    const buttons = document.querySelectorAll('.filter-btn');
4
    const cards = document.querySelectorAll('.friend-card-wrapper');
5
    if (!buttons.length) return;
6

7
    function filter(selectedTag) {
8
        buttons.forEach(b => {
9
            b.classList.toggle('active-filter',
10
                b.getAttribute('data-tag') === selectedTag);
11
        });
12
        cards.forEach(card => {
13
            const cardTag = card.getAttribute('data-tag');
14
            card.style.display =
15
                (selectedTag === '全部' || cardTag === selectedTag)
16
                ? 'block' : 'none';
17
        });
18
    }
19

20
    buttons.forEach(btn => {
21
        btn.addEventListener('click', () => {
22
            filter(btn.getAttribute('data-tag'));
23
        });
24
    });
25
    filter('全部');
26
}
27
setupFilters();

1
export const BANNER_HEIGHT = 35;
2
export const BANNER_HEIGHT_EXTEND = 15;
3
export const BANNER_HEIGHT_EXTEND = 73;
4
export const BANNER_HEIGHT_HOME = BANNER_HEIGHT + BANNER_HEIGHT_EXTEND;

1
    </ImageWrapper>
2
    <div class="absolute inset-0 flex flex-col items-center justify-center
3
         text-white z-20" id="hero-overlay"
4
         style="text-shadow: 0 2px 4px rgba(0,0,0,0.8);">
5
        <div class="text-4xl md:text-5xl font-bold mb-4 font-hero">
6
            {siteConfig.title}
7
        </div>
8
        <div class="text-lg md:text-xl flex items-center font-hero">
9
            <span id="typewriter-text"></span>
10
            <span class="animate-pulse ml-1">|</span>
11
        </div>
12
        <div class="absolute bottom-8 left-1/2 -translate-x-1/2
13
             pointer-events-auto cursor-pointer text-white/80 hover:text-white"
14
             onclick="const mg = document.getElementById('main-grid');
15
                      if(mg) window.scrollBy({
16
                          top: mg.getBoundingClientRect().top,
17
                          behavior: 'smooth'
18
                      });">
19
            <Icon name="material-symbols:keyboard-arrow-down-rounded"
20
                  class="text-5xl animate-bounce" />
21
        </div>
22
    </div>
23
</div>}

1
<div class="absolute w-full z-30 pointer-events-none" ...>
2
    <div class="relative max-w-[...] mx-auto pointer-events-auto">
3
        <div id="main-grid" class="... mx-auto gap-4 px-0 md:px-4"
4
    <div class="relative max-w-[...] mx-auto pointer-events-none">
5
        <div id="main-grid" class="... mx-auto gap-4 px-0 md:px-4 pointer-events-auto"

1
body:not(.lg\:is-home) #hero-overlay {
2
    opacity: 0 !important;
3
    pointer-events: none !important;
4
}

1
async function fetchNextPhrase() {
2
    try {
3
        const response = await fetch('https://v1.hitokoto.cn?c=i');
4
        const data = await response.json();
5
        return data.hitokoto;
6
    } catch (e) {
7
        return "欲买桂花同载酒，终不似，少年游。";
8
    }
9
}

1
let typeTimeout = null;
2
let typeInstanceId = 0;
3

4
function initTypewriter() {
5
    const el = document.getElementById('typewriter-text');
6
    if (!el) return;
7

8
    if (typeTimeout) clearTimeout(typeTimeout);
9
    typeInstanceId++;
10
    const myId = typeInstanceId;
11
    if (typeTimeout) clearTimeout(typeTimeout);
12

13
    // ...
14

15
    async function type() {
16
        if (!document.getElementById('typewriter-text')) return;
17
        if (myId !== typeInstanceId) return;  // 已被新实例取代
18
        if (!document.getElementById('typewriter-text')) return;
19

20
        if (currentPhrase === "") {
21
            await fetchNextPhrase();
22
            currentPhrase = await fetchNextPhrase();
23
            if (myId !== typeInstanceId) return;  // await 后再检查
24
        }
25

26
        // ... 打字逻辑 ...
27

28
        typeTimeout = setTimeout(type, typeSpeed);
29
        typeTimeout = setTimeout(() => {
30
            if (myId === typeInstanceId) type();  // 回调中也检查
31
        }, typeSpeed);
32
    }
33
}

1
if (!window._swupContentBound) {
2
    window._swupContentBound = true;
3
    document.addEventListener('swup:content:replace', () => {
4
        if (document.getElementById('typewriter-text')) {
5
            initTypewriter();
6
        }
7
        setupFilters();
8
    });
9
}

1
&.full_page
2
  height: $index_top_img_height
3
  background-attachment: fixed