hugo dream plus
Yume
Ce thème est une version améliorée du thème Dream de Yue Yang et contient des tonnes de nouvelles fonctionnalités telles que:
Ce thème peut être utilisé à deux fins:
Ce projet adhère au Code de conduite de l'alliance des contributeurs. En participant, vous devez maintenir ce code. Veuillez signaler un comportement inacceptable à [email protected].
Installation
Commencer
Documentation
Presque fini
Contributif
Licence
Le thème peut être installé en exécutant les commandes suivantes dans votre dossier de site Web Hugo .
cd themes
git submodule add https://github.com/UtkarshVerma/hugo-dream-plus dream-plus
git submodule update --init --recursiveUne fois le thème installé avec succès, vous devrez faire un peu de réglage du thème pour répondre à vos goûts.
Dans le dossier exampleSite , vous trouverez les fichiers de configuration, cards.toml et posts.toml qui peuvent être utilisés pour modifier le thème.
Vous devez utiliser ces fichiers de configuration comme base pour votre site, car ils s'occupent des déclarations de variables nécessaires , que vous pouvez modifier en fonction de vos besoins.
Définissez-vous à travers les variables de configuration suivantes dans params sous la table author comme indiqué:
[ params . author ]
author = " <name of the author> "
description = " Short description of the site "
motto = " author's motto or short description "
# Leaving the avatar variable unset displays svg avatars
avatar = " <absolute path to avatar> "Après cela, remplissez les variables sociales à la fin du fichier de configuration. Ce thème soutient les sites sociaux suivants: (les exemples sont donnés)
| Lien social | Variable | Exemple d'initialisation |
|---|---|---|
| Github | github | github = "username" |
email = "[email protected]" | ||
| Gazouillement | gazouillement | twitter = "username" |
facebook = "username" | ||
| Youtube | youtube | youtube = "username" |
| Moyen | moyen | medium = "username" |
| Liendin | liendin | linkedin = "username" |
| Stackoverflow | stackoverflow | stackoverflow = "number/username" |
| Codepen | codepen | codepen = "username" |
reddit = "username" |
Ces variables doivent être dans le tableau [social] de config.toml ou son équivalent pour YAML ou JSON .
[ social ]
github = " UtkarshVerma "Une fois cela fait, rédigez la section " About Me " de votre site Web dans Markdown comme indiqué ici: Erreur et sur les pages.
Comme indiqué précédemment, ce thème a deux vues, la vue de cartes et les publications . Le type de rendu de la vue dépend du type de contenu que vous nourrissez à Dream Plus . Donc:
cards dans le dossier /content active la vue de la carte .posts dans le dossier /content active la vue de publication .La variable
contentTypea maintenant été obsolète.
Une distinction claire entre les deux vues est que la vue de la carte ne prend pas en charge les publications, mais qu'il redirige vers le lien spécifié, tandis que la vue de publication le fait. Vous pouvez les tester vous-mêmes en visitant mes sites (énoncés ci-dessus) qui les utilisent. De plus, la création de post / carte se fait différemment pour les deux vues. C'est comme suit:
hugo new cards/example.md # Card creation
hugo new posts/example.md # Post creationAprès cela, ouvrez simplement votre carte / post de Markdown et fournissez les paramètres de la carte / du post.
Il existe deux façons différentes de configurer l'arrière-plan de ce thème. Ces paramètres s'excluent mutuellement les uns aux autres.
Pour définir une couleur d'arrière-plan spécifique, faites-le via la variable color . Si vous souhaitez mettre à la place une combinaison aléatoire de couleurs comme arrière-plan, laissez simplement la variable de couleur non set .
[ params . background ]
color = " #13547A " # Provide a color as hex or rgb equivalent Spécifiez l'image que vous souhaitez définir comme arrière-plan via le tableau images . Si vous préférez un arrière-plan d'image, donnez simplement une seule valeur au tableau. Par exemple:
[ params . background ]
images = [ " /images/bg1.jpeg " ] # Single image as background
images = [ " /images/bg1.jpeg " , " <some other image> " ] # Multiple images as background La fourniture de plusieurs images au tableau images permet à la fonction d'arrière-plan d'image aléatoire de Dream Plus, qui fait le cycle dans l'arrière-plan dans le tableau donné chaque fois que le site est rechargé. Vous pouvez également brouiller l'arrière-plan dans une certaine mesure à travers la variable blur .
Toutes les variables de configuration de l'arrière-plan doivent être placées à l'intérieur de la table
backroundsousparams
[ params . background ]
# Random backgrounds
images = [ " /images/bg1.jpeg " , " /images/bg2.jpeg " , " /images/bg3.jpeg " ]
# Blur the background
blur = " 0.2 "Les couvertures de chaque post-carte ou carte sont traitées par Dream Plus en utilisant le traitement d'image Hugo pour des temps de chargement de site Web plus rapides. Les chemins de recherche du fichier de couverture sont indiqués ci-dessous:
/content/cards/<card>/cover.<any-extension>/content/posts/<post>/images/cover.<any-extension>
La spécification de l'image de couverture à travers la masse de front a maintenant été obsolète. Les couvercles de carte peuvent désormais être définis via la touche avant via la clécover. Cependant, le traitement d'image ne sera pas applicable sur ces couvertures. En outre, les couvertures de frontmatter sont prioritaires sur les ressources d'image , par conséquent, pour rendre les couvertures de ressources d'image, vous devrez d'abord supprimer la clé de couverture de la maille de front.
Vous pouvez également modifier le processus de traitement d'image via la variable coverArgs dans [params.features] . Les arguments passés doivent être pour la fonction .Resize car c'est ce que Dream Plus utilise. Par exemple,
[ params . features ]
coverArgs = " 400x300 q50 " # Specify resolution and quality of output image Vous pouvez configurer votre site Web en fonction du périphérique client en utilisant la variable isMobile JS. Il est true lorsque l'appareil client est un mobile et vice versa.
Ce thème prend en charge la personnalisation totale des pages d'environ et d'erreur . Ces pages peuvent être personnalisées via les fichiers about.md et 404.md Dream Plus lit les fichiers indiqués ci-dessus comme un texte de marque ordinaire , puis les rend. Une fois que vous avez fini d'écrire les fichiers et de les modifier en fonction de vos besoins, collez-les dans le dossier content de votre site Hugo. Si vous ne voulez pas que ces pages soient construites par Hugo et servaient avec leurs propres liens tels que <website>.<domain>/about ou <website>.<domain>/404 . Ensuite, vous pouvez dire à Hugo de les ignorer via la variable ignoreFiles dans votre fichier config.toml comme suit:
ignoreFiles = [ " content/404.md " , " content/about.md " ] Vous pouvez également définir un favicon personnalisé pour votre site Web via la variable de configuration favicon sous params . Par exemple,
[params]
favicon = "/images/defaultFav.ico"
Le script de site Web shorte.st a été mis en œuvre dans ce thème. Pour l'utiliser, vous devrez le configurer via le tableau le shortest sous params .
[ params . shortest ]
enabled = true # Enable shorte.st
apiToken = " " # The API Token you received from shorte.st
domains = [ " " ] # The domains you want to define Si vous souhaitez contrôler la quantité de messages / cartes d'une page, vous pouvez le faire en utilisant la variable de configuration paginate .
paginate = 4 # Defaults to 10 De plus, les balises, lorsqu'elles sont activées, ne seront pas toutes affichées sur l'en-tête et la barre latérale par défaut. Seules les 8 premières balises (Article-Count-Wise) y sont affichées pour éviter la congestion. Cependant, il peut être remplacé en utilisant la variable tagLimit du tableau [params.tag] .
[ params . tag ]
enabled = true
tagLimit = 10 # Top 10 tags will be displayed
# or
tagLimit = 0 # Display all tagsIl existe également d'autres configurations mineures. Vous pouvez les configurer en vous référant aux commentaires dans le fichier de configuration.
La documentation de ce référentiel est actuellement en cours et est ajoutée au wiki de ce référentiel. Les contributions wiki sont les bienvenues. N'hésitez pas à me poser des questions sur les fonctionnalités de ce thème pour cela.
Après avoir terminé les configurations, vous êtes prêt à partir. Alors, testez votre site Web en utilisant:
hugo serverVotre site doit désormais être disponible localement sur http: // localhost: 1313 à des fins de test.
Pour tester l'exemple de site, vous devrez spécifier explicitement le fichier de configuration à Hugo. Cela se fait comme suit:
# For posts view demo
hugo server --config posts.toml
# For cards view demo
hugo server --config cards.tomlVous avez trouvé quelque chose d'intéressant à ajouter à ce thème ou plutôt un? Bug? Faites-moi savoir à ce sujet via le tracker du problème. Les demandes de traction sont également les bienvenues. Pour des instructions plus détaillées sur la façon de contribuer, reportez-vous à contribution.md
Ce thème est publié sous la licence MIT .
