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://forum.ficusonline.com/javascripts/embed-topics.js"></script>
            <d-topics-list discourse-url="https://forum.ficusonline.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

6

ドメイン変更

Remove old domain name from any site settings

Visit /admin/site_settings and query for any settings that contain the old site name.

Edit Discourse site name in app.yml

:mega: Alternatively, you can run ./discourse-setup again and input the new domain information instead of editing app.yml.

Edit the hostname line in app.yml

From the root directory where you installed Discourse you can run the follow to edit your app.yml file

$ cd /var/discourse
$ sudo nano containers/app.yml

Then find and edit:

## The domain name this Discourse instance will respond to
DISCOURSE_HOSTNAME: 'talk.bar.com'

(Also, if you are using a CDN, turn it off now by commenting out that line in the app.yml. You can turn it back on later.)

After the change, rebuild:

$ sudo ./launcher rebuild app

Once you do this, your site will only respond to the new domain name.

Replace all instances of the old name with the new name in posts

All the existing posts will still refer to the old domain. Let’s fix that:

BEFORE

AFTER

$ sudo ./launcher enter app

then

# discourse remap talk.foo.com talk.bar.com

(If you don’t have discourse binary, you can use the rake version: bundle exec rake posts:remap["talk.foo.com", "talk.bar.com"])

answer its paranoia prompt, and finally

# rake posts:rebake