其他集成

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 布局中（在本主题中应位于 BlogPost.astro 文件中）引入 KaTeX CSS。添加以下 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}/katex@0.16.15/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 head 中，并且加载无误。检查网络错误或可能阻止 CSS 加载的限制。

• 构建错误

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

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