如何在 AstroPaper 中新增社交圖標

新的熱門平台？互聯網的小眾角落？還是特定於您的區域？這篇文章將指導您如何將新的社交圖標添加到主題中。

目錄

合併回主題

主題的維護者 Sat Naing 表示他打算只

保持項目僅支持一組特定的流行社交圖標。

所以您的圖標可能不會在倉庫中，但不用擔心，添加自己的圖標非常簡單！

匹配設置

主題使用的圖標集來自 Tabler，其中有很多品牌圖標。

以示例添加您的圖標

在本指南中，我們將使用 StackOverflow 圖標作為示例。

找到圖標

在這種情況下，我們將使用 StackOverflow 作為示例。

在 Tabler 上搜索 ‘StackOverflow’ 我們得到一個圖標 https://tabler.io/icons/icon/brand-stackoverflow，我們需要 svg 代碼，所以保存它以備後用。

<svg
  xmlns="http://www.w3.org/2000/svg"
  class="icon icon-tabler icon-tabler-brand-stackoverflow"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  stroke-width="2"
  stroke="currentColor"
  fill="none"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  <path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-1" />
  <path d="M8 16h8" />
  <path d="M8.322 12.582l7.956 .836" />
  <path d="M8.787 9.168l7.826 1.664" />
  <path d="M10.096 5.764l7.608 2.472" />
</svg>

清理

我們需要對主題提供的內容進行一些整理。

1. 移除所有類別，除了 icon-tabler
2. 移除寬度和高度
3. 移除 viewBox
4. 移除 stroke-width
5. 移除 stroke
6. 移除 fill

這應該會留下以下內容

<svg
  xmlns="http://www.w3.org/2000/svg"
  class="icon-tabler"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
  <path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-1" />
  <path d="M8 16h8" />
  <path d="M8.322 12.582l7.956 .836" />
  <path d="M8.787 9.168l7.826 1.664" />
  <path d="M10.096 5.764l7.608 2.472" />
</svg>

現在我們可以將清理過的 svg 代碼添加到 src/assets/socialIcons.ts 文件中的 SocialIcons。

const socialIcons = {
  /* others */
  StackOverflow: `<svg
       xmlns="http://www.w3.org/2000/svg"
       class="icon-tabler"
       stroke-linecap="round" stroke-linejoin="round"
     >
       <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
       <path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-1" />
       <path d="M8 16h8" />
       <path d="M8.322 12.582l7.956 .836" />
       <path d="M8.787 9.168l7.826 1.664" />
       <path d="M10.096 5.764l7.608 2.472" />
     </svg>`,
};

最後，我們可以在 src/config.ts 中的 SOCIALS 配置它。設置 active: true 以將其添加到網站。

export const SOCIALS: SocialObjects = [
  /* others */
  {
    name: "StackOverflow",
    href: "https://stackoverflow.com/search?q=astropaper",
    linkTitle: `查看 ${SITE.title} 在 StackOverflow 上的相關問題`,
    active: true,
  },
];

確保 href 和 linkTitle 已更新為相應的鏈接和標籤。

上述步驟的完整代碼可以在 此拉取請求 中找到。