Hexo の美化、最適化、Lighthouse の究極のスコア追跡

2021-04-04 10:28 ≈ 1.7k字 ≈ 8分

以前に 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/oranges
hexo ルートディレクトリの _config.yml ファイルを変更し、theme を oranges に変更します。

テーマの構成

テーマを正式に使用する前に、テーマに基づいていくつかのパーソナライズされた設定を行うこともできます。基本的に、Readme ファイルにリストされている機能はすべて基本的なニーズに基づいて作成者が設定していることがわかります。ここで表示を見つけることができます。著者のドキュメントは非常に詳細なので、追加のリストは省略します。私が有効にした機能について簡単に説明します。

カテゴリ、タグ、記事ディレクトリ、RSS、コメント、Google Analytics、前後ページ、全文検索

画像の遅延読み込みがオンになっていない主な理由は、元の画像がすでに画像ベッド + CDN を使用しているため、別の遅延読み込みを追加する必要がなく、アンロードされたものを確認する必要があることです。まずはイメージ。

テーマの変更

では、何を変更したかについて説明します。少し断片的なので、少しずつ説明します。

フッターにメール ID を追加

ここのアイコンはすべて URL に対応しているため、作成者は処理時に設定ファイルのアドレスを <a> タグの href に直接書き込みますが、メールの場合は href に追加する必要があります 先ほどのmailto:ですが、:`が入っているため、設定ファイルに直接書くとエラーになってしまうので、以下のようにコードを修正しました。

<div class="footer">
  <div class="social">
    <ul>
      <% for(let item of theme.footer.social){ %>
        <% if (item.name == "email") { %>
          <li>
            <a title="<%- item.name %>" href="mailto:<%- item.path %>">
              <i class="iconfont icon-<%- item.icon %>"></i>
            </a>
          </li>
        <% } else { %>
          <li>
            <a title="<%- item.name %>" href="<%- item.path %>">
              <i class="iconfont icon-<%- item.icon %>"></i>
            </a>
          </li>
        <% } %>
      <% } %>
    </ul>
  </div>
  <% for(let item of theme.footer.more){ %>
    <div class="footer-more">
      <% if (item.path) { %>
        <a href="<%- item.path %>"><%- item.name %></a>
      <% } else { %>
        <%- item.name %>
      <% } %>  
    </div>
  <% } %>
</div>

設定ファイル内のソーシャル名が「email」の場合、コードに「mailto:」を追加します

ホームページの記事リストから特定のカテゴリを削除します

他の人がこのようなニーズを持っているかどうかはわかりませんが、私のブログには技術的な記事に加えて、いくつかの小説や、前の話と同様の日常的な文章も含まれており、それらはすべてホームページのリストに積み上げられており、非常に混乱しているように思えます。 , そこで、コードを読んだ後、リストから特定のカテゴリを削除するように修正しました（いくつか削除しても問題ありません）コードはあまり変更されていませんが、構造がより複雑になっているので、index.ejsすべて投稿しました。変更したい場合は、それをコピーしてから、11 行目を手動で変更します。

<div class="container index">
  <div class="post-list">
    <!-- 遍历渲染文章 -->
    <% 
    var prev = -10086;// prev year
    var curr;// curr year, ever step be updated 

    page.posts.forEach(function(item) { 
      var mark = true;
      item.categories.forEach(function(item1){
        if(item1.name == "novel" || item1.name == "gossip"){
          mark = false;
        }          
      });
      if(mark){
        curr = item.date.year()
        if (curr !== prev) {
          prev = curr;

    %>
    <div class="content-title">
      <h2>
        <span><%- curr %></span>
      </h2>
    </div>
    <%
      }
    %>
      <div class="post-item" title="<%- item.title %>">
        <div class="time-m-d"><%- item.date.format("MM-DD") %></div>
        <div class="title">
          <a href="<%- url_for(item.path) %>">
            <% if(item.title !== "") { %>
              <% if (item.top) { %>
                <span><span title="<%= __('pinned') %>" class="icon iconfont icon-pin-top post-top"></span><%- item.title %></span>
              <% } else { %>
                <span><%- item.title %></span>
              <% } %>
            <% } else { %>
              <span>untitled</span>
            <% } %>
          </a>
        </div>
      </div>
    <% }}) %>
  </div>
  <nav class="post-navigation">
    <% if(page.prev !== 0){ %>
      <a href="<%- url_for(page.prev_link)%>"><i class="iconfont icon-angleleft"></i></a>
    <% } %>
    <span class="page-num"><%- page.current %> / <%- page.total -%></span>
    <% if(page.next !== 0){ %>
      <a href="<%- url_for(page.next_link)%>"><i class="iconfont icon-angleright"></i></a>
    <% } %>
  </nav>
</div>

元のテーマと異なるのは、リスト内の年を抽出して個別に表示したことです。もちろん、アーカイブページからもコピーしました。

hexo-generator-index ページングを変更する

ページングを使用しない場合を除き（可能性は低いと思われますが）、システムページングを使用すると、システム自体がページングするときに削除したい記事が削除されないため、評価が行われないなどの問題が発生することに注意してください。 1 ポイントあたり 10 個の記事がありますが、ホームページには 7 個の記事しか表示されないため、ページネーション後に削除したい記事がページにいっぱいになった場合、このページには何も表示されなくなります。当初の目的とは異なるため、より良い外観と操作性を実現したい場合は、Hexo のページングプログラムも変更する必要があります。

変更された場所は、ブログのルートディレクトリの node_modules フォルダー内にあり、hexo-generator-index フォルダー内で generator.js ファイルを見つけます。これは、vscode またはメモ帳でも開くことができます。記事の配列が生成されるので、ページング関数を呼び出す前にコードを追加します。その後、古い配列に判定を追加して、除外されていない記事を新しい配列にプッシュします。第16章の行頭からの変更点は以下の通りです。

'use strict';

const pagination = require('hexo-pagination');
const { sort } = require('timsort');

module.exports = function(locals) {
  const config = this.config;
  const posts = locals.posts.sort(config.index_generator.order_by);
  const temp_posts = [];

  sort(posts.data, (a, b) => (b.sticky || 0) - (a.sticky || 0));

  const paginationDir = config.pagination_dir || 'page';
  const path = config.index_generator.path || '';

  if(config.index_generator.exclude){    
    posts.forEach(element => {
      var mark=true; 
      element.categories.forEach(function(categories){ 
        config.index_generator.exclude_list.forEach(function(category){
          if(categories.name == category){
            mark=false; 
          }
        });
      }); 
      if(mark){
        temp_posts.push(element);
      }    
    });
  }

  return pagination(path, config.index_generator.exclude ? temp_posts : posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

次に、システム構成ファイル _config.yml に除外するカテゴリ名を追加します。

index_generator:
  path: ''
  per_page: 10
  order_by: -date
  exclude: true
  exclude_list:
    - novel
    - 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 点でした。もちろんまだ改善の余地はありますが、今後機会があればもう一度試してみたいと思います。

Hexo全文検索アドレスエラー

Hexo、GitHub Page、Typora を使用して記事を書く