A timeless hush before the ink descends.

The morning light reveals the hidden text.

How to Make Yohaku Display Both Moe ICP and Standard ICP Filings Simultaneously - ElvishのBlog

How to Make Yohaku Display Both Moe ICP and Standard ICP Filings Simultaneously

·(edited)· / ·

readsHandmade

AI TranslationSimplified ChineseEnglish

Key Insights

The original Yohaku can only display one ICP filing. Configure it in the cloud function section:

JSON

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

However, it becomes a dilemma when you have both a Moe ICP and a standard ICP filing.

You can display multiple filing numbers by modifying two files:

Add the newly defined moeicp around line 36 in app.config.d.ts:

TSX

// Around line 36
  export interface OtherInfo {
    date: string
    icp?: {
      text: string
      link: string
    }
    moeicp?: {
      text: string
      link: string
    }
  }

Add the newly defined moeicp around line 36 in FooterInfo.tsx:

CodeBlock Loading...

Then, change the cloud function configuration as follows to display both filing numbers:

CodeBlock Loading...

The original Yohaku can only display one ICP filing. Configure it in the cloud function section:

JSON

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

However, it becomes a dilemma when you have both a Moe ICP and a standard ICP filing.

You can display multiple filing numbers by modifying two files:

Add the newly defined moeicp around line 36 in app.config.d.ts:

TSX

// Around line 36
  export interface OtherInfo {
    date: string
    icp?: {
      text: string
      link: string
    }
    moeicp?: {
      text: string
      link: string
    }
  }

Add the newly defined moeicp around line 36 in FooterInfo.tsx:

TSX

// Around line 35
  const { date: dateRaw, icp } = otherInfo || {}
  const { date: dateRaw, icp, moeicp } = otherInfo || {}
  const displayMoeIcp = moeicp
  
// Around line 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>
            )}

// Around line 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...

Then, change the cloud function configuration as follows to display both filing numbers:

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...