前言#
这边对于当前使用的主题做了一些小修改，记录一下修改的内容，希望可以帮助到大家 || 如果有地方出错了，也请积极讨论，我是菜鸡 ||
Warning
提示
修改部分仅个人喜好，如果有不一样的想法欢迎在评论区讨论
修改顶部导航栏信息展示#
相关文件路径在 src\componets\layout\header\config.ts
文件中的 headerMenuConfig 中定义了导航栏的显示与顺序，自行修改即可
比如这边将友链移出了二级
优化高度过长的图片显示时的页面效果#
如果图片高度过长会占满整个页面，可能在浏览时一整页都是图片，对于过高的图片显示效果不好，我们可以通过使用 css 中的 max-height 去限制元素的高度显示
在 src\components\ui\image\ZoomedImage.tsx 中找到以下部分，并添加 max-height max-h-[70vh] w-auto object-contain 来让图片的最大高度不会超过 70% （参数可自行调整），宽度保持自适应，图片会完整显示不会被裁剪
const styles = tv({
base: 'rounded-xl overflow-hidden text-center inline-flex items-center justify-center duration-200 max-height max-h-[70vh] w-auto object-contain',
variants: {
status: {
loading: 'hidden opacity-0',
loaded: 'opacity-100 block',
error: 'hidden opacity-0',
},
},
})
::: grid {cols=2, rows=1, gap=4, type=images}
:::
增强 alert 组件，支持自定义 title#
Shiro 扩展的 markdown 语法内增加了 github alert，但是其限制了标题的显示上只能是 NOTE、IMPORTANT、WARNING、TIP、CAUTION
由于本人使用的是 Obsidian 编辑 Markdown 文件，其中的 alert 可以支持自定义标题样式，语法如下
> [!WARNING] 任意标题文本
> 其他文本内容
2025.7.8 更新，innei 佬更新了 blockquote 和 alert 的处理，原有方式作废啦！
于是使用了 Claude 帮忙修改了文件，实现了同样的效果
src\components\ui\markdown\parsers\blockquote.tsx
import React, { Children, cloneElement, useMemo, type FC, type ReactNode } from 'react';
import { GitAlert } from './alert';
const getNodeText = (node: ReactNode): string =>
node == null
? ''
: typeof node === 'string' || typeof node === 'number'
? node.toString()
: Array.isArray(node)
? node.map(getNodeText).join('')
: React.isValidElement<{ children?: ReactNode }>(node)
? getNodeText(node.props.children)
: '';
export const MBlockQuote: FC<{ className?: string; children: ReactNode; alert?: string }> = ({
className,
children,
alert,
}) => {
if (alert) return <GitAlert type={alert}>{children}</GitAlert>;
const { isAlert, alertType, title, content } = useMemo(() => {
const childrenArray = Children.toArray(children);
const firstText = getNodeText(childrenArray[0]).trim();
const alertMatch = firstText.match(/^\[!(\w+)\](?:\s(.*))?/);
if (!alertMatch) return { isAlert: false, alertType: '', title: undefined, content: childrenArray };
const [_, type, customTitle] = alertMatch;
const contentNodes = childrenArray.map((child, i) => {
if (i === 0 && React.isValidElement<{ children?: ReactNode }>(child)) {
const internalChildren = Children.toArray(child.props.children);
if (typeof internalChildren[0] === 'string') {
const text = internalChildren[0].replace(/^\s*\[!(\w+)\]\s*[^\n]*\n?/, '');
return cloneElement(child, { key: 'first-child-content' }, text, ...internalChildren.slice(1));
}
}
return child;
});
return { isAlert: true, alertType: type.toUpperCase(), title: customTitle?.trim(), content: contentNodes };
}, [children]);
return isAlert ? (
<GitAlert type={alertType} title={title}>
{content}
</GitAlert>
) : (
<blockquote className={className}>{children}</blockquote>
);
};
src\components\ui\markdown\parsers\alert.tsx
CAUTION: FluentShieldError20Regular,
}
const AlertIcon: FC<{
type: keyof typeof typedIconMap
title?: string
}> = ({ type, title }) => {
const finalType = type || 'NOTE'
const Icon = typedIconMap[finalType] || typedIconMap.NOTE
const typePrefix = title || (finalType[0] + finalType.toLowerCase().slice(1));
return (
<span
@@ -57,9 +58,8 @@ export const AlertIcon: FC<{
)
}
export const GitAlert: FC<{ type: string; title?: string; children: React.ReactNode }> = (props) => {
const { type, title, children } = props
const upperType = type.toUpperCase() as keyof typeof borderColorMap
return (
<blockquote
@@ -71,10 +71,10 @@ export const GitAlert = (props: { type: string; text: string }) => {
'not-italic',
)}
>
<AlertIcon type={upperType as any} title={title} />
<br />
{children}
</blockquote>
)
}
折叠内容为历史处理方式
```tsx import clsx from 'clsx' import type { MarkdownToJSX } from 'markdown-to-jsx' import { blockRegex, Priority } from 'markdown-to-jsx' import type { FC } from 'react'import {
FluentShieldError 20 Regular,
FluentWarning 28 Regular,
IonInformation,
} from '~/components/icons/status'
import { Markdown } from '../Markdown'
const textColorMap = {
NOTE: 'text-blue-500 dark: text-blue-400',
IMPORTANT: 'text-accent',
WARNING: 'text-amber-500 dark: text-amber-400',
TIP: 'text-green-500 dark: text-green-400',
CAUTION: 'text-red-500 dark: text-red-400',
} as any
const borderColorMap = {
NOTE: 'before: bg-blue-500 before: bg-blue-400',
IMPORTANT: 'before: bg-accent',
WARNING: 'before: bg-amber-500 dark:before: bg-amber-400',
TIP: 'before: bg-green-500 dark:before: bg-green-400',
CAUTION: 'before: bg-red-500 dark:before: bg-red-400',
} as any
const typedIconMap = {
NOTE: IonInformation,
IMPORTANT: FluentWarning 28 Regular,
WARNING: FluentShieldError 20 Regular,
TIP: IonInformation,
CAUTION: FluentShieldError 20 Regular,
}
export const AlertIcon: FC<{
type: keyof typeof typedIconMap
title?: string // 定义 title
}> = ({type, title}) => { // 增加 title
const finalType = type || 'NOTE'
const Icon = typedIconMap[finalType] || typedIconMap. NOTE
const typePrefix = title || (finalType [0] + finalType. toLowerCase (). slice (1)) // 如果 title 有值则获取 title，否则跟之前一样
return (
<span
className={clsx ('mb-1 inline-flex items-center', textColorMap[finalType])}
>
<Icon
className={clsx (
shrink-0 text-3 xl md: mr-2 md: self-start md: text-left,
typedIconMap[finalType] || typedIconMap. NOTE,
)}
/>
{typePrefix}
</span>
)
}
/**
-
[!NOTE]
-
Highlights information that users should take into account, even when skimming.
/
const ALERT_BLOCKQUOTE_R =
/^(> \ [!(?NOTE|IMPORTANT|WARNING|TIP|CAUTION)](?.?)) (?<body>(?:\n >.)*)(?=\n {2,}|$)/// 修改正则表达式，增加 title 的获取
export const AlertsRule: MarkdownToJSX. Rule = {
match: blockRegex (ALERT_BLOCKQUOTE_R),
order: Priority. HIGH,
parse (capture) {
return {
raw: capture[0],
parsed: {
… capture. groups,
},
} as any
},
react (node, output, state) {
const {type, body, title} = node. parsed // 增加 title
let first = true // 控制 replace 的替换逻辑，第一行去除 >, 其余行替换为
const bodyClean = body. replace (/^> */gm, (match: string) => first ? (first = false, '') : '
'). trim () // 替换逻辑修改
return (
<blockquote
className={clsx (borderColorMap[type], 'not-italic')}
key={state. key}
>
<!--增加title解析，调整换行逻辑-->
<AlertIcon type={type as any} title={title} />
<Markdown
allowsScript
className="not-prose w-full [&>p: first-child]: mt-0"
>
{bodyClean}
</Markdown>
</blockquote>
)
},
}
</details>
修改后就可以实现以下效果
```text
<div />第 1 种
> [!WARNING] 任意标题文本
> 其他文本内容
<div />第 2 种
> [!NOTE] 任意标题文本
> 其他文本内容
<div />第 3 种
> [!NOTE]
> 原始方式
Warning
任意标题文本
其他文本内容
Note
任意标题文本
其他文本内容
Note
原始方式
此文由 Mix Space 同步更新至 xLog
原始链接为 https://blog.lolita.best/posts/blog/ShiroModifySumika