En fait, je voulais vraiment faire une page d’essai à défilement pleine page avant, mais récemment, j’ai trouvé une page de défilement 3D, qui semblait plus belle, alors je l’ai utilisée.

# Modifier la page

La page dans le GIF ci-dessus n’est pas originale, le code source est FoldScroll démo publiée par soulwire ici: FoldScroll。

Bien qu’il n’ait pas été mis à jour depuis longtemps, mais... Le GIF n’est pas très clair, ma version modifiée est ici : Log.

Allez d’abord dans {% label default@GitHub%} pour télécharger le code source et enregistrer l’index.html, le dossier js et le dossier css Mon blog est basé sur HEXO, alors enregistrez le fichier ci-dessus dans 'blog root\source\'New yourself'. (Vous pouvez le placer dans n’importe quel dossier pendant le débogage)

Modifier l’index .html

J’ai collé mon code source directement, de sorte que l’explication est relativement simple:

{% label info@line 4: %} Le nom de la page est celui qui apparaît idiot sur l’étiquette.

{% label info@line 9:%} icône d’onglet, vous pouvez le définir selon vos propres besoins.

{% label info@line 12: %} Votre script Google Analytics pour enregistrer les visites.

{% label info@line 44:%} Le script qui joue automatiquement la musique, vous pouvez me copier directement, puis changer le lien du milieu à la musique que vous voulez.

J’ai seulement modifié ce qui précède, car je suis très satisfait de l’effet de cette page, et je le changerai plus tard si j’ai de nouvelles idées.

Modifier le CSS

Le fichier est en CSS / style, .css parce que le développeur n’a demandé aucune autorisation, et les informations dans le coin supérieur gauche ne sont pas très belles, alors j’ai tout supprimé.

{% label default@quotes article%} est la taille du corps, {% label default@quotes article em%} est la taille de l’impression grise, {% label default@quotes article em:before%} Le symbole avant l’impression grise est défini ci-dessous, vous pouvez utiliser ce que vous voulez. Voici ce que j’utilise :

'''CSS * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { font-family: Nsimsun, Consolas, monospace; Contexte: #f2f2f2; rembourrage: 0; marge: 0; }

.quotes { position: absolue; bas: 0px; largeur: 100%; gauche: 0; haut: 0px; }

.quotes article { bordure-bas: 2px pointillé #ddd; text-align: justifier; hauteur de ligne: 1,5; Contexte: #fff; largeur maximale: 900px; font-size: 24px; font-weight:gras; rembourrage: 60px 30px; marge: 0 auto; largeur: 100%; couleur: #333; }

.quotes article em { font-style: Microsoft YaHei; font-size: 16px; couleur: #666; }

.quotes article em:before { contenu: '-'; marge: 0 10px; }

### Modifier js

Les .js foldscroll.min et foldscroll dans le dossier sont .js des effets d’animation, et ils n’ont pas besoin d’être déplacés (je ne peux pas le modifier, bien sûr, si vous avez un grand dieu, vous pouvez le faire vous-même). Les guillemets contiennent .js tout le texte de la page, vous pouvez ajouter votre texte préféré, mais vous devez le modifier en fonction du format d’origine de la page, sinon cela se passera mal.

## Déploiement

<div class="note info"> <p>Une fois les étapes ci-dessus terminées, vous pouvez cliquer sur l’index localement.html vous pouvez afficher votre effet modifié. Vient ensuite le déploiement dans HEXO. </p></div>

### Ajouter des éléments de menu

J’utilise le thème suivant, donc le fichier de configuration est dans 'blog root\themes\next\_config.yml', et je dois configurer les options de menu, de gauche à droite, {% label success@name%}, {% label success@link %}, {% label success@ séparateur%}, {% label success@icon%}. J’ai ajouté une entrée « Log ». 

'''CSS
menu:
  Accueil: / || domicile
  balises: /tags/ || étiquettes
  Catégories: /catégories/ || ième
  archives: /archives/ || archiver
  Journal : /log || calendrier #新增加的
  #sitemap: /sitemap.xml || Plan du site
  #commonweal: /404/ || battement
  #about: /about/ || utilisateur

Exclure les dossiers

Parce qu’HEXO rend le fichier MD sous forme de fichier HTML au moment du déploiement, mais ma page a été définie et elle sera brouillée lorsqu’elle sera à nouveau rendue, je dois donc exclure tout ce dossier.

Le fichier de configuration se trouve dans 'blog root_config.yml', trouvez skip_render: Ajoutez les dossiers que vous souhaitez exclure après celui-ci, en vous rappelant qu’il y a un espace après les deux-points (ne me demandez pas comment je sais 🙃 . Exemple:

'''CSS skip_render: 'log/**' ```

Après l’avoir configuré, vous pouvez pousser vers le serveur, mais il y a encore quelques problèmes mineurs, tels que la musique ne joue parfois pas automatiquement, et je ne sais pas pourquoi.