其他集成

medium-zoom#

查看 medium-zoom ↗ 了解更多。

export const integ: IntegrationUserConfig = {
  // ...
  // 一个可以添加缩放效果的灯箱库
  mediumZoom: {
    enable: true, // 禁用它将不会加载整个库
    selector: '.prose .zoomable',
    options: {
      className: 'zoomable'
    }
  }
}

此主题默认已在 BlogPost.astro 中集成了它，这意味着 src/content/blog 中的任何内容都不需要导入。如果您想在任何其他布局或页面中使用它，可以使用以下代码：

---
import { MediumZoom } from 'astro-pure/advanced'
---

<div class="prose">
  <img src="/path/to/image.jpg" class="zoomable" />
</div>

<MediumZoom />
{/* 或带配置 */}
<MediumZoom
  selector=".prose .zoomable"
  background="rgba(0, 0, 0, 0.7)"
 />

import { MediumZoom } from 'astro-pure/advanced'

// .zoomable 类将通过 remark 插件自动添加
![](path/to/image.jpg)

<MediumZoom />
// 或带配置
<MediumZoom
  selector=".prose .zoomable"
  background="rgba(0, 0, 0, 0.7)"
 />

@playform/compress#

查看 playform/compress ↗ 了解更多。

Friend-Circle-Lite#

请参阅 友链 #与 Friend-Circle-Lite 集成。

LateX 支持#

如果将来此主题移除了对 LateX 的默认支持，这里有一个教程可以帮助您添加支持。

在 Astro.js 中渲染 LaTeX 可以丰富您的 markdown 文件，添加数学表达式，使您的内容既吸引人又信息丰富。以下步骤概述了将 LaTeX 集成到 Astro.js 中的必要步骤，并解决了可能出现的问题及其解决方案。

1. 安装必要的包

   首先安装 remark-math 和 rehype-katex。这些包分别用于解析和渲染 LaTeX。使用以下安装命令：

   bun install remark-math rehype-katex

   shell

2. 配置 Astro

   修改您的 Astro 配置以使用这些插件。在 astro.config.ts 中的 markdown 配置部分添加这些插件：

   astro.config.ts

   import { defineConfig } from 'astro/config';
   import remarkMath from 'remark-math';
   import rehypeKatex from 'rehype-katex';
   
   export default defineConfig({
      // ...
      markdown: {
         remarkPlugins: [remarkMath],
         rehypePlugins: [rehypeKatex],
      },
   });

   js

3. 包含 KaTeX CSS

   为了确保 LaTeX 公式样式正确，在您的 HTML 布局中包含 KaTeX CSS（在此主题中，它将位于 BlogPost.astro 文件中）。添加以下 CSS 资源：

   src/layouts/BlogPost.astro

   ---
   import 'katex/dist/katex.min.css'
   ---

   astro

   或者使用 CDN 以提高速度：

   src/layouts/BlogPost.astro

   ---
   import config from '@/site-config'
   ---
   <link rel="stylesheet" href={`${config.npmCDN}/[email protected]/dist/katex.min.css`}>

   astro

4. 建议添加一些 CSS 代码：

   为了确保 LaTeX 公式显示更好，您可能需要将以下代码添加到 public/styles/global.css 中：

   span.katex-display {
     overflow-y: scroll;
     padding: 0.5rem;
   }
   .katex-html {
     overflow: auto hidden;
     padding: 3px;
   }
   .katex-html .base {
     margin-block: 0;
     margin-inline: auto;
   }
   .katex-html .tag {
     position: relative !important;
     display: inline-block;
     padding-inline-start: 0.5rem;
   }

   css

   code

常见问题和解决方案：

• CSS 样式问题

  问题：如果未加载 KaTeX CSS，LaTeX 公式可能无法使用正确的样式渲染。

  解决方案：确认 KaTeX 样式表链接正确放置在 HTML 头部，并且加载没有问题。检查是否有网络错误或限制导致 CSS 无法加载。

• 构建错误

  问题：处理 LaTeX 语法时构建时出错。

  解决方案：确保您的 LaTeX 格式正确，并且您的 markdown 文件中没有语法错误。LaTeX 语法错误会破坏解析器并导致构建失败。