Django で壊れたファビコンを修正
この記事では、新しいファビコンを設定する方法、または Django アプリで壊れたファビコンを修正する方法を紹介します。
ファビコンという言葉は、お気に入りのアイコンの略です。 アプリタイトルの左側にあるブラウザタブのアイコンです。
ここでは、現在のブラウザ タブに DelftStack のロゴをファビコンとして表示することもできます。 つまり、ファビコンはアプリのタイトルでブランドを表します。
通常、Django アプリは urls.py ファイルで favicon.ico パスを探し、見つからない場合はデフォルトの HTML アイコンを設定します。
以下では、Django 開発者が Web アプリのカスタム ファビコンを設定する方法について説明しました。
Django で壊れたファビコンを修正
壊れたファビコンの修正を開始する前に、ユーザーは新しい Django プロジェクトを開始し、その中に新しいアプリを作成する必要があります。 また、ユーザーがプロジェクトとアプリの urls.py ファイルを設定していることを確認してください。
ここで、静的ディレクトリを Django プロジェクトに追加し、その中に画像とアイコンを保存します。
ユーザーは現在のプロジェクト ディレクトリでターミナルを開き、以下のコマンドを入力して新しい静的ディレクトリを作成する必要があります。
mkdir static
次に、インターネットからファビコンをダウンロードし、アプリの static ディレクトリに保存します。 また、ファビコンがローカル コンピューターにある場合、ユーザーはファビコンを別の場所から static ディレクトリにコピー アンド ペーストできます。
次に、settings.py ファイルを開いて、アプリの static ディレクトリのパスを追加します。 settings.py ファイルの末尾に以下のコードを追加します。
以下のコードでは、/static/ は静的にする必要があるディレクトリの名前を表し、BASE_DIR はプロジェクト ディレクトリを表します。
settings.py:
import os
STATIC_URL = "/static/"
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]
また、ユーザーは settings.py ファイル内の INSTALLED_APPS 配列に 'django.contrib.staticfiles', が追加されていることを確認する必要があります。 ユーザーは、下の画像で INSTALLED_APPS にどのように追加されるかを確認できます。
次に、ユーザーがアプリ内にベース テンプレートまたは単一のテンプレートを持っていると仮定します。 ユーザーは、HTML テンプレート内の static ディレクトリをロードする必要があります。
ユーザーは、HTML ファイルの先頭に次のコードを追加して、static ディレクトリをロードします。
{% load static %}
ここで、ユーザーはテンプレート内に HTML コードを追加する必要があります。 カスタム ファビコンを設定するには、HTML テンプレートの <head> タグに次のコードを追加します。
以下のコードでは、<link> タグを使用してファビコンを追加しています。 <link> の rel 属性は、現在のドキュメントと読み込まれたドキュメントの間の関係を指定します。
ファビコンを表す ショートカット アイコン を値として取りました。 href 属性では、static キーワードを使用して画像 URL を追加し、static ディレクトリからロードします。
<link rel="shortcut icon" type="image/png" href="{% static '<Relative Icon Path In Static Directory>' %}"/>
以下に、完全な HTML テンプレート コードを示します。
{% load static %}
<!doctype html>
<html lang="en">
<head>
<title>Setup New Favicon In Django</title>
<link rel="shortcut icon" type="image/png" href="{% static 'delftstack.jpg' %}"/>
</head>
<body>
<h1>Welcome to DelftStack!</h1>
</body>
</html>
ユーザーがアプリを実行すると、タイトルの左側にファビコンが表示されます。 以下の出力画像では、ユーザーは DelftStack のロゴをファビコンとして見ることができます。
Django で壊れた favicon を修正する方法を学習しました。 さらに、ユーザーはテンプレートごとに異なるファビコンを設定できます。
<link> タグ内の画像パスを変更し、特定のテンプレートの <head> セクションに追加する必要があります。
