对Fuwari进行一些小的改动

封面图来源：いのふとん(おそろいの)🔗

TIP
改动点包括替换默认字体、新增文章置顶功能、添加链接卡片以及增加代码块标识图标

一、字体#

字体修改参考了 《在Fuwari使用自定义字体》 by AULyPc，感谢

https://blog.aulypc0x0.online/posts/use_custom_fonts_in_fuwari/

博主这里引入了两种粗细的MiSans字体

MiSans Global 是由小米主导，联合蒙纳字库、汉仪字库共同打造的全球语言字体定制项目。这是一个庞大的字体家族，涵盖 20 多种书写系统，支持 600 多种语言，字符数量超过 10 万个。作为 Xiaomi HyperOS 系统默认字体，我们以简约/清晰，人文/易读，统一的视觉风格为基本原则出发，构建多语言信息体验一致性，旨在帮助为 Xiaomi HyperOS 提供互联的通用体验

hyperos.mi.com

1
.collapsed {
2
    height: var(--collapsedHeight);
3
}
4

5
@font-face {
6
    font-family: 'MiSans';
7
    src: url('/fonts/MiSans-Normal.woff2') format('woff2');
8
    font-weight: 400;
9
    font-style: normal;
10
    font-display: swap;
11
}
12
@font-face {
13
    font-family: 'MiSans';
14
    src: url('/fonts/MiSans-Semibold.woff2') format('woff2');
15
    font-weight: 700;
16
    font-style: normal;
17
    font-display: swap;
18
}

1
/** @type {import('tailwindcss').Config} */
2
const defaultTheme = require("tailwindcss/defaultTheme")
3
module.exports = {
4
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,mjs}"],
5
  darkMode: "class", // allows toggling dark mode manually
6
  theme: {
7
    extend: {
8
      fontFamily: {
9
        sans: ["Roboto", "sans-serif", ...defaultTheme.fontFamily.sans],
10
        sans: ["MiSans"],
11
      },
12
    },
13
  },
14
  plugins: [require("@tailwindcss/typography")],
15
}

二、置顶文章#

参考了feat: add post pinning feature and fix icon dependencies

三、链接卡片#

参考了feat: add link-card feature

四、代码块标识#

这是一个Expressive Code的插件，增加代码块的语言标识图标

GitHub - xt0rted/expressive-code-file-icons: Add Visual Studio Code file icons to Expressive Code frames

Add Visual Studio Code file icons to Expressive Code frames - xt0rted/expressive-code-file-icons

github.com

Add Visual Studio Code file icons to Expressive Code frames - xt0rted/expressive-code-file-icons

这是博主的设置，修改样式后需删除项目里的📁.astro，并重启项目才能看到效果

1
import { pluginFileIcons } from "@xt0rted/expressive-code-file-icons";
2

3
export default defineConfig({
4
  // ...
5
  integrations: [
6
    // ...
7
    , expressiveCode({
8
    themes: ["catppuccin-frappe", "light-plus"],
9
    plugins: [pluginCollapsibleSections(), pluginLineNumbers(),
10
      pluginFileIcons({
11
        iconClass: "text-4 w-5 inline mr-1 mb-1",
12
        titleClass: ""
13
      })
14
    ],
15
  }),
16
  ]
17
})

提醒
不过有些标识图标不适用双主题，比如 Astro
下面是博主的临时解决办法（针对Astro）

1
import { AUTO_MODE, DARK_MODE } from '@constants/constants.ts'
2
import { onMount } from 'svelte'
3
import { writable } from 'svelte/store';
4
import { getStoredTheme } from '@utils/setting-utils.ts'
5
const mode = writable(AUTO_MODE)
6
onMount(() => {
7
  mode.set(getStoredTheme())
8
  updateAstroSvg()
9
})
10

11
function updateGiscusTheme() {
12
  const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
13
  const iframe = document.querySelector('iframe.giscus-frame')
14
  if (!iframe) return
15
  iframe.contentWindow.postMessage({ giscus: { setConfig: { theme } } }, 'https://giscus.app')
16
}
17

18
function updateAstroSvg(){
19
  const theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light'
20
  const spans = document.querySelectorAll('figcaption > .title')
21
  spans.forEach(span => {
22
    if (!span || !span.innerHTML.includes('astro')) return
23

24
    const paths = span.querySelectorAll('svg > path')
25
    if (theme === 'dark'){
26
      paths[1].setAttribute('fill', '#fff')
27
    }
28
    else{
29
      paths[1].setAttribute('fill', '#000')
30
    }
31
  })
32
}
33

34
const observer = new MutationObserver(updateGiscusTheme)
35
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
36

37
window.onload = () => {
38
  updateGiscusTheme()
39
  updateAstroSvg()
40
}

1
onMount(() => {
2
  mode = getStoredTheme()
3

4
  if (mode === DARK_MODE) {
5
    document.documentElement.setAttribute("data-theme", "catppuccin-frappe");
6
  } else {
7
    document.documentElement.setAttribute("data-theme", "light-plus");
8
  }
9
  updateAstroSvg(mode)
10

11
  const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)')
12 collapsed lines
12
  const changeThemeWhenSchemeChanged: Parameters<
13
    typeof darkModePreference.addEventListener<'change'>
14
  >[1] = e => {
15
    applyThemeToDocument(mode)
16
  }
17
  darkModePreference.addEventListener('change', changeThemeWhenSchemeChanged)
18
  return () => {
19
    darkModePreference.removeEventListener(
20
      'change',
21
      changeThemeWhenSchemeChanged,
22
    )
23
  }
24
})
25

26

27
function switchScheme(newMode: LIGHT_DARK_MODE) {
28
  mode = newMode
29
  setTheme(newMode)
30

31
  if (mode === DARK_MODE) {
32
    document.documentElement.setAttribute("data-theme", "catppuccin-frappe");
33
  } else {
34
    document.documentElement.setAttribute("data-theme", "light-plus");
35
  }
36
  updateAstroSvg(mode)
37
}
38

39
function updateAstroSvg(mode: LIGHT_DARK_MODE) {
40
  const spans = document.querySelectorAll('figcaption > .title')
41
  spans.forEach(span => {
42
    if (!span || !span.innerHTML.includes('astro')) return
43

44
    const paths = span.querySelectorAll('svg > path')
45
    if (mode === DARK_MODE){
46
      paths[1].setAttribute('fill', '#fff')
47
    }
48
    else{
49
      paths[1].setAttribute('fill', '#000')
50
    }
51
  })
52
}