SumikaNya

SumikaNya

主页归档

对 Shiro 主题的一些修改

13
AI 生成的摘要
这篇文章记录了对当前主题的一些个人修改，主要包括以下几点： 1. **导航栏修改**：在 `src/components/layout/header/config.ts` 文件中调整了导航栏的显示顺序，移除了友链的二级展示。 2. **图片显示优化**：通过在 `src/components/ui/image/ZoomedImage.tsx` 文件中添加 CSS 属性 `max-height` 限制图片高度，确保图片不会占满整个页面，最大高度设置为 70vh。 3. **增强 Alert 组件**：支持自定义标题，更新了 Markdown 语法的处理方式，允许用户在 Obsidian 中使用自定义标题样式。 4. **代码实现**：提供了相关代码示例，展示了如何在组件中处理自定义 Alert 和 BlockQuote 的逻辑。 整体上，文章旨在分享个人的主题修改经验，并鼓励读者讨论和交流不同的想法。

前言#

这边对于当前使用的主题做了一些小修改，记录一下修改的内容，希望可以帮助到大家 || 如果有地方出错了，也请积极讨论，我是菜鸡 ||

Warning

提示
修改部分仅个人喜好，如果有不一样的想法欢迎在评论区讨论

修改顶部导航栏信息展示#

相关文件路径在 src\componets\layout\header\config.ts
文件中的 headerMenuConfig 中定义了导航栏的显示与顺序，自行修改即可
比如这边将友链移出了二级
image
image

优化高度过长的图片显示时的页面效果#

如果图片高度过长会占满整个页面，可能在浏览时一整页都是图片，对于过高的图片显示效果不好，我们可以通过使用 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}
图片占满了整个页面
加入了限制 70% 的效果
:::

增强 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 } from 'react';  
import type { FC, ReactNode } from 'react';  
import { GitAlert } from './alert';  
  
const getNodeText = (node: ReactNode): string => {  
  if (node == null) return '';  
  if (typeof node === 'string' || typeof node === 'number') return node.toString();  
  if (Array.isArray(node)) return node.map(getNodeText).join('');  
  if (React.isValidElement<{ children?: ReactNode }>(node)) return getNodeText(node.props.children);  
  return '';  
};  
  
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 elementChildren = childrenArray.filter(React.isValidElement);  
  
    if (elementChildren.length === 0) return { isAlert: false, alertType: '', title: undefined, content: childrenArray };  
  
    const firstChild = elementChildren[0];  
    const alertMatch = getNodeText(firstChild).trim().match(/^\[!(\w+)\](?:\s(.*))?/);  
  
    if (!alertMatch) return { isAlert: false, alertType: '', title: undefined, content: childrenArray };  
  
    const alertType = alertMatch[1].toUpperCase();  
    const customTitle = alertMatch[2]?.trim() || undefined;  
    const contentNodes: ReactNode[] = [];  
      
    if (React.isValidElement<{ children?: ReactNode }>(firstChild)) {  
      const internalChildren = Children.toArray(firstChild.props.children);  
        
      if (internalChildren.length > 0 && typeof internalChildren[0] === 'string') {  
        const contentOnlyText = internalChildren[0].replace(/^\s*\[!(\w+)\]\s*[^\n]*\n?/, '');  
        const modifiedFirstChild = cloneElement(firstChild, { key: 'first-child-content' }, contentOnlyText, ...internalChildren.slice(1));  
        contentNodes.push(modifiedFirstChild);  
      } else {  
        contentNodes.push(firstChild);  
      }  
    }  
  
    contentNodes.push(...elementChildren.slice(1));  
  
    return { isAlert: true, alertType, title: customTitle, content: contentNodes };  
  }, [children]);  
  
  if (isAlert) {  
    return (  
      <GitAlert type={alertType} title={title}>  
        {content}  
      </GitAlert>  
    );  
  }  
  
  return (  
    <blockquote className={className}>  
      {content}  
    </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>  
  )  
}

以下为历史处理

于是对这块部分的正则与解析进行了修改，增强了可自定义 title 的显示，文件路径在 src\components\ui\markdown\parsers\alert.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 {
  FluentShieldError20Regular,
  FluentWarning28Regular,
  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: FluentWarning28Regular,
  WARNING: FluentShieldError20Regular,
  TIP: IonInformation,
  CAUTION: FluentShieldError20Regular,
}

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-3xl 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 =
  /^(> \[!(?<type>NOTE|IMPORTANT|WARNING|TIP|CAUTION)\](?<title>.*?))(?<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的替换逻辑，第一行去除>,其余行替换为<br>
    const bodyClean = body.replace(/^> */gm, (match: string) => first ? (first = false, '') : '<br>').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>
    )
  },
}

修改后就可以实现以下效果，如果有多个 alert 在一起的时候记得中间要用 <div /> 隔开

> [!WARNING] 任意标题文本
> 其他文本内容

> [!NOTE] 任意标题文本
> 其他文本内容

Warning

任意标题文本
其他文本内容

Note

任意标题文本
其他文本内容

此文由 Mix Space 同步更新至 xLog
原始链接为 https://blog.lolita.best/posts/blog/ShiroModifySumika

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。