<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>
highlight.jsを導入してコード記述箇所を色分けします。
注) インストールする前に以下設定をしないとブランクページとなります。
設定--->設定項目を検索--->"theme_authorized_extensions"を入力
"css"を追加します。
Hljs Theme Picker cssカスタマイズ
"Edit CSS/HTML"をクリック
以下のブロックを追加し、paddingを1.25emで指定します。
.hljs {
padding: 1.25em !important;
}
注) テーマをアップデートすると上記設定はリセットされます。
Brand Header Theme Component
以下Font Awsomeによるアイコンリンクには fab- を付加すること。
icons
fab-twitter,https://twitter.com/Ficus_Online_ST
fab-github,http://github.com/capitalfuse
トピック・記事のサイトへの埋め込み
最新トピック(投稿)のリスト表示
以下をウェブページへ記述
<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
の管理ページで指定
: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