修改样式增加页脚链接图标

quartz配置

需求：图标和相应的文本链接对齐，但链接之间可以并排展示，用空格隔开。

1. 修改 Footer.tsx

我们将每个链接的 li 元素内联显示，确保图标和文本链接在同一行，同时链接之间用空格隔开。

import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
import style from "./styles/footer.scss"
import { version } from "../../package.json"
import { i18n } from "../i18n"
 
interface FooterLink {
  label: string
  url: string
  icon?: string
}
 
interface Options {
  links: FooterLink[]
}
 
export default ((opts?: Options) => {
  const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
    const year = new Date().getFullYear()
    const links = opts?.links ?? []
    return (
      <footer class={`${displayClass ?? ""}`}>
        <p>
          {i18n(cfg.locale).components.footer.createdWith}{" "}
          <a href="https://quartz.jzhao.xyz/">Quartz v{version}</a> © {year}
        </p>
        <ul class="footer-links">
          {links.map((link, index) => (
            <li key={index} style={{ display: 'inline', marginRight: '16px' }}>
              <a href={link.url} target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center' }}>
                {link.icon && <img src={link.icon} alt={`${link.label} icon`} style={{ marginRight: '8px', width: '16px', height: '16px' }} />}
                {link.label}
              </a>
            </li>
          ))}
        </ul>
      </footer>
    )
  }
 
  Footer.css = style
  return Footer
}) satisfies QuartzComponentConstructor

2. 调整样式

在 footer.scss 文件中添加样式，确保链接之间用空格隔开，并且图标和文本链接在同一行。

/* quartz/components/styles/footer.scss */
 
footer {
  ul.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  ul.footer-links li {
    display: inline;
    margin-right: 16px; /* 间隔 */
  }
  ul.footer-links a {
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
  }
  ul.footer-links a img {
    margin-right: 8px;
    width: 16px;
    height: 16px;
  }
}

3. 更新 quartz/layout.ts

在 quartz/layout.ts 中更新 sharedPageComponents 配置，使用指定的图标链接。

import { PageLayout, SharedLayout } from "./quartz/cfg";
import * as Component from "./quartz/components";
import Footer from "./quartz/components/Footer";
 
// components shared across all pages
export const sharedPageComponents: SharedLayout = {
  head: Component.Head(),
  header: [],
  afterBody: [
    Component.Comments({
      provider: 'giscus',
      options: {
        // from data-repo
        repo: 'zzzzzllllllaaaa/hy',
        // from data-repo-id
        repoId: 'R_kgDOMnTYoA',
        // from data-category
        category: 'Announcements',
        // from data-category-id
        categoryId: 'DIC_kwDOMnTYoM4Ch4Np',
      }
    }),
  ],
  footer: Footer({
    links: [
      {
        label: "赣ICP备2024041153号",
        url: "https://beian.miit.gov.cn/",
        icon: "https://example.com/path/to/icon1.png" // 替换为外部图标链接
      },
      {
        label: "先空着",
        url: "",
        icon: "https://example.com/path/to/icon2.png" // 替换为外部图标链接
      },
      {
        label: "先空着2",
        url: "",
        icon: "https://example.com/path/to/icon3.png" // 替换为外部图标链接
      },
    ]
  }),
}
 
// components for pages that display a single page (e.g. a single note)
export const defaultContentPageLayout: PageLayout = {
  beforeBody: [
    Component.Breadcrumbs(),
    Component.ArticleTitle(),
    Component.ContentMeta(),
    Component.TagList(),
  ],
  left: [
    Component.PageTitle(),
    Component.MobileOnly(Component.Spacer()),
    Component.Search(),
    Component.Darkmode(),
    Component.DesktopOnly(Component.Explorer()),
  ],
  right: [
    Component.Graph(),
    Component.DesktopOnly(Component.TableOfContents()),
    Component.Backlinks(),
  ],
}
 
// components for pages that display lists of pages  (e.g. tags or folders)
export const defaultListPageLayout: PageLayout = {
  beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
  left: [
    Component.PageTitle(),
    Component.MobileOnly(Component.Spacer()),
    Component.Search(),
    Component.Darkmode(),
    Component.DesktopOnly(Component.Explorer()),
  ],
  right: [],
}