From 212ce69cd7b75bdaa4a5bd187710391c338b1b6e Mon Sep 17 00:00:00 2001 From: Alexander Sorokin <10401817+brawaru@users.noreply.github.com> Date: Tue, 2 Sep 2025 16:23:30 +0700 Subject: [PATCH] feat(theme): support title-less custom containers Adds a special handling for the no-title attribute on the container, which skips rendering the title, alowing for titleless containers. The styles are updated as well to remove the excessive padding for such containers. --- docs/en/guide/what-is-vitepress.md | 6 ++---- docs/es/guide/what-is-vitepress.md | 6 ++---- docs/fa/guide/what-is-vitepress.md | 6 ++---- docs/ko/guide/what-is-vitepress.md | 6 ++---- docs/pt/guide/what-is-vitepress.md | 6 ++---- docs/ru/guide/what-is-vitepress.md | 6 ++---- docs/zh/guide/what-is-vitepress.md | 6 ++---- .../theme-default/styles/components/custom-block.css | 6 +++++- src/node/markdown/plugins/containers.ts | 8 ++++++++ 9 files changed, 27 insertions(+), 29 deletions(-) diff --git a/docs/en/guide/what-is-vitepress.md b/docs/en/guide/what-is-vitepress.md index 3407c76d..e60c0357 100644 --- a/docs/en/guide/what-is-vitepress.md +++ b/docs/en/guide/what-is-vitepress.md @@ -2,11 +2,9 @@ VitePress is a [Static Site Generator](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) designed for building fast, content-centric websites. In a nutshell, VitePress takes your source content written in [Markdown](https://en.wikipedia.org/wiki/Markdown), applies a theme to it, and generates static HTML pages that can be easily deployed anywhere. -
- +::: tip {no-title} Just want to try it out? Skip to the [Quickstart](./getting-started). - -
+::: ## Use Cases diff --git a/docs/es/guide/what-is-vitepress.md b/docs/es/guide/what-is-vitepress.md index b8e07672..12c1c8d6 100644 --- a/docs/es/guide/what-is-vitepress.md +++ b/docs/es/guide/what-is-vitepress.md @@ -2,11 +2,9 @@ VitePress es un [Generador de Sitios Estáticos](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) diseñado para construir sitios web rápidos y enfocados en el contenido. En pocas palabras, VitePress toma tu contenido fuente escrito en [Markdown](https://en.wikipedia.org/wiki/Markdown), le aplica un tema y genera páginas HTML estáticas que se pueden desplegar fácilmente en cualquier lugar. -
- +::: tip {no-title} ¿Quieres probarlo? Ve directo al [Inicio Rápido](./getting-started). - -
+::: ## Casos de Uso {#use-cases} diff --git a/docs/fa/guide/what-is-vitepress.md b/docs/fa/guide/what-is-vitepress.md index 1d3d7f7f..d1150fd3 100644 --- a/docs/fa/guide/what-is-vitepress.md +++ b/docs/fa/guide/what-is-vitepress.md @@ -2,11 +2,9 @@ ویت‌پرس یک [تولید کننده سایت ایستا](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) است که برای ساخت وب‌سایت‌های سریع و محتوا محور طراحی شده است. به طور خلاصه، ویت‌پرس محتوای منبع شما که به زبان [Markdown](https://en.wikipedia.org/wiki/Markdown) نوشته شده است را گرفته، یک تم بر روی آن اعمال می‌کند و صفحات HTML ایستا تولید می‌کند که به راحتی در هر جایی قابل استقرار هستند. -
- +::: tip {no-title} فقط می‌خواهید آن را امتحان کنید؟ به [شروع سریع](./getting-started) بروید. - -
+::: ## موارد استفاده {#use-cases} diff --git a/docs/ko/guide/what-is-vitepress.md b/docs/ko/guide/what-is-vitepress.md index a2ed0dee..1d971915 100644 --- a/docs/ko/guide/what-is-vitepress.md +++ b/docs/ko/guide/what-is-vitepress.md @@ -2,11 +2,9 @@ VitePress는 빠르고 컨텐츠 중심의 웹사이트를 구축하기 위해 설계된 [정적 사이트 생성기](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)입니다. 다시말해 VitePress는 [마크다운](https://en.wikipedia.org/wiki/Markdown)으로 작성된 소스 컨텐츠를 가져와서 테마를 적용하고, 어디에나 쉽게 배포할 수 있는 정적 HTML 페이지를 생성합니다. -
- +::: tip {no-title} 그냥 한번 사용해보고 싶으신가요? [빠른 시작](./getting-started)으로 건너뛰세요. - -
+::: ## 사용 사례 {#use-cases} diff --git a/docs/pt/guide/what-is-vitepress.md b/docs/pt/guide/what-is-vitepress.md index c447fd02..f199b333 100644 --- a/docs/pt/guide/what-is-vitepress.md +++ b/docs/pt/guide/what-is-vitepress.md @@ -2,11 +2,9 @@ O VitePress é um [Gerador de Site Estático](https://en.wikipedia.org/wiki/Static_site_generator) (SSG) projetado para criar sites rápidos e centrados em conteúdo. Em suma, VitePress utiliza seu conteúdo-fonte escrito em [Markdown](https://en.wikipedia.org/wiki/Markdown), aplica um tema a ele e gera páginas HTML estáticas que podem ser facilmente implantadas em qualquer lugar. -
- +::: tip {no-title} Quer apenas experimentar? Pule para o [Início Rápido](./getting-started). - -
+::: ## Casos de Uso {#use-cases} diff --git a/docs/ru/guide/what-is-vitepress.md b/docs/ru/guide/what-is-vitepress.md index eb683940..5f6dc866 100644 --- a/docs/ru/guide/what-is-vitepress.md +++ b/docs/ru/guide/what-is-vitepress.md @@ -2,11 +2,9 @@ VitePress — это [Генератор статических сайтов](https://en.wikipedia.org/wiki/Static_site_generator) (ГСС), предназначенный для быстрого создания сайтов, ориентированных на контент. В двух словах, VitePress берёт ваш исходный контент, написанный в [Markdown](https://ru.wikipedia.org/wiki/Markdown), применяет к нему тему и генерирует статические HTML-страницы, которые можно легко развернуть в любом месте. -
- +::: tip {no-title} Хотите попробовать прямо сейчас? Перейдите к главе [Первые шаги](./getting-started). - -
+::: ## Примеры использования {#use-cases} diff --git a/docs/zh/guide/what-is-vitepress.md b/docs/zh/guide/what-is-vitepress.md index edff730a..9ca0ab1b 100644 --- a/docs/zh/guide/what-is-vitepress.md +++ b/docs/zh/guide/what-is-vitepress.md @@ -2,11 +2,9 @@ VitePress 是一个[静态站点生成器](https://en.wikipedia.org/wiki/Static_site_generator) (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress 获取用 Markdown 编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态 HTML 页面。 -
- +::: tip {no-title} 只是想尝试一下？跳到[快速开始](./getting-started)。 - -
+::: ## 使用场景 {#use-cases} diff --git a/src/client/theme-default/styles/components/custom-block.css b/src/client/theme-default/styles/components/custom-block.css index a960381c..25bf3ba7 100644 --- a/src/client/theme-default/styles/components/custom-block.css +++ b/src/client/theme-default/styles/components/custom-block.css @@ -1,12 +1,16 @@ .custom-block { border: 1px solid transparent; border-radius: 8px; - padding: 16px 16px 8px; + padding: 8px 16px; line-height: 24px; font-size: var(--vp-custom-block-font-size); color: var(--vp-c-text-2); } +.custom-block:has(.custom-block-title) { + padding-top: 16px; +} + .custom-block.info { border-color: var(--vp-custom-block-info-border); color: var(--vp-custom-block-info-text); diff --git a/src/node/markdown/plugins/containers.ts b/src/node/markdown/plugins/containers.ts index 39efce17..f1bf3e43 100644 --- a/src/node/markdown/plugins/containers.ts +++ b/src/node/markdown/plugins/containers.ts @@ -28,6 +28,12 @@ export const containerPlugin = ( type ContainerArgs = [typeof container, string, { render: RenderRule }] +function attrPop(token: Token, name: string) { + const idx = token.attrIndex(name) + if (idx < 0) return null + return token.attrs!.splice(idx, 1)[0][1] +} + function createContainer( klass: string, defaultTitle: string, @@ -41,7 +47,9 @@ function createContainer( const token = tokens[idx] if (token.nesting === 1) { token.attrJoin('class', `${klass} custom-block`) + const skipTitle = attrPop(token, 'no-title') === '' const attrs = md.renderer.renderAttrs(token) + if (skipTitle && klass !== 'details') return `
\n` const info = token.info.trim().slice(klass.length).trim() const title = md.renderInline(info || defaultTitle, { references: env.references