Publier des thèmes

Êtes-vous prêt à publier votre thème nouvellement créé dans notre liste de thèmes ? Pour ce faire, votre thème doit être développé dans un fork de notre dépôt hyvor-blogs-themes. Une fois tout terminé, envoyez-nous une pull request vers la branche main. Si elle est fusionnée, votre thème sera automatiquement ajouté à notre liste de thèmes, et les autres blogueurs pourront l’installer facilement.

Tous les thèmes de notre liste de thèmes sont gratuits. Si vous souhaitez créer un thème payant, vous devez le vendre en dehors de notre plateforme, et les utilisateurs peuvent télécharger le fichier ZIP depuis la Console pour l'installer.

Liste de vérification

Toutes les exigences suivantes doivent être respectées afin de publier un thème dans notre liste officielle de thèmes.

Ces fichiers doivent être ajoutés :

Prend en charge plusieurs langues (dispose d'un sélecteur de langue)

Prend en charge les modes couleur clair et sombre

Respecte les paramètres de mode couleur du blog

Pagination

La recherche du blog doit être implémentée au moins avec la recherche d'articles. En option, vous pouvez ajouter une recherche pour les tags et les auteurs.

Tous les articles doivent contenir des liens vers leurs versions traduites (si disponibles). Ex : « Cet article est aussi disponible en... » ou « Traductions : ... »

Tous les placeholders sont ajoutés

_head _foot _comments _newsletter

_comments ne devrait être ajouté qu'aux articles, pas aux pages.

Les blocs _comments et _newsletter ne devraient pas être affichés si la valeur de chacun est vide.

Si le blog a un logo (_blog.logo_url), le logo doit être affiché dans l'en-tête en reliant le logo à la page d'accueil du blog.

Internationalisé

<html lang="{{ _lang.code }}" dir="{{ _lang.direction }}"></html> est ajouté

Prend en charge les langues RTL. Voir Prise en charge RTL ci-dessous.

Les configurations sont ajoutées pour les couleurs, polices, etc. Voir la section Config.

Les définitions de configuration (config.def.yaml) sont ajoutées. Voir la page Configuration -> Définitions de configuration. Utilisez l'outil de configuration pour valider config.def.yaml.

Les fichiers YAML doivent utiliser 2 espaces par indentation (pas de tabulations, pas 4 espaces).

Compatible mobile (responsive)

Les articles en vedette peuvent avoir une interface unique dans la page d'index (ex : une icône épinglée/étoile)

Les styles de contenu sont ajoutés. Voir la section Styles de contenu ci-dessous.

Toutes les ressources (JS, polices, etc.) doivent être ajoutées dans le dossier assets. Ne chargez pas de ressources depuis des sources externes comme Google Fonts.

Doit prendre en charge les liens de réseaux sociaux du blog (affiche une icône ou un lien vers le profil du réseau social si le lien est disponible)

La mention Hyvor Blogs (« Fait avec Hyvor Blogs ») est affichée dans le pied de page si _branding est vrai.

Config

Comme expliqué dans la page des configurations, les configurations suivantes sont requises lors de la publication de votre thème.

THEME_NAME: my-theme
THEME_VERSION: 1.0.0

Les configurations suivantes sont recommandées pour tous les thèmes publiés.

colors:
  light:
    # ... colors for the light theme
  dark:
    # ... colors for the dark theme

# if only one font
font:
  size: 16px
  line_height: 1
  family: 'Inter, sans-serif'

# if multiple fonts
fonts:
  body:
    size: 16px
    family: 'Inter, sans-serif'
  heading:
    size: 24px
    family: 'Nunito, sans-serif'

settings:
  loop: # features in the index page (list of posts)
    authors: true
    tags: true
    featured_image: true
  post: # features in the post page
    authors: true
    tags: true
    featured_image: true
    toc: true # table of contents
  feed: true # a link to RSS feed (if available)

Prise en charge RTL

Tous les thèmes publiés doivent prendre en charge les langues RTL (de droite à gauche). Suivez ces conseils pour vous assurer que votre thème prend en charge le RTL.

Ajoutez dir="{{ _lang.direction }}" à la balise <html>
Utilisez des propriétés CSS sensibles à la direction lors de l’ajout de padding horizontal, de marges et de bordures gauche/droite

Ne pas utiliser

Utiliser ceci

padding-left

padding-inline-start

padding-right

padding-inline-end

margin-left

margin-inline-start

margin-right

margin-inline-end

border-left

border-inline-start

border-right

border-inline-end

Assurez-vous que les éléments positionnés en absolu/fixe sont correctement positionnés en mode RTL
Les blocs <pre><code> doivent avoir la propriété CSS direction: ltr
Assurez-vous d’ajouter une langue RTL à votre blog DEV et de tester la prise en charge du RTL

Styles de contenu

Tous les thèmes publiés doivent styliser correctement tous les blocs du billet « Guide de style de contenu » de votre blog DEV. En plus de les styliser, suivez ces directives pour éviter les problèmes d’UX courants mais subtils.

1. Ancres de titre

Nous ajoutons automatiquement des ancres aux titres qui ont un attribut id.

HTML sans ID :

<h1>My Heading</h1>

HTML avec ID :

<h1 id="heading-anchor">
	<a href="#heading-anchor" class="heading-anchor"> My Heading </a>
</h1>

Ces ancres de titre doivent être stylisées différemment des autres liens. Par exemple, vous pouvez ajouter un # ou une image SVG (via background-image) avant le texte de l’ancre.

h1,
h2,
h3,
h4,
h5,
h6 {
	a[href^='#'] {
		/* Remove usual link styles */
		color: inherit;
		text-decoration: none;
		position: relative;

		/* Add different styles */
		&:hover:before {
			content: '#';
			position: absolute;
			right: 100%;
			margin-right: 5px;
			color: var(--color-text-content-secondary);
		}
	}
}

2. Blocs de code

Les blocs de code doivent avoir tab-size: 4
Les blocs de code doivent avoir direction: ltr
Les numéros de ligne doivent être positionnés en absolu
Ajoutez un padding gauche lorsque les numéros de ligne sont activés (vérifiez .has-line-numbers).

Et, les numéros de ligne doivent être positionnés en absolu. Ajoutez également un padding gauche lorsque les numéros de ligne sont activés (vérifiez .has-line-numbers).

pre {
	position: relative;
	tab-size: 4;
	direction: ltr;
	.line-number {
		margin-right: 1rem;
		position: absolute;
		left: 1rem;
	}
	&.has-line-numbers .line {
		padding-left: 2rem;
	}
}

3. Tableaux

.table-container doit avoir overflow-x: auto pour s’assurer que le tableau soit défilable sur les appareils mobiles

.table-container {
	overflow-x: auto;
}

4. Paragraphes

Les marges doivent être gérées avec soin pour les paragraphes à l’intérieur de listes, tableaux et citations. Ce qui suit fonctionne bien dans la plupart des cas.

li {
	p {
		margin-top: 0;
		&:last-child {
			margin-bottom: 0;
		}
	}
}

Versionnage

La première version du thème doit être 1.0.0. Ensuite, vous pouvez incrémenter le numéro de version selon les changements que vous effectuez. Pour un correctif (ex : correction de bug), vous pouvez utiliser 1.0.1, 1.0.2, etc. Pour un changement mineur, vous pouvez utiliser 1.1.0, 1.2.0, etc. Contrairement aux autres logiciels, les thèmes n’ont pas de changements majeurs cassant la compatibilité. Par conséquent, nous ne pensons pas que vous aurez un jour besoin d’un changement de version majeure.

Journal des modifications

Ajoutez un fichier CHANGELOG.md à votre dossier de thème et ajoutez les modifications pour chaque version. Consultez keepachangelog.com pour apprendre à rédiger un journal des modifications.

Une fois tout terminé, envoyez-nous une pull request vers le dépôt hyvor-blogs-themes. Lorsque la PR est fusionnée, la liste des thèmes se mettra automatiquement à jour avec votre nouveau thème.