Discourse Qingwa Timelines - 美しいタイムラインレイアウトのためのカスタムBBCode

:information_source: 概要 美しいタイムラインレイアウトを作成するためのDiscourseテーマコンポーネント
:eyeglasses: プレビュー https://meta.appinn.net/t/topic/76953
:hammer_and_wrench: リポジトリ GitHub - scavin/discourse-qingwa-timelines
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマ初心者の方へ Discourseテーマ使用の初心者ガイド

このテーマコンポーネントをインストール

Discourseコミュニティにエレガントなタイムラインレイアウトを追加する新しいテーマコンポーネントを共有できることを嬉しく思います!

これはLLMの支援を受けて構築された、私の最初のテーマコンポーネントです。

それは何ですか?

Discourse Timelines は、美しいミニマリストなタイムラインレイアウトを作成するためのカスタムBBCode [timelines]...[/timelines] を実装するテーマコンポーネントです。プロジェクトロードマップ、ステップバイステップガイド、会社の歴史、章の区切りなどに最適です。

公開されたタイムラインエフェクト

コンポーザートップバーボタン

Markdownエディタビュー

主な機能

:white_check_mark: カスタムBBCode - 簡単な[timelines]構文
:white_check_mark: コンポーザートップバーボタン - タグを手動で入力する必要はありません(新しいエディタのブラケットエスケープ問題を解決!)
:white_check_mark: 美しいデザイン - クリーンでミニマリストな美学を持つ垂直グラデーションライン
:white_check_mark: Markdownサポート - タイムライン内のすべてのフォーマットを保持します
:white_check_mark: 多言語対応 - 9言語(EN、ZH_CN、ZH_TW、DE、ES、FR、JA、KO、RU)の組み込み翻訳
:white_check_mark: テーマ互換性 - ライトモードとダークモードの両方で動作します
:white_check_mark: カスタマイズ可能 - 管理設定で色を簡単に変更できます
:white_check_mark: レスポンシブ - モバイルフレンドリーなレイアウト
:white_check_mark: 安全 - XSS保護が組み込まれています
:white_check_mark: 依存関係なし - DiscourseネイティブAPIのみを使用します

使用方法

ツールバーボタンを使用する(最も簡単!)

  1. コンポーザーを開きます
  2. 「+」(オプション) メニューボタンをクリックします
  3. 「タイムラインを挿入」 を選択します
  4. コンテンツを編集します
  5. 公開します!

ツールバーボタンは、新しいDiscourseエディタが手動で入力された角括弧を自動的にエスケープする問題を解決します。

構文例

[timelines]
## 2024年1月 - プロジェクトローンチ
プロジェクトが正式に開始され、チームが編成されました。
​
## 2024年3月 - 初回リリース
コア機能の開発が完了し、ベータテストが開始されました。
​
## 2024年6月 - バージョン2.0
新機能を含むメジャーアップデート:
- 機能A
- 機能B
- 機能C
[/timelines]

カスタマイズ

すべての色はテーマ設定でカスタマイズできます:

  • timeline_gradient_start - 上部のグラデーションカラー(デフォルト:#ff7a18
  • timeline_gradient_end - 下部のグラデーションカラー(デフォルト:#ffb800
  • timeline_heading_color - 見出しテキストカラー(デフォルト:#d96d14
  • timeline_dot_color - タイムラインドットカラー(デフォルト:#ff7a18
  • timeline_heading_color_dark - ダークモードの見出しカラー(デフォルト:#ff9854
  • timeline_dot_border_color_dark - ダークモードのドット境界線(オプション)

このコンポーネントがお役に立てば幸いです!ご質問、フィードバック、提案がありましたら、お気軽にお知らせください。 :blush:

「いいね!」 20

これは非常に優れたコンポーネントです!非常に便利です。

「いいね!」 3

写真や動画もサポートしていますか?

はい、画像と動画の両方をサポートしています。

簡単なデモはこちらです[DEMO LINK]

Screen-20251114144915@2x
Screen-20251114144924@2x

「いいね!」 1

実に甘い。素晴らしい仕事ぶりです!