Githubのは、個人的なウェブサイトを構築するために使用します(3)

サイトの造園(1)

変更ホーム

ディレクトリ構造で、まず我々の外観

スクリーンショットディレクトリ

サイトのホームページを見てください:

家

1、サイトの下を変更

当社サイトの下部にある最初の変更 - サイトの説明。ヒントを見て

ここに新しいサイトのための素晴らしい説明を書きます。あなたは_config.ymlにこの行を編集することができます。これは、(Googleの検索結果のための)ドキュメントの頭のメタにし、あなたのfeed.xmlサイトの説明に表示されます。

で最初の画像を変更することを意味し_config.ymlたファイル。その後、我々は、編集内容を、私は、あなたが彼らの実際の状況に応じて選択することができます崇高テキスト3を使用して、ファイルを開きます。

ファイルの内容のスクリーンショットを開いた後:

主なコンテンツ

主な内容は上記で、我々はそれがサイト全体に影響を与えるだろう、変更することができます。私たちは小さな個人ブログなのでツイートはコメントアウトしながら、我々はのみ(ツイートは、ビットタイトル、電子メール、説明、github_usernameを変更していません_)。:次のように変更された情報

変更された情報

これはグローバルな設定であるため、私たちは、サーバーを再起動する必要があります。直接ライン上ではCtrl + C。

サーバーを再起動した後にウェブサイトのスクリーンショット:

マイホーム

2、さらに変更されたコンテンツホーム

若干の改善が、ホーム・ページのコンテンツは、自身を交換する必要がありますが、我々はホーム・ページの内容を変更しようとしています。

まず、入力し_postsたフォルダを、デフォルトで生成されたファイルは、我々が直接Webサイトのホームページのコンテンツにリアルタイムで変更を行う、内部の内容を変更することができました。崇高なテキスト3このファイルを使用して、まだオープンは推奨されませんTyporaので、私は言うだろう、次の。

---
layout: post
title:  "Welcome to Jekyll!"
date:   2020-02-04 18:05:28 +0800
categories: jekyll update
---
  • これらのタグは、次のような他のラベルに加えて、記事のメタデータを属しtagspermalink

  • このキーと値のペア、構文の問題は、コロンの後にスペースがなければならないので(数は関係ありませんが、存在しなければならない空)

  • コロンはコロンで、構文は、そうでない場合は解決できないYAML

  • メタデータは、記事の一番上に書かれた、上部および必要に下げなければなりません---あなたがTyporaを使用している場合は別の、この効果を見ていません。図は次のとおりです。

    Typoraレンダリング

  • メタデータが必要ではなく、状況に関するメタデータが不足して、私は特別な記事をお送りします

2.1内容を変更します

我々はそれを修正します

---
layout: post
title:  "My first blog"
date:   2020-02-04 18:05:28 +0800
categories: tcmyxc
tags: 随笔
---

ただ、コンテンツ自体が幸せに変更します。へ同時にファイル名年-月-日-标题.md

  • 四年、月、日は2つです
  • 拡張であってもよい.markdown.html.htm、あるいはtxtファイルができますが、ホームは、ここにサスペンスを残し、特に何を、あなた自身を試すことができます問題にいくつかのポイントがあります。

あなたが興味を持っている場合、私はテストしていないほかのサフィックス、あなたは自分自身を試すことができます。

スクリーンショット実用的な効果:

家

私たちは、実際のポイントを見に行きました:

こんにちはページ

最初のブログ

私たちは、コンテンツが正しく表示することができ、そのhtmlファイルの両方またはマークダウンのファイルを見ることができます。

図3に示すように、冗長な情報を除去します

ホームが持っているsubscribe via RSSより多くの迷惑な、我々は削除することができます

フォルダのルートディレクトリに作成、名前の変更_layouts、名前のこのフォルダに新しいHTMLファイルを作成、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>
        {%- 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 -%}
      </li>
      {%- endfor -%}
    </ul>
  {%- endif -%}

</div>

再度、ウェブサイトを開き、あなたは厄介なワード線が消えていることがわかります。

不要な情報を削除します

さらに最適化このサイトに、私たちはお楽しみにどのようにここで終わりにする今日の記事では、後の記事では教えてくれます。

以上の乾燥の記事のための社会的関心番号「アサルム属プログラミング」へようこそ。

リリース元の4件の記事 ウォンの賞賛1 ビュー79

おすすめ

転載: blog.csdn.net/tcmyxc/article/details/104300488