カスタマイズジキルウェブサイト

18855 ワード
portfolio programming github tutorial テキストリンク
この記事はどのように迅速かつ自由に構築し、自分自身をホストする方法を示すシリーズの一部ですJekyll ブログを書くGitHub Pages . このシリーズはまた、直接私たちのコードを使用してコメントシステムを追加するようなより高度なトピックをカバーしますStaticman とプライバシーを使用してまだ無料の分析を使用してUmami .
チュートリアルをいくつかの部分に分けました.
  • Introduction
  • Setting Up
  • Create Content
  • ディスプレイのカスタマイズ
  • Commenting System - Part 1
  • Commenting System - Part 2
  • Analytics
    • 我々は、我々のウェブサイトにコンテンツを追加を開始した今、我々はどのように外観をカスタマイズできるかを見てみましょう.

    ジキルはどのようにページを生成するか
    私がJekyllが好きである理由の1つは、それがウェブサイト作成の後で魔法の大部分を隠して、あなたに非常にきれいなディレクトリを提供するということです.
    しかし、欠点は、それがカスタマイズされることになると、失われた感じを感じることが容易であり、あなたのテーマを更新する方法を知らないことです.
    本当に、レイアウトはあなたのテーマによって定義されて、あなたのローカルフォルダに存在しません.
    だから何かをする前に、我々はminima theme repository . あなたの現在のバージョンの支店を見てください.
    私の場合では、インストールされる2.5のものですGemfile ので、私は見ている2.5-stable branch .
    私たちのブログの構造は主に2つのフォルダに依存します.
  • _layouts : それぞれのマークダウンファイルのフロントメトリックメタデータで使用されるレイアウトを含みます.
  • _includes : レイアウトで使用されるHTMLコードのスニペットを含みます.
    • 例えば、我々がコードを見るならpost レイアウトは、以下を参照してください(理解のために短縮).
    <!-- _layouts/post.html -->
---
layout: default
---
<article
  class="post h-entry"
  itemscope
  itemtype="http://schema.org/BlogPosting"
>
  <header class="post-header">
    <h1 class="post-title p-name" itemprop="name headline">
      {{ page.title | escape }}
    </h1>
    ...
  </header>

  <div class="post-content e-content" itemprop="articleBody">{{ content }}</div>
  ...
</article>
    コメントがたくさんあります.
    我々が見る最初のものは、ブログレイアウトがdefault レイアウト.
    レイアウトの営巣の仕組みは、あなたのフロントの下にあるすべてが{{ content }} 親のレイアウトの変数.
    例えば、このレイアウトを使ってブログ記事を書くとき、その内容は<div class="post-content e-content" itemprop="articleBody">{{ content }}</div> ブロック.
    また、投稿のタイトルを持つフロントメトリックメタデータの使用も見ることができます.
    このタイトルはpage 変数の中には、テンプレートの先頭に定義されているすべての変数が含まれています.
    これらの変数はテンプレートの子プロセスで上書きできます.この場合、私たちのテンプレートの前部の問題で定義されたタイトルが全くありません.
    さて、デフォルトレイアウトを見れば、これは私たちが見るものです.
    <!-- _layouts/default.html -->
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
  {% include head.html %}

  <body>
    {% include header.html %}

    <main class="page-content" aria-label="Content">
      <div class="wrapper">{{ content }}</div>
    </main>

    {% include footer.html %}
  </body>
</html>
    既定のレイアウトは、すべてのページの基本構造を表します.
    その他content 子レイアウトが注入される変数include HTMLコードを注入します.
    彼らに飛び込んで、Faviconを加えることによって我々のブログをカスタマイズし始めましょう.

    faviconの追加
    そっと我々のウェブサイトにfaviconを加えることによって始めましょう.HTMLに精通している場合は、Faviconがhead タグ.このテーマは_includes/head.html このタグを含むファイル.
    あなた自身のプロジェクトにそれを置くことによってあなたのテーマの任意のファイルをオーバーライドすることができます.
    この場合、我々は我々自身をつくることができます_includes/head.html , Githubからコードをコピーして、私たちのfaviconを加えるためにそれを修正してください.
    私のfaviconのためにa lion emoji 運動のために.
    <!-- _includes/head.html -->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  {% seo %}
  <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}" />
  {% feed_meta %} 
  {% if jekyll.environment == 'production' and site.google_analytics %} 
    {% include google-analytics.html %} 
  {% endif %}

  <link
    rel="apple-touch-icon"
    sizes="180x180"
    href="{{ '/apple-touch-icon.png' | relative_url }}"
  />
  <link
    rel="icon"
    type="image/png"
    sizes="32x32"
    href="{{ '/favicon-32x32.png' | relative_url }}"
  />
  <link
    rel="icon"
    type="image/png"
    sizes="16x16"
    href="{{ '/favicon-16x16.png' | relative_url }}"
  />
</head>

    ヘッダの変更
    同じように我々は、我々のオーバーロードhead.html フィルは、我々は任意のファイルをオーバーライドすることができます私たちが望むようにあなたのウェブサイトをカスタマイズします.
    例えば、我々の新しいロゴを加えることによって我々のヘッダーを変えましょう.
    そのためには、_includes/header.html ファイル.
    <!-- _includes/header.html --> 
<header class="site-header" role="banner">
  <div class="wrapper">
    {% assign default_paths = site.pages | map: "path" %} 
    {% assign page_paths = site.header_pages | default: default_paths %}
    <a class="site-title" rel="author" href="{{ '/' | relative_url }}">
      <img src="{{ 'favicon-32x32.png' | relative_url }}" />
      {{ site.title | escape }}
    </a>
    ...
  </div>
</header>

    CSSのカスタマイズ
    CSSを変更する方法はいくつかあります.この動画はお気に入りから削除されていますhead.html ファイルは、現在CSSassets/main.css .
    開発ファイルでは、実際にはscss から作られるファイル_sass ディレクトリ.
    私たちのCSSをカスタマイズするオプションは_sass ディレクトリとそのファイルを編集します.
    もう一つの可能性は、テーマCSSの後にロードされる新しいファイルを生成することです.そうすれば、我々がそれに置く規則がデフォルトのものを上書きするでしょう.これは、私が現在あなたに示す解決です.
    まず、作成しましょうassets/main.scss ファイルを次のコードに置き換えます.
    // assets/main.scss
--------
--------

@import "minima";
@import "custom";
    ファイルのインポートを追加しましたcustom . このファイルを作成するには_sass フォルダといくつかのCSSを追加します.
    // _sass/custom.scss
.site-title {
  color: orangered;
  &:visited {
    color: orangered;
  }
}
    ここでは、私たちのライオンに合わせてサイトのタイトル色を変更します.私の主なポイントはどのようにそれを行うことができますを見るには、それはあなたのスタイルをあなたのウェブサイトにしたい方法を決定することです.

    我々のポストに特集イメージを加えること
    ほとんどすべてのブログで表示されるものは、ブログのリストと記事の上部に表示される機能画像です.
    残念なことに、これは現在ジキルによって管理されていませんので、この機能を実装しましょう.
    今回はブログレイアウトを直接変更したいです.我々は、2009年に独自のバージョンを作成することができます_layouts/post.html .
    私たちがすることは、Aをチェックすることですfeatured_image 変数が存在し、存在する場合は、次のスニペットを追加することで、タイトルの上に表示します.
    {% if page.featured_image %}
<div class="featured-image">
  <img src="{{ '/assets/' | append: page.featured_image | relative_url }}" />
</div>
{% endif %}
    我々の最後のポストに紹介されたイメージを加えましょう.あなたの資産フォルダーで欲しいイメージを置いて、ポストメタデータにその名前を加えてください.
    --------
layout: post
title: "Write a Post"
date: 2021-06-31
categories: jekyll blogging
featured_image: featured-image.jpg
--------
    次に、いくつかのCSSを追加できますcustom.scss スタイルにファイル.
    // _sass/custom.scss
... 
.featured-image {
  margin-bottom: 50px;

  img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
  }
}
    これがその結果です.


    フィーチャー画像を表示するには、ホームの更新
    ホームページを改善しましょう.
    まず、コピーhome.html に_layout フォルダ.ポストレイアウトと同様の原則に従って、我々は我々の注目の画像を追加することができます.
    <!-- _layout/home.html -->
-------- 
layout: default 
--------

<div class="home">
  {% if page.title %}
    <h1 class="page-heading">{{ page.title }}</h1>
  {% endif %} 
  {{ content }} 
  {% if site.posts.size > 0 %}
    <h2 class="post-list-heading">
      {{ page.list_title | default: "Posts" }}
    </h2>
    <ul class="post-list">
      {% for post in site.posts %}
      <li>
        <div>
          {% assign date_format = site.minima.date_format 
            | default: "%b %-d, %Y" %}
          <span class="post-meta">
            {{ post.date | date: date_format }}
          </span>
          <h3>
            <a class="post-link" href="{{ post.url | relative_url }}">
              {{ post.title | escape }}
            </a>
          </h3>
          {% if site.show_excerpts %} 
            {{ post.excerpt }} {% endif %}
        </div>
        {% if post.featured_image %}
        <div class="featured-image">
          <img
            src="{{ '/assets/' | append: post.featured_image | relative_url }}"
          />
        </div>
        {% endif %}
      </li>
      {% endfor %}
    </ul>

    <p class="rss-subscribe">
      subscribe <a href="{{ '/feed.xml' | relative_url }}">via RSS</a>
    </p>
  {% endif %}
</div>
    更新するcustom.scss ファイル.
    // _sass/custom.scss
... .post-list > li {
  display: flex;
  flex-wrap: wrap-reverse;

  div:first-child {
    flex: 4 0 200px;
  }
  .featured-image {
    flex: 1 0 200px;
    margin-bottom: 0;
  }
}
    ここでは、今あなた自身のイメージであなたの個人的なブログを作成するすべての基本を持っている.
    この部分のコードを見つけることができますhere .
    次のステップはto add a commenting system to our blog .
    Android学習による可視領域のRectオブジェクトの取得(ステータスバーとタイトルバーの高さをついでに取得する方法)
    ListとKey