ゴゴゴゴゴ
Skip to content
JOJO
首页文章项目知识库相册音乐
全站搜索
  • Navigate
  • Go to Page
  • escClose
© 2026 JOJOBuilt with Next.js

四种声音一个时代

这里收藏周杰伦、王力宏、陶喆与林俊杰的专辑,也把四位创作者放回完整唱片的语境。陶喆以松弛的律动重塑华语 R&B,周杰伦把说唱、古典与中国式旋律带进流行音乐,王力宏在抒情、摇滚和东方元素之间拓宽制作边界,林俊杰则用细密旋律与宽阔声线记录城市情绪。这里不打乱曲序,也不把专辑压缩成热门单曲;挑一张封面,从第一首听到最后一首,感受开场、中段与尾声如何共同完成一段叙事。

左右滑动浏览,轻触封面,从第一首开始听

正在播放的唱片

选择一首歌曲查看歌词
专辑封面

专辑

    请选择一张唱片等待选曲
    0:00
    0:00

    键盘快捷键

    搜索
    / 或 ⌘K
    回到首页
    G H
    博客列表
    G B
    切换主题
    T
    关闭弹窗
    Esc
    显示帮助
    ?

    按 Esc 关闭此窗口

    🎉 Release 1.0.0 ✨

    2024年10月6日 · 6 min
    navigationsearchtocbackgroundcustomization

    🚀 Features

    • nav:
      • Add navigation bar and page navigation (6ecfb4c)
        • use json schema for blog configs
        • add ToTopButton, Link, NavBar, and global.css
        • modify main layout structure and styles
        • configure to use presetIcon
        • add safelist (unocss.config.ts) to handle runtime styles
        • modify path alias (tsconfig.json), presetAttributify prefix (unocss.config.ts) settings, and env.d.ts
        • add .editorconfig to control vscode tabs (to match “tabWidth”: 2 in prettier)
      • Add BackLink (857dfb0)
    • page:
      • Add /blog and /blog/[slug] pages (b1f9a7b)
        • define postsSchema and configure blog collection
        • add PostLayout, Categorizer, PostItem
        • add utils
        • update global style files
        • modify Link
        • update env.d.ts (run astro sync) & eslint @typescript-eslint/triple-slash-reference
      • Add /projects page (fe2df75)
        • define projectsSchema and configure projects collection
        • add ProjectGroup, WideLayout, data.json
        • modify Categorizer (add needId, wide props)
        • add slug, extractIconsStartingWithI, loadIconComponent utilities
        • add projectIcons to safelist (unocss.config.ts)
      • Add /changelog (77ed19f)
    • theme:
      • Add light/dark mode with view transitions api (1fd5c3e)
        • add ToggleTheme (listens to ‘astro’, ‘astro’)
        • update ToTopButton (listens to ‘astro’)
        • fix PostLayout styles
        • update utils type declarations
      • Support system dark/light mode responsiveness (including logic to control theme-color meta tag) & improve a11y for theme switch (7c0c027) :::
    • style:
      • Configure font, slide enter rule (b959be2)
      • Add ‘op-transition’ utility for consistent opacity transitions & unify subtitle opacity in layouts (33177be)
      • Adjust styles for code and details elements in prose ([43adf86](https://github.com/lin-stephanie/ astro-antfustyle-theme/commit/43adf86))
      • Update styles for code, table, and callout elements in prose (54fbd0a)
    • astro:
      • Add rehype-autolink-headings & shikiConfig.themes (2cc9c7a)
        • configure rehype-autolink-headings plugin (add links to headings themselves)
        • configure shiki code themes and adjust markdown.css
        • modify presetAttributify.prefixedOnly to false (unocss.config.ts)
      • Add rehype-external-links (46ae647)
      • Add rehype-callouts (3dde001)
        • add callout styles (markdown.css)
        • modify proseWrap (.prettierrc)
      • Enable experimental features in 4.14: contentLayer, contentIntellisense (5533699)
        • add pageSchema and loader-based ‘pages’ collection
        • test schema-driven frontmatter restrictions and suggestions in pages/blog/index.mdx
      • Support for saving blog posts in nested directories (f649c9e)
      • Support KaTeX Math in Markdown/MDX (c8c7ac3)
      • Support subpath deployment (simply configure the base option) (bd9b059)
    • bg:
      • Add ArtPlum & Bckground (dd6ee89)
        • adjust the structure of PostLayout
        • add types.ts, useRafFn, useWindowSize
      • Add Dots (30d1d99)
        • Install p
        • modify Background (only conditionally return components)
        • modify Plum (constant names, component template)
      • Add Rose (f670c81)
        • add getRandom, getRandomPercentage utilities
        • rename Dots to Dot
      • Add Particle (5cea2f0)
      • Modify Plum (formerly ArtPlum) (16a9b79)
        • add pages..bgType custom option (types.ts)
        • remove hooks/
        • modify BaseLayout, Background, pages/index
    • loading:
      • Add nprogress ([slug].astro) (af503e6)
        • change component name
        • filter out posts where data.draft is true
    • header:
      • Add NavTabs (f64f213)
      • Extract post header content into Header (6306117)
        • add subtitle field to postsSchema
        • self-closing div tags not supported in .md by default
    • share:
      • Add ShareLink (834455f)
        • add share functionality on the /blog/[slug] page
        • add custom configuration for features.share
        • modify BaseLayout, BackLink
    • search:
      • Add SearchSwitch (0b1f647)
        • install pagefind to enable searching posts
        • add CSS variable
        • add getUrl, setClickOutsideToClose utilities
        • add vite.base (astro.config.ts), shortcuts-‘shadow-c’ (unocss.config.ts)
    • toc:
      • Add Toc, TocItem (3557ab8)
        • add toc on blog/[slug] and /projects pages (ensure frontmatter has higher priority than config.ts)
        • add generateToc utilities
        • modify the styling of the Toc (markdown.css)
        • modify ToTopButton style (ensure alignment with the right-side layout’s toc and higher z-index than toc)
        • add postSchema, projectsSchema fields (toc, share)
        • add features.toc custom configuration
        • change @apply to —uno: ”
      • Implement smooth scrolling (12742dc)
      • Support controlling TOC visibility on each page (2e0a324)
    • schema:
      • Handle draft, data fields (b9cbc40)
        • default draft to false.
        • modify formatDate, /blog
        • apply .toISOString() to data fields (StandardLayout)
      • Update content zod schemas & add vscode snippets (‘projectData’, ‘streamData’) (4046fd8)
    • code:
      • Configure astro-expressive-code integration (c9fc803)
        • implement syntax highlighting, code copying, editor & terminal frames, line markers, word wrap, collapsible sections, line numbers
        • install @expressive-code/plugin-collapsible-sections, @expressive-code/plugin-line-numbers
        • disable Astro’s syntax highlight
        • adjust built-in styles of Expressive Code
    • image:
      • Support adding ‘figure’ and ‘a’ container to ‘img’ generated from Markdown syntax & support for custom img attrs (c16c84b)
        • add custom remarkImageDirective plugin
        • add “postinstall”: “pnpm add -D sharp” script
      • Support image zoom preview within posts (f06ce03)
        • install medium-zoom and import the corresponding styles
        • move the script from Head.astro to BaseLayout.astro
        • adjust z-index
    • og-image:
      • Support automatic generation of og image (based on svg template) (f2eb657)
        • add custom remarkGenerateOgImage plugin
        • modify and add ogImage field (schema.ts)
        • obtain and pass remarkPluginFrontmatter.ogImage In /blog/[slug]
        • modify ogImageURL assignment logic
        • add getCurrentFormattedTime utilities
      • Support og image customization via html and css (ee030d4)
        • update remark-generate-og-image plugin logic
        • add markup.ts for ReactNode creation
        • add base
        • ts for background encoding
        • og-image.png as the fallback
      • Support lossless compression for auto-generated images & fix accidental HTML entity escaping in ‘satori-html’ (5b10047)
    • customize:
      • Add features.ogImage config & support regenerating fallback og image (937f496)
        • add customizable ogImage options: authorOrBrand, fallbackTitle, fallbackBgType
        • modify the ogImageURL assignment logic
        • update remark-generate-og-image plugin logic
      • Refactor to UI configuration & add custom configurations (navBarLayout, showGroupItemColorOnHover, toc.minHeadingLevel, toc.maxHeadingLevel, toc.displayMode) (94dbb51)
    • frontmatter:
      • Add lastModified field, rename date to created (8cacb6f)
      • Add support for auto-calculating post reading time (84e7b33)
        • rename duration to minutesRead, change to optional number type
        • add custom remark-reading-time plugin
        • update rendering logic for minutesRead
      • Support for ogImage set to true to auto-generate OG image & add vscode snippets (‘pageFrontmatter’) (6af984e)
    • share:
      • Support multiple shareable platforms (0399e10)
        • fix the issue of rendering extra whitespace
      • Support custom sharing of posts via Twitter, Mastodon, Facebook, Pinterest, Reddit, Telegram, WhatsApp, and Email (c4546e1)
    • mdx:
      • Support for using MDX (62e3633)
        • move pages/blog/index.astro to components/ and rename to PostList.astro as a reusable Astro component
        • write pages/blog/index.mdx to replace pages/blog/index.astro
    • snippet:
      • Support for quickly inserting editable frontmatter for Markdown/MDX in VSCode (6a21fd9)
    • directive:
      • Support markdown syntax in figcaption text for formatting (361bf00)
      • Support adding styled links in Markdown/MDX with :link, including simplified syntax for linking to GitHub users/repos (eafbb23)
        • modify remark-directive-sugar plugin (implemented ‘button-s’, ‘button-r’, ‘github-link’ style types)
      • Support for customizable badge-like representations using :badge/:badge-* in Markdown/MDX & regular remark-directive usage (aa69a4e)
      • Support embedding videos in Markdown/MDX using the ::video directive (3610160)
        • add custom remark-directive-sugar plugin
        • modify error handling in the remark-image-container plugin
    • logo:
      • Support custom logo (6f9517c)
        • add styles for SVG animation
        • refactor NavBar layout implementation
    • pwa:
      • Update icon files & add manifest.webmanifest support for PWA (c37ec77)
    • seo:
      • Dynamically adjust OG display type & add Google JSON-LD Structured Data (ab2f1a4)
        • support og as article for posts (when pubDate exists), otherwise use website
        • rename created to pubDate and lastModified to lastModDate
      • Integrate automatic generation of sitemap.xml and robots.txt during build (7f2d98c)
    • rss:
      • Support for visitors subscribing to the blog (bce7cee)
    • footer:
      • Update content, auto-fetch current year for copyright, improve a11y (aa16ca2)
    • refactor:
      • Adjust BaseLayout to keep footer at the viewport bottom (fa49945)
    • a11y:
      • Add role, aria-label, and aria-current attributes (ab82ecd)

    🐞 Bug Fixes

    • nav:
      • Resolve navigation path parsing errors post-build (48a2061)
        • add ensureTrailingSlash utility (enforce trailing slashes on all paths)
        • refactor layout templates
    • search:
      • Make search results scrollable (with invisible scrollbar) (b608816)
        • modify /* Scrollbar */ style (main.css)
    • a11y:
      • Improve accessibility (Sa11y audit) (84c1456)
    • view:
      • Prevent text overflow on /projects at 1024px width & rename custom option (UI.groupItemCols to UI.maxGroupColumns) (b78fad4)
      • Resolve responsive issues in footer and other view adjustments (f1716aa)
    • bg:
      • Prevent premature p5 access by custom elements & support bgType set to false to disable background (2b0d8ba)
    • directive:
      • Correct inaccurate GITHUB_REPO_REGEXP regex matching & add .prettierignore (exclude *.md from being formatted by prettier) (c7ffe8f)

    💅 Refactors

    • customize:
      • Change json schema to ts (5afa371)
    • page:
      • Replace .astro with .mdx for generating page files (/feeds, /streams) (9eafc7f)
        • refactor PostList to List, PostItem to ListItem (for list views)
        • add ‘streams’, ‘feeds’, ‘changelog’ collections
        • modify TabbedLayout
        • add LAYOUTS custom configuration
        • Install @ascorbic/feed-loader for external feeds
      • Replace .astro with .mdx for generating page files (/projects) (d9fb2c4)
        • refactor ProjectGroup to GroupItem, Group (for group views)
        • refactor pages/projects/index.astro to pages/projects.mdx
        • modify WideLayout, projectsSchema
        • add and implement groupItemCols custom configuration
      • Replace .astro with .mdx for generating page files (/blog、404) (ae7c044)
        • refactor StandardLayout and blog/[slug] (cannot refactor to .mdx due to dynamic routing)
        • adjust bgType fetching logic, use dirname when filenama is ‘index’ (remark-generate-og-image.ts)
        • replace TabbedLayout with StandardLayout on blog/ page
      • Add RenderPost for generating a single page by collectionType and slug (76afb21)
    • bg:
      • Refactor background (plum, dot, particle) as custom elements (30f377f)

    🏡 Chore

    • Init by create-astro (a5a5ead)
    • Set up prettier for astro (2e36460)
    • Set up eslint (flat) for ts, astro 1. init by ‘npm init @eslint/config@latest’ 2. disable formatting rules in eslint (64115a0)
    • Lint staged (e5000ef)
    • Tsconfig (4829f37)
    • Configure unocss. (2b5e7b1)
    • Change to npm & add .gitattributes (8e722bb)
    • Change to pnpm & update deps (e19c95e)
    • Refactor configuration structure (00ab263)
    • Update deps & pnpm format & pnpm lint (bd4534f)
    • Add workflows (ci, release, stale) & templates for PRs and issues (bd6016c)
    • Adjust views & update CI workflow & use ‘vitepress’ for callouts theme (9f44e46)
    • Organize CSS files & modify styles for headings under .prose (52ed632)
    • Update homepage & README (1fec5cf)
    • Update docs (bade804)
    • Temporary update (WIP) (371bed3)
    • Update docs (b78aca5)
    • Add og images (8c582c3)

    ❤️ Contributors

    • Stephanie Lin (@lin-stephanie)

    View changes on GitHub

    Skip toc
    • 🚀 Features
      • 🐞 Bug Fixes
      • 💅 Refactors
      • 🏡 Chore
      • ❤️ Contributors
    Table of Contents
    • 🚀 Features
      • 🐞 Bug Fixes
      • 💅 Refactors
      • 🏡 Chore
      • ❤️ Contributors
    > share on twitter