隐藏封面图 - R1ng13 Blog

添加类型定义#

文件路径：src/types/config.ts

1
// 文章列表布局配置
2
  postListLayout: {
3
    allowCoverSwitch?: boolean; // 是否允许用户切换文章封面图显示
4
    showCover?: boolean; // 默认是否显示文章封面图
5
  };

添加配置项#

文件路径：src/config/siteConfig.ts

1
postListLayout: {
2
  allowCoverSwitch: true,  // 新增：允许切换封面图显示
3
  showCover: true,         // 新增：默认显示封面图
4
},

设置工具函数#

文件路径：src/utils/setting-utils.ts

1
// 获取默认封面图显示状态
2
export function getDefaultPostCoverImageEnabled(): boolean {
3
  return siteConfig.postListLayout.showCover ?? true;
4
}
5

6
// 从localStorage读取封面图显示状态
7
export function getStoredPostCoverImageEnabled(): boolean {
8
  if (
9
    typeof localStorage === "undefined" ||
10
    typeof localStorage.getItem !== "function"
11
  ) {
12
    return getDefaultPostCoverImageEnabled();
13
  }
14
  const stored = localStorage.getItem("postCoverImageEnabled");
15
  if (stored === null) {
16
    return getDefaultPostCoverImageEnabled();
17
  }
18
  return stored === "true";
19
}
20

21
// 设置封面图显示状态
22
export function setPostCoverImageEnabled(enabled: boolean): void {
23
  if (
24
    typeof localStorage === "undefined" ||
25
    typeof localStorage.setItem !== "function"
26
  ) {
27
    return;
28
  }
29
  localStorage.setItem("postCoverImageEnabled", String(enabled));
30
  applyPostCoverImageEnabledToDocument(enabled);
31
  if (typeof window !== "undefined") {
32
    window.dispatchEvent(
33
      new CustomEvent("postCoverImageChange", {
34
        detail: { enabled },
35
      }),
36
    );
37
  }
38
}
39

40
// 将封面图状态应用到文档
41
export function applyPostCoverImageEnabledToDocument(enabled: boolean): void {
42
  if (typeof document === "undefined") {
43
    return;
44
  }
45
  document.documentElement.setAttribute(
46
    "data-post-cover-enabled",
47
    String(enabled),
48
  );
49
}

添加设置面板开关#

文件路径：src/components/controls/DisplaySettingsIntegrated.svelte

导入相关函数#

在文件顶部导入新添加的工具函数：

1
import {
2
  // ... 其他导入
3
  getDefaultPostCoverImageEnabled,
4
  getStoredPostCoverImageEnabled,
5
  setPostCoverImageEnabled,
6
  applyPostCoverImageEnabledToDocument,
7
} from "@utils/setting-utils";

添加状态变量#

在脚本部分添加以下状态变量：

1
const defaultPostCoverImageEnabled = getDefaultPostCoverImageEnabled();
2
const isPostCoverImageSwitchable = siteConfig.postListLayout.allowCoverSwitch ?? true;
3
let postCoverImageEnabled = $state(true);

添加切换函数#

添加切换封面图状态的函数：数：

1
function togglePostCoverImageEnabled() {
2
  postCoverImageEnabled = !postCoverImageEnabled;
3
  setPostCoverImageEnabled(postCoverImageEnabled);
4
}

在 onMount 中初始化状态#

1
// 从localStorage读取文章封面图状态
2
postCoverImageEnabled = getStoredPostCoverImageEnabled();
3
// 将状态应用到文档
4
applyPostCoverImageEnabledToDocument(postCoverImageEnabled);

添加开关 UI#

在 HTML 模板部分（布局切换区域后）添加：

1
<!-- Post Cover Image Switch Section -->
2
{#if isPostCoverImageSwitchable}
3
  <div class="mt-2 mb-2">
4
    <div class="flex gap-2 font-bold text-lg text-neutral-900 dark:text-neutral-100 transition relative ml-3 mb-2
5
        before:w-1 before:h-4 before:rounded-md before:bg-(--primary)
6
        before:absolute before:-left-3 before:top-1/2 before:-translate-y-1/2"
7
    >
8
      {i18n(I18nKey.postCoverImage)}
9
      <button aria-label="Reset to Default" class="btn-regular w-7 h-7 rounded-md active:scale-90"
10
              class:opacity-0={postCoverImageEnabled === defaultPostCoverImageEnabled}
11
              class:pointer-events-none={postCoverImageEnabled === defaultPostCoverImageEnabled}
12
              onclick={() => {
13
                postCoverImageEnabled = defaultPostCoverImageEnabled;
14
                setPostCoverImageEnabled(defaultPostCoverImageEnabled);
15
              }}>
16
        <div class="text-(--btn-content)">
17
          <Icon icon="fa7-solid:arrow-rotate-left" class="text-[0.875rem]"></Icon>
18
        </div>
19
      </button>
20
    </div>
21
    <div class="space-y-1">
22
      <button
23
        class="w-full btn-regular rounded-md py-2 px-3 flex items-center gap-3 text-left active:scale-95 transition-all relative overflow-hidden"
24
        class:bg-(--btn-regular-bg-hover)={postCoverImageEnabled}
25
        onclick={togglePostCoverImageEnabled}
26
      >
27
        <Icon icon="material-symbols:image" class="text-[1.25rem] shrink-0"></Icon>
28
        <span class="text-sm flex-1">{i18n(I18nKey.postCoverImage)}</span>
29
        <div class="w-10 h-5 rounded-full transition-all duration-200 relative"
30
             class:bg-(--primary)={postCoverImageEnabled}
31
             class:bg-(--btn-regular-bg-active)={!postCoverImageEnabled}>
32
          <div class="absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-all duration-200"
33
               class:left-0.5={!postCoverImageEnabled}
34
               class:left-5={postCoverImageEnabled}></div>
35
        </div>
36
      </button>
37
    </div>
38
  </div>
39
{/if}

添加样式控制#

文件路径：src/components/layout/PostCard.astro

1
/* === Hide Post Cover Image === */
2
/* 当 data-post-cover-enabled="false" 时隐藏封面图 */
3
:global([data-post-cover-enabled="false"]) .post-card-image {
4
  display: none !important;
5
}
6

7
:global([data-post-cover-enabled="false"]) .has-cover {
8
  &.post-card-wrapper {
9
    .post-card-content {
10
      width: calc(100% - 52px - 12px) !important;
11
    }
12
  }
13
}
14

15
:global([data-post-cover-enabled="false"]) .has-cover .post-card-enter-btn {
16
  display: flex !important;
17
}

语言配置#

文件路径：src/i18n/i18nKey.ts

1
postCoverImage = "postCoverImage",

文件路径：src/i18n/languages/en.ts

1
[Key.postCoverImage]: "Post Cover Image",

文件路径：src/i18n/languages/ja.ts

1
[Key.postCoverImage]: "記事のカバー画像",

文件路径：src/i18n/languages/ru.ts

1
[Key.postCoverImage]: "Обложка поста",

文件路径：src/i18n/languages/zh_CN.ts

1
[Key.postCoverImage]: "文章封面图",

文件路径：src/i18n/languages/zh_TW.ts

1
[Key.postCoverImage]: "文章封面圖",

走马

音乐

音乐

添加类型定义#

添加配置项#

设置工具函数#

添加设置面板开关#

导入相关函数#

添加状态变量#

添加切换函数#

在 onMount 中初始化状态#

添加开关 UI#

添加样式控制#

语言配置#

支持与分享

评论区

音乐

文章目录