こんにちは。複数のトピックでフォーラムをスパムしたくなかったので、Discourse フォーラムの新しいユーザー/メンバーとして、ここに 4 つの主要な質問があります。
1) ウェブサイトからソーシャルメディアの痕跡をすべて削除する方法はありますか？
Discourse に組み込まれているのか、それともテーマ固有のものなのかはわかりませんが、ソースコードを見ると、各ページに Twitter が 5 回、Facebook が 1 回言及されています (ソースを表示した場合)。それらは次のとおりです。
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://forums.mysite.me/uploads/default/original/1X/9c81453y45yh45ha81cedd21d3cf20.png" />
<meta name="twitter:url" content="https://forums.mysite.me/" />
<meta name="twitter:title" content="SiteTitle" />
<meta name="twitter:description" content="Site Description Is Here" />
そして <div class="hidden" id="data-preloaded" data-preloaded= の下に、Facebook の言及は次のとおりです: "facebook_app_id"。私のサイトはプライバシーを重視しているため、それらがサイトにあるのは良い印象ではありません。
Remove All Traces of Social Media On My Website? で再度質問しました。
2) SCSS の @import はどのように機能しますか？ Air Theme をカスタマイズしようとしていたところ、GitHub ページでデスクトップ用の CSS が次のようになっていることに気づきました。
@import "showcased-categories";
@import "chat-desktop";
@import "sidebar-desktop";
そこで、独自のテーマを作成し、それをテーマの [CSS/HTML の編集] → [デスクトップ] セクションに含めようとしましたが、そのエントリを保存しようとすると、次のエラーが発生しました。
そして、@import がどのように機能するのか、まったく理解できません。VPS の Discourse インストールサーバーに入り、「scss」という名前のフォルダーを作成し、そのコードがインポートしようとしているファイルをそこに配置し、フォーラムを再起動しましたが、それでも機能しませんでした。
3) VPS サーバーが再起動した場合、フォーラムが自動的に再起動するようにするにはどうすればよいですか？サーバーは Ubuntu 22.04 です。調査中に、このフォーラムの この返信 を見つけましたが、それに従いましたが、そのコメントが示唆するように、インストールページにその方法の指示が見当たらないため、私は盲目になっているに違いありません。
4) フォーラム全体を少し下に移動するにはどうすればよいですか？デスクトップでは問題ありませんが、モバイルでは、この投稿の下のコメント (新しいユーザーは 1 つの投稿につき 1 つのスクリーンショットしか追加できないため、おそらく) のように、丸いエッジがトップバーに当たって表示されます。
テーマの CSS の [Head] セクションに改行タグ (<br>) を追加しようとしましたが、トップナビゲーションバーを含むすべてが下に移動してしまい、トップナビゲーションバーは上に留めておきたいです。
今のところ、質問は以上だと思います。ありがとうございます。
上記の #4 に関して、参照していたスクリーンショットはこちらです。
こんにちは、Metaへようこそ 
-
ご質問に対する回答はありません。しかし、私が間違っている可能性もあります。これらのOpenGraphメタとfacebook_app_idがプライバシーの問題であるとは思いません。 
誰か他の人がより良い洞察を提供してくれることを願っています。
-
あなたはリモートテーマを作成しませんでした。それはGitHubリポジトリにあります。scssディレクトリにCSSを複数のファイルに分割するなど、ファイルを作成できます。その後、@importは自動的にこのディレクトリを参照します。
管理画面でテーマを手動で作成した場合は、それができません。
リモートテーマをカスタマイズしたい場合は、テーマコンポーネントを作成し、Air Themeにアタッチして、必要なCSSを追加できます。これらのファイルをインポートする必要はありません。ただし、カスタマイズに必要なSCSS関数/ミックスインをコピーする必要がある場合があります（例: discourse-air/scss/sidebar-desktop.scss at main · discourse/discourse-air · GitHub
テーマの詳細については、Developing Discourse Themes & Theme Components を参照してください。
-
Falcoが言ったように、デフォルトでは、標準のインストールに従っていれば、Dockerは常に再起動時に起動します。デフォルトの動作であるため、見つけるべき指示はありません。フォーラムが再起動時に起動しなかったことを確認できますか？
-
まず、セーフモードを有効にした場合にすべて正しく表示されますか？これはカスタマイズに関連していないことを確認するためです。それが問題の解決策を見つけるための最初のステップになります。
「いいね！」 1
返信ありがとうございます。4番についてですが、CSSの問題か何かだと仮定しており、モバイルサイトが見栄えが悪くならないように隙間をどのように追加すればよいかわかりません。セーフモードをオンにしても、（最初のオプションのチェックを外した状態で）同じことが起こります。
1番についてですが、「プライバシーの問題」とは言えないかもしれませんが、とにかくソーシャルメディアへの言及をどこにも載せたくありません。
2番：ああ、なるほど、面白いですね…5時間ほど前に編集していたコンポーネントでそれをしましたが、テーマではそのように機能するとは知りませんでした。すぐに試してみます。
うーん…VPSが起動してもDockerが自動的に起動しませんでした。奇妙です。
「いいね！」 1
thoka
(Thomas Kalka)
5
うーん。もしもっと多くの人がこの道を進むなら、フォーラムは使えないスレッドタイトルでスパム状態になるでしょう。
「いいね！」 5
@Question42 さん、問題ごとにトピックを1つ作成していただけると幸いです。そうすることで、トピックのタイトルがより関連性の高いものになるだけでなく、人々が意見を表明しやすくなり、将来同様の問題を検索する人にとっても、より明確になります。
「いいね！」 3
2番目のポイントに関する2番目のコメントをすぐに確認します。
Airテーマをフォークし、自分で変更を加え、独自のレポジトリにアップロードし、管理パネルのテーマセクションにあるGitHubリンクでインストールしました。しかし、現在は非ローカルテーマになっているため、CSS/HTMLにアクセスできません。この問題を回避するにはどうすればよいですか？それとも、言及されたコンポーネントを使用する必要がありますか？
GitHubからインポートしたテーマでローカルのCSS/HTMLを編集する方法はありませんか？ローカルでは、管理パネルでCSS/HTMLを簡単に編集できましたが、@importの処理はできませんでした。しかし、言及されたリモート処理を行ったところ、テーマを編集して@importコードを追加できなくなりました。これが今回の目的でした。
bryce
(Bryce Huhtala)
8
#4について：
.list-controls クラスに上部のマージンを追加してみてください。
// モバイルCSSの場合
.list-controls {
margin-top: 1rem;
}
モバイル.scss ファイルで .list-controls に言及しているのは次のとおりです。
.categories-list .list-controls {
background: var(--secondary);
padding: 0.5em;
border-radius: 8px;
}
.list-controls .nav-pills {
li.navigation-toggle {
border-radius: 8px;
border: none;
background-color: var(--secondary);
a:hover,
a:focus {
color: var(--primary);
background-color: var(--secondary);
}
}
どちらにコードを挿入すればよいですか？
bryce
(Bryce Huhtala)
10
最初のセレクター内に配置できます。
または、別の選択肢として、この部分：
.list-controls .nav-pills {
li.navigation-toggle {
border-radius: 8px;
border: none;
background-color: var(--secondary);
a:hover,
a:focus {
color: var(--primary);
background-color: var(--secondary);
}
}
}
次のように書き直すことができます。
.list-controls {
.nav-pills {
li.navigation-toggle {
border-radius: 8px;
border: none;
background-color: var(--secondary);
a:hover,
a:focus {
color: var(--primary);
background-color: var(--secondary);
}
}
}
}
その後、.nav-pills の前に .list-controls にのみ影響する新しい宣言を配置できます。
以下を追加して、全体がこのようになるようにできますか？
.list-controls {
margin-top: 1rem;
}
.list-controls {
margin-top: 1rem;
.nav-pills {
li.navigation-toggle {
border-radius: 8px;
border: none;
background-color: var(--secondary);
a:hover,
a:focus {
color: var(--primary);
background-color: var(--secondary);
}
}
}
bryce
(Bryce Huhtala)
12
その通りです！ただし、最後にもう一つ } が必要そうです。
モバイルではこうなります。
残念ながら、これにより「Top/Reply/Activity」バー/エリアが投稿に触れなくなり、「Latest」タブがトップに触れるようになりました。「Latest」ドロップダウンボックスがトップバーに触れないようにしつつ、「Top/Reply/Activity」エリアが投稿エリアに触れるようにすることは可能でしょうか？
問題があったにもかかわらず、「Latest」エリアは元のスクリーンショットで示されているように、トピックエリアと統合されて見栄えが良かったです。
編集：あらら…友人に携帯電話（iPhone 13）でサイトを確認してもらったところ、携帯電話ではサイトが台無しに見えるようです（笑）…うーん しかし、私の携帯電話では（修正したい点を除いて）「問題なく」見えます。彼らの携帯電話では通常のモバイルビューは問題なく見えますが、携帯電話でデスクトップモードにするとすべてが乱雑に見えます。
bryce
(Bryce Huhtala)
14
うーん、テーマに影響を与えている他のスタイルを特定するのは難しいですね。まだご覧になっていない場合は、このガイドを確認することをお勧めします。特に、ブラウザのインスペクター（ChromeではF12でアクセスできる開発者ツール）の使用方法に関する部分です。これにより、各要素に適用されているスタイルを確認し、オン/オフを切り替えてリアルタイムでの違いを確認できます。
モバイル表示に関連しているので、ほとんどのブラウザでデスクトップからモバイルをエミュレートできます。Chromeでのボタンの外観は次のとおりです。
「いいね！」 1
Firepup650
(Firepup Sixfifty)
15
それは予想されることではないでしょうか？デスクトップモードは、実際にはモバイルデバイス向けではありません。
「いいね！」 1
