Comment fonctionnent les `@import` avec SCSS ?

Salut, je ne voulais pas spammer les forums avec plusieurs sujets, j’ai donc 4 questions principales ici en tant que nouvel utilisateur/membre des forums Discourse :

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

Demandé à nouveau dans Remove All Traces of Social Media On My Website?

2) Comment fonctionnent les @import avec SCSS ? En personnalisant le Thème Air, j’ai remarqué sur la page GitHub qu’il y a du CSS pour le bureau qui est :

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

J’ai donc essayé de créer mon propre thème et de l’inclure dans la section CSS/HTML de mon thème → Bureau, mais lorsque j’ai essayé de sauvegarder cette entrée, j’ai obtenu :

css1018×283 12.2 KB

3) Comment puis-je faire en sorte que les forums redémarrent automatiquement si mon serveur VPS redémarre ? Le serveur est sous Ubuntu 22.04. En faisant des recherches, j’ai trouvé cette réponse sur ces forums, mais j’ai fait ce qui y est dit et je dois être aveugle car je ne vois pas d’instructions sur la façon de faire cela sur la page d’installation comme le suggère ce commentaire.

4) Comment puis-je déplacer mon forum entièrement un peu plus bas ? Cela a l’air bien sur ordinateur, mais sur mobile, cela ressemble à ce qui est en haut, dans le commentaire sous ce post (car les nouveaux utilisateurs ne peuvent ajouter qu’une capture d’écran par post apparemment), avec les bords arrondis touchant la barre supérieure…

image400×200 19.9 KB

J’ai essayé d’ajouter une balise de saut de ligne (<br>) dans la section Head du CSS du thème, mais cela a déplacé tout, y compris la barre de navigation supérieure, que je veux qu’elle reste en haut.

Je pense que c’est tout pour mes questions pour l’instant. Merci.

Concernant le point n° 4 ci-dessus, voici la capture d’écran à laquelle je faisais référence :

Screenshot_20240325-160753_Firefox400×200 19.9 KB

Salut, bienvenue sur Meta

1. Je n’ai pas de réponse à votre question. Cependant, je pourrais me tromper. Je ne pense pas que ces meta OpenGraph et facebook_app_id posent ici de problèmes de confidentialité. J’espère que quelqu’un d’autre pourra apporter un meilleur éclairage à ce sujet.

2. Vous n’avez pas créé de thème distant. Il vit dans un dépôt GitHub. Vous pouvez créer vos fichiers, comme diviser votre CSS en plusieurs fichiers dans un répertoire scss. Ensuite, @import fera automatiquement référence à ce répertoire.

Vous ne pouvez pas faire cela lorsque vous créez manuellement un thème dans l’administration.

Si vous souhaitez personnaliser un thème distant, vous pouvez créer un composant de thème, le rattacher au thème Air et ajouter le CSS de votre choix. Il n’est pas nécessaire d’importer ces fichiers. Cependant, vous devrez peut-être copier les fonctions/mixins SCSS si vous en avez besoin pour vos personnalisations (par exemple, discourse-air/scss/sidebar-desktop.scss at main · discourse/discourse-air · GitHub)

Pour plus d’informations sur les thèmes : Developing Discourse Themes & Theme Components

3. Comme l’a dit Falco, par défaut, si vous suivez l’installation standard, Docker démarre toujours au redémarrage. Il n’y a pas d’instructions à trouver car c’est le comportement par défaut. Pouvez-vous confirmer que votre forum n’a pas démarré au redémarrage ?

4. Tout d’abord, tout s’affiche-t-il correctement avec le mode sans échec activé ? Juste pour être sûr que cela n’est pas lié à des personnalisations. Ce serait la première étape pour comprendre le problème.

Merci pour votre réponse. Pour le point n°4, je suppose qu’il s’agit d’un problème de CSS ou quelque chose de similaire, c’est pourquoi je ne suis pas sûr de la façon d’ajouter un espace pour que le site mobile ne soit pas laid. Avec le mode sans échec activé, cela se produit toujours (avec la première option décochée).

Concernant le point n°1, il ne s’agit peut-être pas de « problèmes de confidentialité » à proprement parler, mais je ne veux simplement aucune mention de réseaux sociaux nulle part.

N°2 : Ah, ok, intéressant… Je l’ai fait avec un composant que j’éditais il y a environ 5 heures, mais je ne savais pas que c’était comme ça que cela fonctionnait pour les thèmes. Je vais essayer ça rapidement.

Hmm… mon Docker n’a pas démarré automatiquement une fois que mon VPS a démarré, étrange.

Hm. Si plus de gens suivent cette voie, le forum sera spammé avec des titres de discussion inutilisables.

Il serait préférable, @Question42, que vous créiez un sujet par problème. Non seulement cela rend les titres de sujets beaucoup plus pertinents, mais cela permet également aux gens de donner plus facilement leur avis et rend les sujets beaucoup plus clairs pour toute personne recherchant des problèmes similaires à l’avenir.

2e commentaire sur le point n°2 très rapidement :
J’ai donc bifurqué le thème Air, j’ai apporté mes propres modifications, je l’ai téléchargé sur mon propre dépôt, je l’ai installé avec le lien GitHub dans ma section de thèmes du panneau d’administration… mais maintenant je ne peux plus accéder au CSS/HTML car c’est maintenant un thème non local. Comment puis-je contourner cela ? Ou dois-je absolument utiliser la chose de composant que vous avez mentionnée ?

Il n’y a aucun moyen de modifier le CSS/HTML local avec un thème GitHub importé ? Parce qu’au moins localement, je pouvais facilement modifier le CSS/HTML dans le panneau d’administration, mais je ne pouvais pas faire les choses @import. Mais maintenant, j’ai fait la chose à distance que vous avez mentionnée et je ne peux pas modifier le thème pour ajouter les codes @import, ce qui était le but de ceci.

Concernant le #4 :
Vous pourriez essayer d’ajouter une marge en haut pour la classe .list-controls.

// en CSS mobile
.list-controls {
  margin-top: 1rem;
}

image332×387 13 KB

Donc, la seule mention de .list-controls dans mon fichier mobile.scss que j’ai sont :

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

Dans lequel devrais-je mettre votre code ?

Vous pourriez le placer dans le premier sélecteur.
Ou une autre option serait que cette partie :

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

Peut être réécrite comme suit :

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

Ensuite, vous pouvez placer de nouvelles déclarations qui n’affecteront que .list-controls avant la partie .nav-pills.

Alors je peux ajouter

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

pour que le tout ressemble à ceci :

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

?

C’est exact ! Bien qu’il semble qu’il manque une autre } à la fin.

Alors, voici ce que cela me donne sur mobile :

Screenshot_20240325-184747_Firefox1073×793 87 KB

Malheureusement, cela a fait que la barre/zone Haut/Répondre/Activité ne touche plus les publications et que l’onglet « Derniers » touche maintenant le haut. Pouvons-nous faire en sorte que la zone Haut/Répondre/Activité touche toujours la zone de publication, mais que la boîte déroulante « Derniers » ne touche pas la barre supérieure ?

Même si c’était dû à un problème, la zone « Derniers » avait l’air bien fusionnée avec la zone Sujet, comme montré dans la capture d’écran originale :

98e4a9a087bd8bd4155fcf5fcf4ecfb4aa778378400×200 19.9 KB

EDIT : Oh là là… un ami a vérifié le site sur son téléphone (iPhone 13) et le site a l’air ruiné maintenant sur son téléphone, lol… euhhh Mais ça a l’air « bien » sur mon téléphone (capture d’écran ci-dessus, moins les corrections que je veux). On dirait que la vue mobile normale est correcte sur son téléphone, mais le mode bureau sur téléphone rend tout désordonné.

Hmm, il est difficile de savoir quels autres styles affectent votre thème. Je vous recommande de consulter ce guide si vous ne l’avez pas déjà fait, en particulier les parties qui montrent comment utiliser l’inspecteur du navigateur (dans les Outils de développement – accessibles avec F12 dans Chrome). Il vous permet de voir quels styles sont appliqués à chaque élément et de les activer ou désactiver pour voir la différence en temps réel.

Puisque cela concerne la vue mobile, vous pouvez émuler un mobile sur votre bureau à partir de la plupart des navigateurs. Voici à quoi ressemble le bouton dans Chrome :

image310×123 6.24 KB

C’est assez attendu, non ? Le mode bureau n’est pas vraiment conçu pour les appareils mobiles.