Discourseカスタマイズ

WEB Design
#1

discourse-footer.png1155×741 61.1 KB 

<div id="bottom-navbar" class="wrap" style="height:20px; padding-top:15px; padding-bottom:30px;">
<span id="bottom-navbar-links">
  <a href="http://ficus.myvnc.com">ホーム</a> | 
  <a href="http://ficus.myvnc.com/ja/info/news">ニュース</a> | 
  <a href="http://ficus.myvnc.com/ja/blog">ブログ</a> | 
  <a href="https://ficus.myvnc.com/store">ストア</a>
</span>
</div>
#2

highlight.jsを導入してコード記述箇所を色分けします。

注） インストールする前に以下設定をしないとブランクページとなります。

設定--->設定項目を検索--->"theme_authorized_extensions"を入力
"css"を追加します。

Hljs Theme Picker cssカスタマイズ

"Edit CSS/HTML"をクリック

hljs_theme
hljs_theme1132×517 48.2 KB

以下のブロックを追加し、paddingを1.25emで指定します。

.hljs {
    padding: 1.25em !important;
}

注） テーマをアップデートすると上記設定はリセットされます。

#3

Brand Header Theme Component

以下Font Awsomeによるアイコンリンクには fab- を付加すること。

icons
    fab-twitter,https://twitter.com/Ficus_Online_ST
    fab-github,http://github.com/capitalfuse
#5

トピック・記事のサイトへの埋め込み

最新トピック（投稿）のリスト表示

以下をウェブページへ記述

<script src="https://ficus-forum.myvnc.com/javascripts/embed-topics.js"></script>
            <d-topics-list discourse-url="https://ficus-forum.myvnc.com" template="complete" per-page="4"></d-topics-list>

オプション

`template`: Either `complete` or `basic` (default). While basic is just a list of topic titles, the complete complete brings title, user name, user avatar, created at date, and topic thumbnail.

`per-page`: Number. Controls how many topics to return.

`category`: Number. Restrict topics to a single category. Pass the `id` of the target category

`allow-create`: Boolean. If enabled the embed will have a “New Topic” button.

`tags`: String. Restrict topics to ones associated with this tag.

`top_period`: One of `all, yearly, quarterly, monthly, weekly, daily`. If enabled will return the “Top” topics of the period.

スタイルシートは discouse の管理ページで指定

Screenshot from 2022-09-13 19-54-16
Screenshot from 2022-09-13 19-54-161233×849 85.1 KB 

:root {
    background: transparent;
}

.topic-list-item, tr {
    border-bottom: none;
}

.topics-list .topic-list-item .topic-column-wrapper {
    display: flex;
    flex-direction: column;
}

.topics-list {
    width: 95%;
}

.topics-list .topic-list-item .main-link {
    border-bottom: 1pxsolidvar(--primary-low);
    padding: 0.5rem;
    width: 100%;
    border-bottom: none;
}

.topics-list .topic-list-item .topic-column-wrapper .topic-column.details-column {
    flex-direction: column;
    width: 100%;
}

.topics-list .topic-list-item .topic-column-wrapper .topic-column.featured-image-column .topic-featured-image img {
    max-width: 100%;
    max-height: none;
}

.topics-list .topic-list-item .main-link a {
    color: #dee2e6;
}

.topics-list .topic-list-item .main-link a:visited {
    color: #dee2e6;
}

span.topic-author-username {
    color: #bdbdbd;
    font-size: xx-small;
}

.topics-list .topic-list-item .topic-column-wrapper .topic-column.details-column .topic-last-posted-at, .topics-list .topic-list-item .topic-column-wrapper .topic-column.details-column .topic-created-at, .topics-list .topic-list-item .topic-column-wrapper .topic-column.details-column .topic-stats {
    color: var(--primary-medium);
    font-size: small;
}

Content Security Policy対応

埋め込み先のサイトドメインの登録が必要です。登録しないとスクリプトの実行が拒否されます。
Admin > Customize > Embedding