Wie funktionieren die `@import`s mit SCSS?

Hallo, ich wollte die Foren nicht mit mehreren Themen spammen, daher habe ich hier 4 Hauptfragen als neuer Benutzer/Mitglied von Discourse-Foren:

<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" />

Erneut gefragt unter Remove All Traces of Social Media On My Website?

2) Wie funktionieren die @imports mit SCSS? Während ich das Air Theme anpasste, bemerkte ich auf der GitHub-Seite, dass es CSS für den Desktop gibt, nämlich:

@import "showcased-categories";
@import "chat-desktop";
@import "sidebar-desktop";

Also versuchte ich, mein eigenes Theme zu erstellen und dies in den CSS/HTML-Bearbeitungsbereich meines Themes → Desktop-Bereich einzufügen, aber als ich versuchte, diesen Eintrag zu speichern, erhielt ich:

css1018×283 12.2 KB

3) Wie kann ich die Foren automatisch neu starten lassen, wenn mein VPS-Server neu startet? Der Server ist Ubuntu 22.04. Während meiner Recherche fand ich diesen Beitrag in diesen Foren, aber ich habe getan, was dort steht, und ich muss blind sein, weil ich keine Anweisungen sehe, wie das auf der Installationsseite gemacht wird, wie dieser Kommentar vorschlägt.

4) Wie kann ich mein gesamtes Forum etwas nach unten verschieben? Auf dem Desktop sieht es gut aus, aber auf dem Handy sieht es so aus wie oben im Kommentar unter diesem Beitrag (da neue Benutzer anscheinend nur 1 Screenshot pro Beitrag hinzufügen können), mit den abgerundeten Kanten, die die obere Leiste berühren…

image400×200 19.9 KB

Ich habe versucht, ein Zeilenumbruch-Tag (<br>) im Head-Bereich des Theme-CSS hinzuzufügen, aber das hat alles nach unten verschoben, einschließlich der oberen Navigationsleiste, die oben bleiben soll.

Ich glaube, das sind vorerst alle meine Fragen. Vielen Dank.

Bezüglich Nr. 4 oben ist dies der Screenshot, auf den ich mich bezogen habe:

Screenshot_20240325-160753_Firefox400×200 19.9 KB

Hi, willkommen bei Meta

1. Ich habe keine Antwort auf deine Frage. Ich könnte mich aber irren. Ich glaube nicht, dass diese OpenGraph-Metadaten und die facebook_app_id hier Datenschutzprobleme darstellen. Hoffentlich kann jemand anderes mehr dazu sagen.

2. Du hast kein entferntes Theme erstellt. Es befindet sich in einem GitHub-Repository. Du kannst deine Dateien erstellen, z. B. dein CSS in mehrere Dateien in einem scss-Verzeichnis aufteilen. Dann bezieht sich @import automatisch auf dieses Verzeichnis.

Das kannst du nicht tun, wenn du manuell ein Theme in der Administration erstellst.

Wenn du ein entferntes Theme anpassen möchtest, kannst du eine Theme-Komponente erstellen, sie an das Air-Theme anhängen und beliebiges CSS hinzufügen. Das ist nicht notwendig, um diese Dateien zu importieren. Möglicherweise musst du jedoch SCSS-Funktionen/Mixins kopieren, wenn du sie für deine Anpassungen benötigst (z. B. discourse-air/scss/sidebar-desktop.scss at main · discourse/discourse-air · GitHub).

Weitere Informationen zu Themes findest du hier: Developing Discourse Themes & Theme Components

3. Wie Falco sagte, startet Docker bei einer Standardinstallation immer beim Neustart. Es gibt keine Anweisungen, um das zu finden, da dies das Standardverhalten ist. Kannst du bestätigen, dass dein Forum nicht beim Neustart gestartet ist?

4. Zeigt alles im abgesicherten Modus korrekt an? Nur um sicherzugehen, dass dies nicht mit Anpassungen zusammenhängt. Das wäre der erste Schritt, um das Problem zu ermitteln.

Danke für die Antwort. Bei Nr. 4 gehe ich davon aus, dass es sich um ein CSS-Problem oder so etwas handelt, weshalb ich mir nicht sicher bin, wie ich einen Abstand hinzufügen kann, damit die mobile Website nicht schlecht aussieht. Mit aktiviertem Safe-Mode tritt es immer noch auf (mit der 1. Option nicht angekreuzt).

Bezüglich Nr. 1 sind das vielleicht keine „Datenschutzprobleme“ an sich, aber ich möchte einfach keine Erwähnungen von Socials irgendwo darauf haben.

Nr. 2: Ah, ok, interessant… das habe ich mit einer Komponente gemacht, die ich vor etwa 5 Stunden bearbeitet habe, aber ich wusste nicht, dass das bei Themes so funktioniert. Werde das mal kurz ausprobieren.

Hm… mein Docker ist beim Hochfahren meines VPS nicht automatisch gestartet, seltsam.

Hm. Wenn mehr Leute diesen Weg gehen, wird das Forum mit unbrauchbaren Thread-Titeln zugespammt.

Es wäre am besten, @Question42, wenn Sie pro Problem ein Thema erstellen könnten. Das macht nicht nur die Themaüberschriften viel relevanter, sondern erleichtert es den Leuten auch, sich einzubringen, und ist für jeden, der in Zukunft nach Ähnlichem sucht, viel klarer.

2. Kommentar zu Punkt Nr. 2 ganz kurz:
   Ich habe das Air-Theme geforkt, meine eigenen Änderungen vorgenommen, es in mein eigenes Repository hochgeladen, es mit dem GitHub-Link im Abschnitt “Themes” meines Admin-Panels installiert… aber jetzt kann ich nicht mehr auf CSS/HTML zugreifen, da es sich jetzt um ein nicht-lokales Theme handelt. Wie kann ich das umgehen? Oder muss ich das von Ihnen erwähnte Komponenten-Ding machen?

Es gibt keine Möglichkeit, lokales CSS/HTML mit einem importierten GitHub-Theme zu bearbeiten? Denn zumindest lokal konnte ich das CSS/HTML im Admin-Panel einfach bearbeiten, aber die @import-Sachen konnte ich nicht machen. Aber jetzt habe ich das von Ihnen erwähnte Remote-Ding gemacht und kann das Theme nicht bearbeiten, um die @import-Codes hinzuzufügen, was der Sinn der Sache war.

Bezüglich #4:
Sie könnten versuchen, dem .list-controls-Klassen einen oberen Rand hinzuzufügen.

// in mobile css
.list-controls {
  margin-top: 1rem;
}

image332×387 13 KB

Also, die einzige Erwähnung von .list-controls in meiner mobile.scss-Datei, die ich habe, sind:

.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);
    }
  }

In welche soll ich deinen Code einfügen?

Sie könnten es in den ersten Selektor einfügen.
Oder eine andere Option wäre, dass dieser Teil:

.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);
    }
  }
}

Kann umgeschrieben werden als:

.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);
      }
    }
  }
}

Dann können Sie neue Deklarationen platzieren, die nur .list-controls vor dem .nav-pills-Teil beeinflussen.

Kann ich also Folgendes hinzufügen:

.list-controls {
  margin-top: 1rem;
}

damit das Ganze so aussieht:

.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);
      }
    }
  }

Das stimmt! Obwohl es so aussieht, als ob am Ende noch ein } fehlt.

Hier ist, was es mir auf Mobilgeräten anzeigt:

Screenshot_20240325-184747_Firefox1073×793 87 KB

Leider berührt die Leiste/der Bereich für „Top/Antwort/Aktivität“ die Beiträge nicht mehr und der Tab „Neueste“ berührt nun die Oberseite. Können wir irgendwie dafür sorgen, dass der Bereich „Top/Antwort/Aktivität“ weiterhin den Beitragsbereich berührt, aber die Dropdown-Box „Neueste“ die obere Leiste nicht berührt?

Obwohl es durch die Unordnung verursacht wurde, sah der Bereich „Neueste“ gut aus, als er mit dem Themenbereich zusammengeführt wurde, wie im ursprünglichen Screenshot gezeigt:

98e4a9a087bd8bd4155fcf5fcf4ecfb4aa778378400×200 19.9 KB

EDIT: Oh je… ein Freund hat sich die Seite auf seinem Handy (iPhone 13) angesehen und die Seite sieht jetzt auf seinem Handy ruiniert aus, lol… ähhh Aber auf meinem Handy sieht es „gut“ aus (Screenshot oben, abzüglich der gewünschten Korrekturen). Es sieht so aus, als ob die normale mobile Ansicht auf seinem Handy in Ordnung ist, aber der Desktop-Modus auf dem Handy alles durcheinander bringt.

Hmm, es ist schwer zu sagen, welche anderen Stile Ihr Thema beeinflussen. Ich empfehle Ihnen, sich diesen Leitfaden anzusehen, falls Sie dies noch nicht getan haben, insbesondere die Teile, die die Verwendung des Inspektors des Browsers zeigen (in den Entwicklertools – mit F12 in Chrome aufgerufen). Damit können Sie sehen, welche Stile auf jedes Element angewendet werden und sie ein- und ausschalten, um den Unterschied in Echtzeit zu sehen.\n\nDa es sich um die mobile Ansicht handelt, können Sie die mobile Ansicht auf Ihrem Desktop in den meisten Browsern emulieren. So sieht der Button in Chrome aus:\n

image310×123 6.24 KB

Das wäre zu erwarten, oder? Der Desktop-Modus ist nicht wirklich für Mobilgeräte gedacht.