Hexo の美化、最適化、Lighthouse の究極のスコア追跡
以前に Hexo、GitHub Page、Typora を使用して記事を書く という記事を書き、Hexo のインストール プロセスについて詳しく共有しました。ここ数日、記事の移行、Hexo テーマの選択、テーマと Hexo ページネーションの変更のプロセスを行ってきました。最後に、Lighthouse で 100 点のランニング スコアを達成する方法について簡単に説明します。
ヘキソ美化
まず、Hexo のインストール後のデフォルトのテーマはlandscapeですが、これも非常にシンプルなので、記事を書くことに集中する人はそのまま使用しても問題ありません。ただし、以前 Halo を使用していたときは Nextテーマ を使用していたので、今回の移行の最初のアイデアは引き続き next を使用することです。
テーマのインストール
興味深いのは、nextを直接検索したのではなく、Hexo の公式テーマ ライブラリ でnextを検索したことです。これは一種の運命だと思います。 Oranges テーマを発見しました。Demo をご覧ください。このテーマはnextよりも簡潔です。
すべての変数ボタンと列が削除されたため、モバイル端末で他のラベル ボタンを選択するときに、ドロップダウン メニューをクリックする必要がなくなり、このテーマ を選択することができました。
インストールプロセスは簡単で、次の 2 つのステップのみです。
$ git clone https://github.com/zchengsite/hexo-theme-oranges.git Strategies/orangeshexo ルート ディレクトリの
_config.ymlファイルを変更し、themeをorangesに変更します。
テーマの構成
テーマを正式に使用する前に、テーマに基づいていくつかのパーソナライズされた設定を行うこともできます。基本的に、Readme ファイルにリストされている機能はすべて基本的なニーズに基づいて作成者が設定していることがわかります。 ここで表示 を見つけることができます。著者のドキュメントは非常に詳細なので、追加のリストは省略します。私が有効にした機能について簡単に説明します。
カテゴリ、タグ、記事ディレクトリ、RSS、コメント、Google Analytics、前後ページ、全文検索
画像の遅延読み込みがオンになっていない主な理由は、元の画像がすでに画像ベッド + CDN を使用しているため、別の遅延読み込みを追加する必要がなく、アンロードされたものを確認する必要があることです。まずはイメージ。
テーマの変更
では、何を変更したかについて説明します。少し断片的なので、少しずつ説明します。
フッターにメール ID を追加
ここのアイコンはすべて URL に対応しているため、作成者は処理時に設定ファイルのアドレスを <a> タグの href に直接書き込みますが、メールの場合は href に追加する必要があります 先ほどのmailto:ですが、:`が入っているため、設定ファイルに直接書くとエラーになってしまうので、以下のようにコードを修正しました。
1<div class="footer">
2 <div class="social">
3 <ul>
4 <% for(let item of theme.footer.social){ %>
5 <% if (item.name == "email") { %>
6 <li>
7 <a title="<%- item.name %>" href="mailto:<%- item.path %>">
8 <i class="iconfont icon-<%- item.icon %>"></i>
9 </a>
10 </li>
11 <% } else { %>
12 <li>
13 <a title="<%- item.name %>" href="<%- item.path %>">
14 <i class="iconfont icon-<%- item.icon %>"></i>
15 </a>
16 </li>
17 <% } %>
18 <% } %>
19 </ul>
20 </div>
21 <% for(let item of theme.footer.more){ %>
22 <div class="footer-more">
23 <% if (item.path) { %>
24 <a href="<%- item.path %>"><%- item.name %></a>
25 <% } else { %>
26 <%- item.name %>
27 <% } %>
28 </div>
29 <% } %>
30</div>
設定ファイル内のソーシャル名が「email」の場合、コードに「mailto:」を追加します
ホームページの記事リストから特定のカテゴリを削除します
他の人がこのようなニーズを持っているかどうかはわかりませんが、私のブログには技術的な記事に加えて、いくつかの小説や、前の話と同様の日常的な文章も含まれており、それらはすべてホームページのリストに積み上げられており、非常に混乱しているように思えます。 , そこで、コードを読んだ後、リストから特定のカテゴリを削除するように修正しました（いくつか削除しても問題ありません）コードはあまり変更されていませんが、構造がより複雑になっているので、index.ejsすべて投稿しました。変更したい場合は、それをコピーしてから、11 行目を手動で変更します。
1<div class="container index">
2 <div class="post-list">
3 <!-- 遍历渲染文章 -->
4 <%
5 var prev = -10086;// prev year
6 var curr;// curr year, ever step be updated
7
8 page.posts.forEach(function(item) {
9 var mark = true;
10 item.categories.forEach(function(item1){
11 if(item1.name == "novel" || item1.name == "gossip"){
12 mark = false;
13 }
14 });
15 if(mark){
16 curr = item.date.year()
17 if (curr !== prev) {
18 prev = curr;
19
20 %>
21 <div class="content-title">
22 <h2>
23 <span><%- curr %></span>
24 </h2>
25 </div>
26 <%
27 }
28 %>
29 <div class="post-item" title="<%- item.title %>">
30 <div class="time-m-d"><%- item.date.format("MM-DD") %></div>
31 <div class="title">
32 <a href="<%- url_for(item.path) %>">
33 <% if(item.title !== "") { %>
34 <% if (item.top) { %>
35 <span><span title="<%= __('pinned') %>" class="icon iconfont icon-pin-top post-top"></span><%- item.title %></span>
36 <% } else { %>
37 <span><%- item.title %></span>
38 <% } %>
39 <% } else { %>
40 <span>untitled</span>
41 <% } %>
42 </a>
43 </div>
44 </div>
45 <% }}) %>
46 </div>
47 <nav class="post-navigation">
48 <% if(page.prev !== 0){ %>
49 <a href="<%- url_for(page.prev_link)%>"><i class="iconfont icon-angleleft"></i></a>
50 <% } %>
51 <span class="page-num"><%- page.current %> / <%- page.total -%></span>
52 <% if(page.next !== 0){ %>
53 <a href="<%- url_for(page.next_link)%>"><i class="iconfont icon-angleright"></i></a>
54 <% } %>
55 </nav>
56</div>
元のテーマと異なるのは、リスト内の年を抽出して個別に表示したことです。もちろん、アーカイブ ページからもコピーしました。
hexo-generator-index ページングを変更する
ページングを使用しない場合を除き（可能性は低いと思われますが）、システム ページングを使用すると、システム自体がページングするときに削除したい記事が削除されないため、評価が行われないなどの問題が発生することに注意してください。 1 ポイントあたり 10 個の記事がありますが、ホームページには 7 個の記事しか表示されないため、ページネーション後に削除したい記事がページにいっぱいになった場合、このページには何も表示されなくなります。当初の目的とは異なるため、より良い外観と操作性を実現したい場合は、Hexo のページング プログラムも変更する必要があります。
変更された場所は、ブログのルート ディレクトリの node_modules フォルダー内にあり、hexo-generator-index フォルダー内で generator.js ファイルを見つけます。これは、vscode またはメモ帳でも開くことができます。記事の配列が生成されるので、ページング関数を呼び出す前にコードを追加します。その後、古い配列に判定を追加して、除外されていない記事を新しい配列にプッシュします。第16章の行頭からの変更点は以下の通りです。
1'use strict';
2
3const pagination = require('hexo-pagination');
4const { sort } = require('timsort');
5
6module.exports = function(locals) {
7 const config = this.config;
8 const posts = locals.posts.sort(config.index_generator.order_by);
9 const temp_posts = [];
10
11 sort(posts.data, (a, b) => (b.sticky || 0) - (a.sticky || 0));
12
13 const paginationDir = config.pagination_dir || 'page';
14 const path = config.index_generator.path || '';
15
16 if(config.index_generator.exclude){
17 posts.forEach(element => {
18 var mark=true;
19 element.categories.forEach(function(categories){
20 config.index_generator.exclude_list.forEach(function(category){
21 if(categories.name == category){
22 mark=false;
23 }
24 });
25 });
26 if(mark){
27 temp_posts.push(element);
28 }
29 });
30 }
31
32 return pagination(path, config.index_generator.exclude ? temp_posts : posts, {
33 perPage: config.index_generator.per_page,
34 layout: ['index', 'archive'],
35 format: paginationDir + '/%d/',
36 data: {
37 __index: true
38 }
39 });
40};
次に、システム構成ファイル _config.yml に除外するカテゴリ名を追加します。
1index_generator:
2 path: ''
3 per_page: 10
4 order_by: -date
5 exclude: true
6 exclude_list:
7 - novel
8 - gossip
この時点で、基本的に視覚的な変更はほぼ完了しました。
素早い！速くなければなりません
次に、私が修正した部分は主にオープニング速度です。非常に単純なテーマを選択したため、「Lighthouse」が 100 点未満であることはどれほど恥ずかしいことでしょうか。 以下は、デスクトップとモバイルを含む 私のホームページ の実行スコアです。
実際、Google は多くの提案を行っていますが、ここでは、このテーマに対する私の方法の一部についてのみ説明します。
すべての静的ファイルを CDN に保存する
メソッドも非常に簡単で、テーマ ディレクトリを github 上のパブリック ウェアハウスにアップロードし、release バージョンを公開します。この方法で、呼び出しメソッドも jsdelivr にキャッシュされます。とてもシンプルです。
https://cdn.jsdelivr.net/gh/ユーザー名/ウェアハウス名@リリースバージョン番号/source/iconfont/iconfont-min.css
js ファイルを非同期でロードする
CDN アドレスを取得したら、テーマ内のすべてのリソース (主に /layout/_partial/header.ejs) を CDN に切り替えます。いくつかの場所に散在する source/* ファイルを確認してください。変更する必要があるものを変更します。Lighthouseを実行すると、対応するプロンプトが表示されます。「async」キーワードをすべてのjsファイルに追加することを忘れないでください。jquery.minは全文検索に使用されます。読み込み時には関与しません。ここでは画像をクリックして記事を拡大するために使用します。これらの「js」ファイルがページのレンダリングをブロックできるようにします。
すべての js および css ファイルを圧縮する
これは標準的な操作です。CSS 圧縮を検索するだけです。ファイルをコピーして圧縮し、「XX-min.js」ファイルを作成します。
いろいろいじった結果、私のページのデスクトップシミュレーションは 100 点、モバイル端末シミュレーションは 99 点でした。もちろんまだ改善の余地はありますが、今後機会があればもう一度試してみたいと思います。