xLog カスタムCSSを有効にする

碎碎念#

ついに帰国して年末年始を過ごすことができましたが、途中でいろいろとトラブルがありました。帰国後は仕事のプロジェクトで忙しかったです。人手が足りなかったため、外部委託を利用せざるを得ませんでした。しかし、外部委託の効果はあまり良くありませんでした。リリースが近づいてきた時に、PO がテストを行っていないことに気づきました。このようなことは許容できません。そのため、この記事は遅くなりました。

偶然にも xLog というプロジェクトに出会いましたが、とても興味深いプロジェクトだと気づきました。ただし、インターフェースはすべて英語であり、最初は少し違和感がありました。仕事環境が外国語環境であるのに、家に帰っても母国語ではないものを見るのは少し不快です。とにかく、以上はただの愚痴であり、無視してください。

正直言って、このプロジェクトは非常に魅力的です。ちょうど自分も Next.js の小さなプロジェクトをしており、いくつかの PR も提出しました。このプロジェクトは非常にプレイフルな見た目がありますが、いくつかの説明が不足しています。コードを手で触ってみると、例えば複数のユーザーを扱う方法など、非常に興味深いです。自分もこのような SaaS プラットフォームを作ったことがありますが、自動的に SSL を発行するなど、多くのアイデアを考えました。もしかしたら記事を書くかもしれません。

正文#

この記事では、CSS の簡単な変更によってカスタムテーマを実現する方法について説明しています。フルスタックエンジニアとして、私たちは簡単に CSS スタイルを編集することができます。しかし、xLog のデフォルトテーマは私の個人的なスタイルに合わないため、自分の好みに合ったシンプルで明瞭なテーマを作成することにしました。色の選択では、青色を好みます。xLog の CSS の命名規則を調べてみると、「xlog-xxx」という形式が基本的に使われていることがわかりました。そこで、自分の青色スタイルのテーマを作成しました。

昨日、私はついに xLog のニュースを見る時間ができました。i18n をサポートしていることがわかり、おめでとうと拍手を送ります。しかし、問題が発生しました：以前に変更した CSS スタイルはまだ残っているのでしょうか？明らかに、新しいバージョンではいくつかの変更が行われたため、私のスタイルは少し見栄えが悪くなっています。DIYgod は画像も引用してくれました。したがって、私はどのようにしてあのあまり美しくないサイトを自分の好みに合うように変更するか共有します。フロントエンドのコードにわずかな変更があったため、画像が大きくなりました。たとえば、以前のロゴのサイズは「100px * 100px」でしたが、現在は「120px * 120px」になりました。

変更を開始する#

コードをローカルに取り込んでカスタム CSS 機能を有効にするには、まず自分のダッシュボード（通常はバックエンドと呼ばれるもの）に接続する必要があります。接続方法がわからない場合は、xlog.app に直接ログインし、アバターの近くのボタンをクリックしてください。次に、「サイト設定」をクリックすると、カスタム CSS のオプションが表示されます。

CSS 環境変数を定義する前に、これらの変数がすべてのテーマに適用され、バックエンドの色も変更されることに注意してください。

:root {
  --theme-color: #0ea5e9;
  --theme-color-dark: #0284c7;
  --header-height: 100%;;
  --banner-bg-color: #fff;
}

例えば、var の構文を使用すると、上記で定義した色を使用できます。

.xlog-site-name {
    color: var(--theme-color); // 上記で定義した色を参照
    font-size: 1.5rem;
    line-height: 2rem;
}

では、どこでxlog-site-nameを見つけたのですか？ここで開発者ツールを使用する必要があります。ここでは、Chrome を使用することをお勧めします。以下の手順を参照してください。F12 キーを押して Chrome のデベロッパーツールを開き、要素セレクタを使用して変更する要素を選択します。

スクリーンショットを参考にして、xlogで始まるクラスを見つけてください。このクラスを覚えておき、後でカスタマイズで使用します。 element.styleでは、自分の要素を追加してテストすることもできます。テストが完了したら、保存できます。

これは単純な例ですが、すべてのクラスを上書きすることができます。カスタマイズが上書きされた場合は、!importantを使用して強制的に適用することができます。

モバイルバージョンはまだ好きです。やはり、モバイルユーザーの方がデスクトップユーザーよりも多いです。

後記#

これだけの文章を書いて、xLog はまだ多くの変更をしていることに気づきました。特に、執筆体験が大幅に改善されました。たとえば、画像をアップロードする際に画像ホスティングを探す必要がなくなりました。xLog チームは非常に活発で、ほぼ毎週レポートがあり、アップデートを見るのはとても面白いです。

有感而发#

製品をリリースする際には、既存のユーザーデータを考慮する必要があります。今日、私たちは新しい「オンライン申請」をリリースしましたが、問題が発生しました：preprod と prod のデータベースでは、データ構造が一致していません。新しいフィールドを追加する場合、空の値を許可する必要があります。空の値を許可しない場合、既存のユーザーがデータを保存する際に問題が発生する可能性があります。実際、開発中にこのような状況を避けるために最善の努力をしましたが、このプロジェクトは半年間も遅れてしまい、急遽リリースすることになりました。幸いなことに、私はすべての詳細を記録している習慣があります......

それでは、碎碎念はこれで終わりです～