Back

Friend Links

Configurations for friend links

Basic Configurations#

A basic configuration for friend links is in src/site.config.ts. You can add your friend’s logbook or your own link info.

src/site.config.ts
export const integrationConfig: IntegrationConfig = {
  links: {
    // Friend logbook
    logbook: [
      { date: '2024-07-01', content: 'Lorem ipsum dolor sit amet.' },
      { date: '2024-07-01', content: 'vidit suscipit at mei.' },
    ],
    // Yourself link info
    applyTip: {
      name: siteConfig.title,
      desc: siteConfig.description,
      url: siteConfig.site,
      avatar: siteConfig.site + 'favicon/favicon.ico'
    }
  },
}
ts

The friend links configurations are at public/links.json.

public/links.json
{
  "friends": [
    {
      "id_name": "cf-links",
      "desc": "Common links included in circle friends",
      "link_list": [
        { 
          "name": "Elysia",
          "intro": "Hi, did you miss me? Anywhere and anytime, Elysia will return all your expectations.",
          "link": "https://honkaiimpact3.fandom.com/wiki/Elysia",
          "avatar": "https://0.gravatar.com/avatar/"
          // Here you can also leave some other fields as notes
        },
      ]
    },
    {
      "id_name": "inactive-links",
      "desc": "Inactive or rule-breaking friends",
      "link_list": [] // you can temporarily leave some bad links here
    },
    {
      "id_name": "special-links",
      "desc": "Other special links",
      "link_list": [] // special links which are note your friends
    }
  ]
}
json

Integrated with Friend-Circle-Lite#

Friend-Circle-Lite ↗ is a stripped-down friendlink app with no backend and running only using github action.

It requires:

  1. A github repository with github actions enabled by cron.
  2. A static site server like Vercel, Netlify, GitHub Pages, etc.

This theme has not integrated it and will not provide support for it in the future. But don’t worry, this doc will guide you to integrate it.

  1. Fork the Friend-Circle-Lite ↗.

  2. Modify the config.yaml in your forked repository:

    config.yaml
    spider_settings:
   enable: true
   json_url: "<your-site>/links.json"
   article_count: 4
    yaml

  3. Go to “Actions” page and run workflow “Friend Circle Lite” manually to check if it works. This will also generate server files in “page” branch.

  4. Checkout docs ↗ to deploy the server files to your static site server.

  5. Add fetching script file friendCircle.ts ↗ to your project at path src/plugins.

  6. Add style file fc.css ↗ to your project at path src/assets/styles.

  7. Add initialize code in src/components/pages/links/index.astro:

    src/components/pages/links/index.astro
    ---
const headings = [
   // ...
   { depth: 2, slug: 'small-circle', text: 'Small Circle' }, 
]
---

<PageLayout>
   {/* ... */}

   <h2 id='small-circle'>Small Circle</h2>
   <div id='friend-circle-lite-root' class='not-prose'>Loading...</div>
   <script>
      import '@/assets/styles/fc.css'

      import { FriendCircle } from '@/plugins/friendCircle'

      const fc = new FriendCircle()
      fc.init({
         private_api_url: '<your-fc-lite-server>',
         page_turning_number: 10,
         error_img: 'https://cravatar.cn/avatar/57d8260dfb55501c37dde588e7c3852c'
      })
      fc.load()
   </script>
</PageLayout>
    astro

See more docs