内容展示
关于内容页面渲染
Shiki 代码#
您可以在配置文件 astro.config.ts 中的 defineConfig.markdown.shikiConfig 处更改转换器。
基本用法#
对于 .astro 文件：
---
import { Code } from 'astro:components'
---
<Code lang='shell' code={`git log --oneline`} />对于 .mdx 和 .md 文件：
```shell
git log --oneline
```添加标题#
start.sh
#!/bin/bash
bun check &
bun dev```shell title="start.sh"
#!/bin/bash
bun check &
bun dev
```显示差异#
支持添加和删除行。
deploy.sh
#!/bin/bash
bun check
bun lint
bun format
# 不需要 vercel 或其他 ci/cd
bun run build
git push```shell title="deploy.sh"
#!/bin/bash
bun check
bun lint
bun format # [!code ++]
# 不需要 vercel 或其他 ci/cd
bun run build # [!code --]
git push
```显示高亮#
<!doctype html><html><head><meta name="color-scheme" content="dark"></head><body style='overflow:hidden'>
<!-- 高亮单行 -->
<p style='text-align:center'>君指先跃动の光は、私の一生不変の信仰に、唯私の超电磁炮永生き！</p>
<!-- 您也可以使用单个注释高亮多行： -->
<canvas id="can" width="400" height="400" style="background:Black;display:block;margin:20px auto;"></canvas>
<script>
var sn=[42,41], dz=43, fx=1, n, score=-1, ctx=document.getElementById("can").getContext("2d"), sz=20;
onkeydown = e => fx = sn[1]-sn[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx) ? fx : n;
function draw(t,c) { ctx.fillStyle=c; ctx.fillRect(t%sz*sz+1,~~(t/sz)*sz+1,sz-2,sz-2); }
!function() { sn.unshift(n=sn[0]+fx);
if (sn.indexOf(n,1)>0||n<0||n>399||fx==1&&n%sz==0||fx==-1&&n%sz==sz-1) return alert("GAME OVER. Score: "+score);
draw(n,"Lime");
if (n==dz) { score++; do{dz=~~(Math.random()*400)}while(sn.indexOf(dz)>=0); draw(dz,"Yellow"); }
else draw(sn.pop(),"Black");
setTimeout(arguments.callee,130);
}(); </script>
</body></html> ```html
<!doctype html><html><head><meta name="color-scheme" content="dark"></head><body style='overflow:hidden'>
<!-- 高亮单行 -->
<p style='text-align:center'>君指先跃动の光は、私の一生不変の信仰に、唯私の超电磁炮永生き！</p> <!-- [!code highlight] -->
<!-- 您也可以使用单个注释高亮多行： -->
<canvas id="can" width="400" height="400" style="background:Black;display:block;margin:20px auto;"></canvas>
<script> // [!code highlight:11]
var sn=[42,41], dz=43, fx=1, n, score=-1, ctx=document.getElementById("can").getContext("2d"), sz=20;
onkeydown = e => fx = sn[1]-sn[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx) ? fx : n;
function draw(t,c) { ctx.fillStyle=c; ctx.fillRect(t%sz*sz+1,~~(t/sz)*sz+1,sz-2,sz-2); }
!function() { sn.unshift(n=sn[0]+fx);
if (sn.indexOf(n,1)>0||n<0||n>399||fx==1&&n%sz==0||fx==-1&&n%sz==sz-1) return alert("GAME OVER. Score: "+score);
draw(n,"Lime");
if (n==dz) { score++; do{dz=~~(Math.random()*400)}while(sn.indexOf(dz)>=0); draw(dz,"Yellow"); }
else draw(sn.pop(),"Black");
setTimeout(arguments.callee,130);
}(); </script>
</body></html>
```内容过时警告#
如果文章足够旧，添加警告消息。
src/layouts/BlogPost.astro
---
// ...
---
<Hero {data} {remarkPluginFrontmatter} slot='header'>
<Fragment slot='description'>
{!isDraft && enableComment && <PageInfo comment class='mt-1' />}
{
Math.floor((Date.now() - new Date(articleDate).getTime()) / 86400000) > 365 && (
<p class='mt-1 text-sm italic text-primary' style='--primary:41 90% 50%'> <!-- [!code ++] -->
本文最后更新已超过一年，部分信息可能已过时。 <!-- [!code ++] -->
</p>
)
}
</Fragment>
</Hero>它将渲染如下：
本文最后更新已超过一年，部分信息可能已过时。