実は本当は以前から全ページスクロールのエッセイページを作りたかったのですが、最近3Dスクロールページを見つけ、より綺麗に感じたので使ってみました。
上記のGIFのページはオリジナルではなく、ソースコードはソウルワイヤーによってリリースされたFoldScrollデモです。 http://soulwire.github.io/FoldScroll/)。
長い間更新されていませんが... <フォントサイズ="3" 色="赤" フォントの太さ:太字 >は使用できません! GIFはあまり明確ではありません、私の修正バージョンはここにあります: ログ。
まず{%ラベルdefault@GitHub%}に移動してソースコードをダウンロードし、index.html、jsフォルダー、およびcssフォルダーを保存します 私のブログはHEXOに基づいているので、上記のファイルファイルを「ブログルート\ソース\'新しい自分」に保存してください。 (デバッグ中に任意のフォルダに入れることができます)
私はソースコードを直接貼り付けたので、説明は比較的簡単です。
{% ラベル info@line 4: %} ページ名は、ラベル上でばかげて表示されるものです。
{% ラベル info@line 9:%} タブアイコンをクリックすると、必要に応じて設定できます。
{% ラベル info@line 12: %} 訪問を記録するための Google アナリティクス スクリプト。
{% ラベル info@line 44:%} 音楽を自動的に再生するスクリプトは、私を直接コピーしてから、中央のリンクを目的の音楽に変更することができます。
このページの効果に非常に満足しているので、上記を変更しただけであり、新しいアイデアがあれば後で変更します。
ファイルはCSS /スタイル.css、開発者が許可を求めておらず、左上隅の情報はあまり見栄えが良くないため、すべて削除しました。
{% ラベル default@quotes 記事%} は本文のサイズ、{% ラベルdefault@quotes記事 em%} はグレープリントのサイズ、{% ラベル default@quotes 記事 em:before%} グレープリントの前の記号は以下に定義されており、好きなものを使用できます。 これが私が使っているものです:
'''CSS * { -ウェブキットボックスサイジング:ボーダーボックス; -moz-box-sizing: border-box; ボックスサイジング:ボーダーボックス; }
html, body { フォントファミリー:Nsimsun、Consolas、monospace; バックグラウンド: #f2f2f2; パディング:0; マージン:0; }
.quotes { 位置:絶対; 下: 0ピクセル; 幅: 100%; 左: 0; 上: 0ピクセル; }
.quotesの記事{ ボーダーボトム:2px破線#ddd; テキスト整列:両端揃え。 線の高さ:1.5; 背景:#fff; 最大幅:900ピクセル; フォントサイズ:24ピクセル; フォントの太さ:太字; パディング:60px 30px; マージン:0自動; 幅: 100%; カラー:#333; }
.quotes article em { フォントスタイル:マイクロソフトヤヘイ; フォントサイズ:16ピクセル; カラー:#666; }
.quotes 記事 em:before { コンテンツ: '-'; マージン:0 10ピクセル; }
### js を変更する フォルダ内のfoldscroll.min.jsとfoldscrollはアニメーション効果.jsであり、移動する必要はありません(もちろん、大きな神がいる場合は自分で変更できます)。 引用符.jsにはページ上のすべてのテキストが含まれているため、お気に入りのテキストを追加できますが、ページの元の形式に従って変更する必要があります。 ## デプロイメント <div class="note info"> <p>上記の手順が完了したら、ローカルでインデックスをクリックすると.html変更した効果を表示できます。 次はHEXOへの展開です。 </p></div> ### メニュー項目を追加する 私は次のテーマを使用しているので、設定ファイルは 'ブログルート\テーマ\next\_config.yml'にあり、左から右に{%ラベルsuccess@name%}、{%ラベルsuccess@link%}、{%ラベルsuccess@区切り文字%}、{%ラベルsuccess@icon%}。 「ログ」エントリを追加しました。 '''CSS メニュー: ホーム: / || 家 タグ: /タグ/ || タグ カテゴリ: /カテゴリ/ || 番目 アーカイブ: /アーカイブ/ || アーカイブ ログ: /log || カレンダー#新增加的 #sitemap: /サイトマップ.xml || サイトマップ #commonweal: /404/ || 心音 #about: /about/ || 利用者
HEXOは展開時にMDファイルをHTMLファイルとしてレンダリングしますが、ページが設定されており、再度レンダリングすると文字化けするため、このフォルダー全体を除外する必要があります。
設定ファイルは 'blog root_config.yml'にあり、skip_renderを見つけます:コロンの後にスペースがあることを思い出して、除外するフォルダを後に追加します(私がどのように知っている🙃か私に聞かないでください。 例:
'''CSS skip_render: 'ログ/**' ```
設定後、サーバーにプッシュできますが、音楽が自動的に再生されないことがあり、理由がわからないなど、いくつかの小さな問題がまだあります。
バックグラウンドミュージックは、Only One-Kanye Westのオーディオサンプルであり、ダウンロードする場合は、下のブラックボックス、ログWebページのリンクをクリックすることができますTencent CloudのCOSを使用してアクセスを高速化しましたが、アンチホットリンクを設定しているため、ダウンロードできません。
リファレンス
評価版システムをバッチ アクティベーションに変換するいくつかの手順を記録します。
最近、ブログのテーマが更新され、WordPress で更新を促されたのですが、権限が不十分で更新が完了できませんでした。
ただし、これらは一時的なもので、再起動すると失敗し、設定前の状態に戻ります。
ネットワークもアップグレードされ、機器のデバッグも行われましたが、外部ネットワーク上のローカル ファイルにアクセスしたい場合はどうすればよいですか?
iPhoneのメンテナンス記録
目次
人気タグ
その他の言語
サイト情報
jp/1423.html