1
---
2
interface Props {
3
  url?: string;
4
  title?: string;
5
}
6
const { url, title }: Props = Astro.props;
7

8
function toAbsolute(u?: string): string {
9
  try {
10
    if (!u) return Astro.url?.href ?? '';
11
    return new URL(u, Astro.url).href;
12
  } catch {
13
    return u ?? '';
14
  }
15
}
16

17
const absoluteUrl = toAbsolute(url);
18
// 推荐语 + 标题
19
const promo = '发现一篇好文，分享给你🎉';
20
const shareText = title ? `${promo} ${title}` : promo;
21

22
// 使用 twitter.com/intent/tweet，并分别传 text 与 url
23
const intent = new URL('https://twitter.com/intent/tweet');
24
intent.searchParams.set('text', shareText);
25
if (absoluteUrl) intent.searchParams.set('url', absoluteUrl);
26
const xShareUrl = intent.toString();
27
---
28

29
<div class="x-share-root">
30
  <!-- 无 JS 兜底链接（隐藏以避免被内容拦截规则影响可视布局） -->
31
  <a href={xShareUrl} target="_blank" rel="noopener noreferrer" class="x-action-link" aria-hidden="true" tabindex="-1">X</a>
32
  <!-- 可见触发元素：button，避免广告/社交拦截按 href 规则隐藏 -->
33
  <button type="button" class="x-action-btn" data-share-text={shareText} data-share-url={xShareUrl} aria-label="转发到 X">
34
    <span class="share-icon-bg" aria-hidden="true"></span>
35
  </button>
36
</div>
37

38
<script is:inline>
39
  // 移动端优先系统分享，失败回退到意图链接（按钮触发，避开拦截规则）
40
  const container = document.currentScript?.previousElementSibling;
41
  if (container) {
42
    const btn = container.querySelector('.x-action-btn');
43
    if (btn) {
44
      btn.addEventListener('click', (e) => {
45
        e.preventDefault();
46
        const shareText = btn.getAttribute('data-share-text') || document.title;
47
        const href = btn.getAttribute('data-share-url') || '#';
48
        if (navigator.share) {
49
          navigator.share({
50
            title: document.title,
51
            text: shareText,
52
            url: window.location.href,
53
          }).catch(() => {
54
            window.open(href, '_blank', 'noopener,noreferrer');
55
          });
56
        } else {
57
          window.open(href, '_blank', 'noopener,noreferrer');
58
        }
59
      }, { passive: false });
60
    }
61
  }
62
</script>
63

64
<style>
65
  .x-action-btn {
66
    /* 1. 容器样式：固定尺寸、圆形、Flex居中 */
67
    display: inline-flex;
68
    align-items: center;
69
    justify-content: center;
70
    width: 40px;
71
    height: 40px;
72
    padding: 0;
73
    border-radius: 50%; /* 圆形 */
74

75
    /* 2. 视觉样式 */
76
    background: #111;
77
    color: #fff;
78
    border: 1px solid rgba(0, 0, 0, 0.15);
79
    box-shadow:
80
      0 2px 6px rgba(0, 0, 0, 0.08),
81
      0 1px 2px rgba(0, 0, 0, 0.06);
82

83
    /* 3. 交互与兼容性 */
84
    -webkit-tap-highlight-color: transparent;
85
    position: relative;
86
    z-index: 10;
87
    flex: 0 0 auto; /* 防止在 Safari 的 flex 布局中被收缩 */
88
    transition:
89
      background-color .2s ease,
90
      transform .15s ease,
91
      box-shadow .2s ease;
92
    cursor: pointer;
93
  }
94
  .x-action-btn:hover {
95
    background: #000;
96
    transform: translateY(-1px);
97
    box-shadow:
98
      0 4px 14px rgba(0, 0, 0, 0.12),
99
      0 2px 6px rgba(0, 0, 0, 0.10);
100
  }
101
  .x-action-btn:active {
102
    transform: translateY(0);
103
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
104
  }
105
  .x-action-btn:focus-visible {
106
    outline: none;
107
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
108
  }
109

110
  /* 4. 图标样式：使用 Base64 背景图，兼容性最强 */
111
  .share-icon-bg {
112
    width: 20px;
113
    height: 20px;
114
    display: block;
115
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJ3aGl0ZSI+PHBhdGggZD0iTTE4LjI0NCAyLjI1aDMuMzA4bC03LjIyNyA4LjI2IDguNTAyIDExLjI0SDE2LjE3bC01LjIxNC02LjgxN0w0Ljk5IDIxLjc1SDEuNjhsNy43My04LjIzNUwxLjI1NCAyLjI1SDguMDhsNC43MTMgNi4yMzF6bS0xLjE2MSAxNy41MmgxLjgzM0w3LjA4NCA0LjEyNkg1LjExN3oiLz48L3N2Zz4=");
116
    background-size: contain;
117
    background-repeat: no-repeat;
118
    background-position: center;
119
  }
120

121
  /* 5. 容器与隐藏兜底链接 */
122
  .x-share-root { display: inline-block; position: relative; }
123
  .x-action-link {
124
    position: absolute;
125
    width: 1px; height: 1px;
126
    padding: 0; margin: -1px;
127
    overflow: hidden; clip: rect(0 0 0 0);
128
    white-space: nowrap; border: 0;
129
  }
130

131
  /* 6. 深色模式 */
132
  @media (prefers-color-scheme: dark) {
133
    .x-action-btn {
134
      background: #0b0b0b;
135
      border-color: rgba(255,255,255,0.12);
136
    }
137
    .x-action-btn:hover {
138
      background: #000;
139
    }
140
  }
141
</style>

1
---
2
import path from "node:path";
3
import License from "@components/misc/License.astro";
4
import Markdown from "@components/misc/Markdown.astro";
5
import I18nKey from "@i18n/i18nKey";
6
import { i18n } from "@i18n/translation";
7
import MainGridLayout from "@layouts/MainGridLayout.astro";
8
import { getSortedPosts } from "@utils/content-utils";
9
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
10
import { Icon } from "astro-icon/components";
11
import { licenseConfig } from "src/config";
12
import ImageWrapper from "../../components/misc/ImageWrapper.astro";
13
import PostMetadata from "../../components/PostMeta.astro";
14
import { profileConfig, siteConfig } from "../../config";
15
import { formatDateToYYYYMMDD } from "../../utils/date-utils";
16
import Giscus from '../../components/Giscus.astro';
17
import ShareButton from '../../components/ShareButton.astro';
18

19
export async function getStaticPaths() {
20
    const blogEntries = await getSortedPosts();
21
    return blogEntries.map((entry) => ({
22
        params: { slug: entry.slug },
23
        props: { entry },
24
    }));
25
}
26

27
// 获取props对象
28
const props = Astro.props;
29
// 从props中获取entry
30
const entry = props.entry;
31
// 渲染文章内容
32
const renderResult = await entry.render();
33
// 从渲染结果中获取所需内容
34
const Content = renderResult.Content;
35
const headings = renderResult.headings;
36
const remarkPluginFrontmatter = renderResult.remarkPluginFrontmatter;
37

38
// 构建JSON-LD结构化数据
39
const jsonLd = {
40
    "@context": "https://schema.org",
41
    "@type": "BlogPosting",
42
    headline: entry.data.title,
43
    description: entry.data.description || entry.data.title,
44
    keywords: entry.data.tags,
45
    author: {
46
        "@type": "Person",
47
        name: profileConfig.name,
48
        url: Astro.site,
49
    },
50
    datePublished: formatDateToYYYYMMDD(entry.data.published),
51
    inLanguage: entry.data.lang
52
        ? entry.data.lang.replace("_", "-")
53
        : siteConfig.lang.replace("_", "-"),
54
};
55

56
// 构建分享URL
57
const postUrl = new URL(Astro.url.pathname, Astro.site).href;
58
---
59
<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings}>
60
    <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
61
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
62
        <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full ",
63
            {}
64
        ]}>
65
            <!-- word count and reading time -->
66
            <div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation">
67
                <div class="flex flex-row items-center">
68
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
69
                        <Icon name="material-symbols:notes-rounded"></Icon>
70
                    </div>
71
                    <div class="text-sm">{remarkPluginFrontmatter.words} {" " + i18n(I18nKey.wordsCount)}</div>
72
                </div>
73
                <div class="flex flex-row items-center">
74
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
75
                        <Icon name="material-symbols:schedule-outline-rounded"></Icon>
76
                    </div>
77
                    <div class="text-sm">
78
                        {remarkPluginFrontmatter.minutes} {" " + i18n(remarkPluginFrontmatter.minutes === 1 ? I18nKey.minuteCount : I18nKey.minutesCount)}
79
                    </div>
80
                </div>
81
            </div>
82
            <!-- title -->
83
            <div class="relative onload-animation">
84
                <div
85
                    data-pagefind-body data-pagefind-weight="10" data-pagefind-meta="title"
86
                    class="transition w-full block font-bold mb-3
87
                    text-3xl md:text-[2.25rem]/[2.75rem]
88
                    text-black/90 dark:text-white/90
89
                    md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
90
                    before:absolute before:top-[0.75rem] before:left-[-1.125rem]
91
                ">
92
                    {entry.data.title}
93
                </div>
94
            </div>
95

96
            <!-- metadata -->
97
            <div class="onload-animation">
98
                <PostMetadata
99
                        class="mb-5"
100
                        published={entry.data.published}
101
                        updated={entry.data.updated}
102
                        tags={entry.data.tags}
103
                        category={entry.data.category}
104
                ></PostMetadata>
105
                {!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
106
            </div>
107
            <!-- always show cover as long as it has one -->
108
            {entry.data.image &&
109
                <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
110
            }
111

112
            <Markdown class="mb-6 markdown-content onload-animation">
113
                <Content />
114
            </Markdown>
115

116

117

118
            <!-- 分享按钮 -->
119
            <div class="mt-8 mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800 relative" style="z-index: 1;">
120
                <div class="flex items-center justify-between">
121
                    <span class="text-sm font-medium text-blue-800 dark:text-blue-200">分享这篇文章</span>
122
                    <ShareButton url={postUrl} title={entry.data.title} />
123
                </div>
124
            </div>
125

126
            {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
127
        </div>
128
    </div>
129
    <div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
130
        <a href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
131
           class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.nextSlug}]}>
132
            {entry.data.nextSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-start gap-4" >
133
                <Icon name="material-symbols:chevron-left-rounded" class="text-[2rem] text-[var(--primary)]" />
134
                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
135
                    {entry.data.nextTitle}
136
                </div>
137
            </div>}
138
        </a>
139
        <a href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
140
           class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.prevSlug}]}>
141
            {entry.data.prevSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-end gap-4">
142
                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
143
                    {entry.data.prevTitle}
144
                </div>
145
                <Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
146
            </div>}
147
        </a>
148
    </div>
149
<!-- Giscus 评论组件 -->
150
<Giscus />
151
</MainGridLayout>