Come funzionano gli `@import` con SCSS?

[Question42]

Ciao, non volevo intasare i forum con argomenti multipli, quindi ho 4 domande principali qui come nuovo utente/membro dei forum di Discourse:

1) C'è un modo per rimuovere ogni traccia dei social media dal mio sito web?

Non sono sicuro se sia integrato in Discourse o se sia una cosa specifica del tema, ma nel codice sorgente ci sono 5 menzioni di Twitter e una menzione di FaceBook in ogni pagina se si visualizza il codice sorgente. Sono:

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

E sotto <div class="hidden" id="data-preloaded" data-preloaded=, la menzione di FaceBook è: "facebook_app_id". Il mio sito è estremamente focalizzato sulla privacy, quindi la loro presenza sul sito non fa una buona impressione.

Chiesto di nuovo in Remove All Traces of Social Media On My Website?

2) Come funzionano gli @import con SCSS? Mentre personalizzavo il Tema Air, ho notato sulla pagina GitHub che c’è del CSS per il Desktop che è:

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

Quindi, ho provato a creare un mio tema e includerlo nella sezione CSS/HTML del mio tema → Desktop, ma quando ho provato a salvare quella voce, ho ricevuto:

e non riesco in alcun modo a capire come far funzionare la roba di @import. Ho persino caricato sul server VPS della mia installazione di Discourse, creato una cartella chiamata “scss” e inserito i file che quel codice cerca di importare lì, ho riavviato i miei forum e ancora non ha funzionato.

3) Come posso far riavviare automaticamente i forum se il mio server VPS si riavvia? Il server è Ubuntu 22.04. Mentre facevo ricerche, ho trovato questa risposta su questi forum qui, ma ho fatto quello che dice e devo essere cieco perché non vedo istruzioni su come farlo nella pagina di installazione come suggerisce quel commento.

4) Come posso spostare l’intero forum un po’ più in basso? Sembra a posto sul Desktop, ma sul mobile, appare come in alto, nella casella sotto questo post (dato che i nuovi utenti possono aggiungere solo 1 screenshot per post apparentemente), con gli angoli arrotondati che toccano la barra superiore…

Ho provato ad aggiungere un tag di interruzione (<br>) nella sezione Head del CSS del tema, ma questo ha spostato tutto verso il basso, inclusa la barra di navigazione superiore, che voglio che rimanga in alto.

Penso che queste siano tutte le mie domande per ora. Grazie.

[Question42]

Per quanto riguarda il punto n. 4 sopra, questo è lo screenshot a cui mi riferivo:

[Arkshine]

Ciao, benvenuto su Meta

1. Non ho una risposta alla tua domanda. Tuttavia, potrei sbagliarmi. Non penso che questi meta OpenGraph e facebook_app_id siano problemi di privacy qui. Speriamo che qualcun altro possa fornire maggiori informazioni su questo.

2. Non hai creato un tema remoto. Vive in un repository GitHub. Puoi creare i tuoi file, come suddividere il tuo CSS in più file in una directory scss. Quindi, @import farà automaticamente riferimento a questa directory.

Non puoi farlo quando crei manualmente un tema nell’Admin.

Se vuoi personalizzare un tema remoto, puoi creare un Componente Tema, allegarlo al Tema Air e aggiungere qualsiasi CSS desideri. Non è necessario importare questi file. Tuttavia, potresti dover copiare eventuali funzioni/mixin SCSS se ne hai bisogno per le tue personalizzazioni (ad esempio, discourse-air/scss/sidebar-desktop.scss at main · discourse/discourse-air · GitHub)

Per maggiori informazioni sui temi: Developing Discourse Themes & Theme Components

3. Come ha detto Falco, per impostazione predefinita, se segui l’installazione standard, Docker si avvia sempre al riavvio. Non ci sono istruzioni da trovare perché questo è il comportamento predefinito. Puoi confermare che il tuo forum non si è avviato al riavvio?

4. Innanzitutto, tutto viene visualizzato correttamente con la modalità sicura abilitata? Solo per assicurarsi che non sia correlato a personalizzazioni. Questo sarebbe il primo passo per capire il problema.

[Question42]

Grazie per la risposta. Per il punto #4, presumo che sia un problema di CSS o qualcosa di simile, motivo per cui non sono sicuro su come aggiungere uno spazio in modo che il sito mobile non abbia un brutto aspetto. Con la modalità sicura attiva, succede ancora (con la prima opzione deselezionata).

Per quanto riguarda il punto #1, potrebbero non essere “problemi di privacy” in sé, ma semplicemente non voglio menzioni di social ovunque.

#2: Ah, ok, interessante… L’ho fatto con un componente che stavo modificando circa 5 ore fa, ma non sapevo che funzionasse così per i temi. Ci proverò subito.

Hm… il mio Docker non si è avviato automaticamente una volta avviato il mio VPS, strano.

[thoka (Thomas Kalka)]

@Question42

Ciao, non volevo spammare i forum con argomenti multipli, quindi ho 4 domande principali qui come utente/membro più recente dei forum di Discourse:

Hmm. Se più persone seguiranno questo percorso, il forum sarà inondato di titoli di discussione inutilizzabili.

[JammyDodger]

Sarebbe meglio @Question42 se potessi creare un argomento per ogni problema. Non solo rende i titoli degli argomenti molto più pertinenti, ma rende anche molto più facile per le persone intervenire e molto più chiari per chiunque cerchi qualcosa di simile in futuro.

[Question42]

Secondo commento sul punto n. 2 al volo:
Ho fatto un fork del tema Air, ho apportato le mie modifiche, l’ho caricato sul mio repository, l’ho installato con il link di GitHub nella sezione temi del mio pannello di amministrazione… ma ora non posso accedere a CSS/HTML poiché è diventato un tema non locale. Come posso aggirare questo problema? O devo per forza fare la cosa del componente che hai menzionato?

Non c’è modo di modificare CSS/HTML locali con un tema GitHub importato? Perché almeno localmente, potevo facilmente modificare CSS/HTML nel pannello di amministrazione, ma non potevo fare le cose @import. Ma ora ho fatto la cosa remota che hai menzionato e non posso modificare il tema per aggiungere i codici @import, che era il punto di tutto questo.

[bryce (Bryce Huhtala)]

Per quanto riguarda il punto n. 4:
Potresti provare ad aggiungere un margine in alto alla classe .list-controls.

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

[Question42]

Quindi, l’unica menzione di .list-controls nel mio file mobile.scss che ho sono:

.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 quale dovrei inserire il tuo codice?

[bryce (Bryce Huhtala)]

Potresti metterlo all’interno del primo selettore.
Oppure un’altra opzione sarebbe che questa parte:

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

Può essere riscritta come:

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

Quindi puoi inserire nuove dichiarazioni che influenzeranno solo .list-controls prima della parte .nav-pills.

[Question42]

Quindi posso aggiungere

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

per far sì che il tutto appaia così:

.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)]

Esatto! Anche se sembra che manchi una } alla fine.

[Question42]

Quindi, questo è quello che mi dà sul cellulare:

Purtroppo, ha fatto sì che la barra/area Top/Reply/Activity non toccasse più i post e la scheda “Latest” ora tocca la parte superiore. Possiamo in qualche modo fare in modo che l’area Top/Reply/Activity tocchi ancora l’area dei post, ma la casella a discesa “Latest” non tocchi la barra superiore?

Anche se era dovuto al fatto che era incasinato, l’area “Latest” sembrava bella fusa con l’area Topic, come mostrato nello screenshot originale:

EDIT: Oh ragazzo… ho fatto controllare il sito a un amico sul suo telefono (iPhone 13) e il sito ora sembra rovinato sul suo telefono, lol… uhhh Ma sembra “bene” sul mio telefono (screenshot sopra, meno le correzioni che voglio). Sembra che la normale visualizzazione mobile vada bene sul suo telefono, ma la modalità desktop sul telefono la rende tutta disordinata.

[bryce (Bryce Huhtala)]

Hmm, è difficile dire quali altri stili stiano influenzando il tuo tema. Ti consiglio di dare un’occhiata a questa guida se non l’hai già fatto, in particolare le parti che mostrano come usare l’ispettore del browser (negli Strumenti per sviluppatori – accessibili con F12 in Chrome). Ti permette di vedere quali stili vengono applicati a ciascun elemento e di attivarli e disattivarli per vedere la differenza in tempo reale.

Poiché è correlato alla visualizzazione mobile, puoi emulare il mobile sul tuo desktop dalla maggior parte dei browser. Ecco come appare il pulsante in Chrome:

[Firepup650 (Firepup Sixfifty)]

@Question42

la modalità desktop sul telefono rende tutto disordinato

Ci si aspetterebbe, no? La modalità desktop non è realmente pensata per i dispositivi mobili.