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.
export const integ: IntegrationUserConfig = {
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'
}
},
}
tsFriend Links#
The friend links configurations are at 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
}
]
}
jsonIntegrated with Friend-Circle-Lite
#
Friend-Circle-Lite ↗ is a stripped-down friendlink app with no backend and running only using github action.
It requires:
- A github repository with github actions enabled by cron.
- 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.
-
Fork the Friend-Circle-Lite ↗.
-
Modify the
config.yaml
in your forked repository:config.yaml
yamlspider_settings: enable: true json_url: "<your-site>/links.json" article_count: 4
-
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.
-
Checkout docs ↗ to deploy the server files to your static site server.
-
Add fetching script file
friendCircle.ts
↗ to your project at pathsrc/plugins
. -
Add style file
fc.css
↗ to your project at pathsrc/assets/styles
. -
Add initialize code in
src/components/pages/links/index.astro
:src/components/pages/links/index.astro
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>
See more docs