友達リンク

Solitude テーマの友達リンクページの設定方法を学びます。

配置页面

Hexo ブログのルートディレクトリでターミナルを開き、以下のコマンドを入力して新しいページを作成します

hexo new page links

创建数据文件

ブログディレクトリの source フォルダに links フォルダが生成され、その中に index.md ファイルが含まれます。 次に、ページの type 値と data 値を追加します。

参考(必要に応じて変更してください):

index.md
---
title: 友情链接
date: 2025-07-13 21:16:15
banner: true
type: links
data: links
---

ブログディレクトリの source フォルダに _data フォルダが生成され、その中に links.yml ファイルが含まれます。

ここでページの内容を設定します。以下のテンプレートを参考にしてください。

友链内容的模板

links.yml
banner_suffix:
links:
  - class_name: フレームワークとテーマ
    descr: このウェブサイトは原フレームワークとテーマを採用しています
    type: card
    suffix:
    link_list:
      - name: Hexo
        link: https://hexo.io/ja/
        avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
        descr: 高速、シンプルで強力なウェブサイトフレームワーク
        topimg: https://s2.loli.net/2024/11/10/Zm5dvbLOUMr9iFk.webp
      - name: 張洪Heo
        link: https://blog.zhheo.com/
        avatar: https://img.zhheo.com/i/67d8fa75943e4.webp
        descr: デザインとテクノロジー生活を共有
        topimg: https://img.zhheo.com/i/67d8fb5f563ff.webp
      - name: Solitude
        link: https://solitude.js.org/
        avatar: https://s2.loli.net/2024/10/10/hOTRIKV4vy6EMf2.webp
        descr: Hexo 用のカード UI テーマ
        topimg: https://s2.loli.net/2025/01/21/RcNxQMy6mfliXtS.png
  - class_name: 友達
    descr: いくつかのかわいい友達🥰
    type: item
    suffix:
    link_list:
      - name: ❖星港◎Star☆
        link: https://blog.starsharbor.com
        avatar: https://bu.dusays.com/2025/04/11/67f92f6fcfb26.webp
        descr: ブログで生活と愛を記録!
      - name: Moの記事帳
        link: https://blog.xiowo.net/
        avatar: https://blog.xiowo.net/img/avatar.png
        descr: 万年鸽王,哈哈OvO

ファイル構造参考

フィールド説明

1. グローバル設定

フィールド説明
banner_suffixすべてのバナー画像の統一後ろ

2. 分類配置

フィールド説明オプション値
class_name分類タイトル(H2タイトルとして表示)-
descr分類説明テキスト-
type友達リンク表示タイプcard/item/discn
suffixその分類専用のアバター後ろ-
topimg_suffixその分類専用のトップ画像後ろ-

3. 友達リンク配置

フィールド必須説明形式例
nameウェブサイト名-
linkウェブサイトURL-
avatar✓*アバターURL(card/itemタイプ必須)https://example.com/avt.png
descr簡単な説明-
topimgトップ横幅画像URL(cardタイプのみ必要)-
tag角標ラベルテキスト(VIP/推奨など)VIP/推奨
colorラベル色(vip/speedまたはHEXカラーコード)#ff0000/vip