SumikaNya

SumikaNya

首頁封存

對 Shiro 主題的一些修改

72
AI 翻譯
這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文
AI 生成的摘要
這篇文章記錄了對當前主題的一些個人修改，並希望能幫助到其他人。主要的修改包括： 1. **導航欄信息展示**：在 `src/components/layout/header/config.ts` 中修改 `headerMenuConfig` 以調整導航欄的顯示與順序。 2. **圖片顯示優化**：為了改善過高圖片的顯示效果，使用 CSS 的 `max-height` 限制圖片的最大高度為 70vh，保持寬度自適應，確保圖片不會被裁剪。 3. **增強 alert 組件**：支持自定義標題，原有的 alert 標題限制被更新，允許使用者在 Obsidian 中自定義標題樣式。 4. **更新代碼**：對於 Markdown 的處理進行了代碼更新，以支持新的 alert 標題格式，並使用 Claude 協助修改了相關文件。 這些修改旨在提升使用者的體驗，並鼓勵其他人提出建議或進行討論。

前言#

這邊對於當前使用的主題做了一些小修改，記錄一下修改的內容，希望可以幫助到大家 || 如果有地方出錯了，也請積極討論，我是菜雞 ||

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, 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]
> 原始方式
第 1 種

Warning

任意標題文本
其他文本內容

第 2 種

Note

任意標題文本
其他文本內容

第 3 種

Note

原始方式

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

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。