让Yohaku同时展示萌ICP与标准ICP备案

·(已编辑)· / ·

阅读手作

关键洞察

原版的Yohaku只能展示一个ICP，在云函数部分配置:

JSON

{
  "footer": {
    "otherInfo": {
      "date": "2020-{{now}}",
      "icp": {
        "text": "萌 ICP 备 20250030 号",
        "link": "https://icp.gov.moe/?keyword=20250030"
      }
    },
    //....

但是对于既有萌ICP，又有标准ICP备案的情况就左右为难了

通过修改两个文件可以实现展示多个备案号：

在app.config.d.ts的 36 行附近添加新定义的moeicp

TSX

//第 36 行附近
  export interface OtherInfo {
    date: string
    icp?: {
      text: string
      link: string
    }
    moeicp?: {
      text: string
      link: string
    }
  }

在FooterInfo.tsx的 36 行附近添加新定义的moeicp

CodeBlock Loading...

然后把云函数部分的配置改为这样，就能展示两个备案号了

CodeBlock Loading...

使用社交账号登录

原版的Yohaku只能展示一个ICP，在云函数部分配置:

JSON

{
  "footer": {
    "otherInfo": {
      "date": "2020-{{now}}",
      "icp": {
        "text": "萌 ICP 备 20250030 号",
        "link": "https://icp.gov.moe/?keyword=20250030"
      }
    },
    //....

但是对于既有萌ICP，又有标准ICP备案的情况就左右为难了

通过修改两个文件可以实现展示多个备案号：

在app.config.d.ts的 36 行附近添加新定义的moeicp

TSX

//第 36 行附近
  export interface OtherInfo {
    date: string
    icp?: {
      text: string
      link: string
    }
    moeicp?: {
      text: string
      link: string
    }
  }

在FooterInfo.tsx的 36 行附近添加新定义的moeicp

TSX

//第 35 行附近
  const { date: dateRaw, icp } = otherInfo || {}
  const { date: dateRaw, icp, moeicp } = otherInfo || {}
  const displayMoeIcp = moeicp
  
//第 98 行附近
            {(icp || displayMoeIcp) && (
              <div className="mt-0.5 flex flex-wrap items-center gap-4">
                {icp && (
                  <StyledLink external href={icp.link} rel="noreferrer">
                    {icp.text}
                  </StyledLink>
                )}
                {displayMoeIcp && (
                  <StyledLink external href={displayMoeIcp.link} rel="noreferrer">
                    {displayMoeIcp.text}
                  </StyledLink>
                )}
              </div>
            )}

//第 155 行附近
   </span>
        {(icp || displayMoeIcp) && (
          <span className="flex items-center gap-4 text-sm text-neutral-6">
            {icp && (
              <StyledLink external href={icp.link} rel="noreferrer">
                {icp.text}
              </StyledLink>
            )}
            {displayMoeIcp && (
              <StyledLink external href={displayMoeIcp.link} rel="noreferrer">
                {displayMoeIcp.text}
              </StyledLink>
            )}
          </span>
        )}
      </div>

CodeBlock Loading...

然后把云函数部分的配置改为这样，就能展示两个备案号了

JSON

{
  "footer": {
    "otherInfo": {
      "date": "2020-{{now}}",
      "icp": {
        "text": "渝 ICP 备 2025073510 号",
        "link": "https://beian.miit.gov.cn/"
      },
      "moeicp": {
        "text": "萌 ICP 备 20250030 号",
        "link": "https://icp.gov.moe/?keyword=20250030"
      }
    },
    //....

CodeBlock Loading...