ホームページ > ウェブフロントエンド > htmlチュートリアル > 10 分で個人 Web サイトを構築: Jekyll テーマ BoHu_html/css_WEB-ITnose

10 分で個人 Web サイトを構築: Jekyll テーマ BoHu_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:19:45
オリジナル
1793 人が閲覧しました

私は最近、最初のジキル テーマ BoHu を作成するのに 3 日を費やしました。 Zhihu スタイルのテンプレートでは、jekyll テンプレート エンジンを使用して、10 分で独自の静的ブログ Web サイトを構築できます。

このテーマの特徴は次のとおりです:


  1. Zhihu スタイル

  2. ページングナビゲーションは、前のページと次のページではなく特定のページ番号を使用します

  3. ブログ投稿検索機能をサポート

  4. 記事の分類とサポート最近の記事を表示

  5. ホームページではブログの投稿数をカウントできます

  6. 中国語と英語の芸術的なフォントを内蔵

  7. 音楽プレーヤーを内蔵

  8. マルチトークとディスクコメントシステムをサポート

  9. で閲覧モバイルデバイスが最適です

  10. MITライセンスを使用してください

具体的な手順は次のとおりです:

  1. まず、GitHubアカウントを持っている必要があります。
  2. GitHub の bohu-jekyll-theme リポジトリにあるこのテーマの フォーク に移動します。
  3. bohu-jekyll-theme ディレクトリで _config.yml 設定ファイルを見つけて開きます。個人設定情報を変更します。
  4. 変更した Web サイトのディレクトリを独自の GitHub リポジトリにアップロードして、独自のブログ Web サイトを生成します。
  5. 今後は、ブログ投稿を _post フォルダーに入れて GitHub にアップロードするだけで、Web サイトのコンテンツが自動的に更新されます。

必須情報:
title: ブログの名前
author: ブロガーの名前
baseurl: ブログのルート アドレス == フォルダー名 (デフォルトは bohu-jekyll-theme)変更 ここでもフォルダ名を変更してください。
description: head 内の Web ページの説明情報。検索エンジンが Web サイトをより適切にインデックスできるように、Web サイトを簡単に説明します。

オプション情報:
email: あなたのメールアドレス
twitter_username: あなたのTwitterのユーザー名
weibo_username: あなたのWeiboのユーザー名
github_username: あなたのgithubのユーザー名
上記の4つの情報を入力すると、対応するリンクアイコンが自動的に表示されますブロガー情報欄は記入しないと表示されません。

disqus_shortname: あなたの disqus アカウント
duoshuo——shortname: あなたの Duoshuo アカウント
上記 2 つの項目のいずれかを選択すると、対応するコメント プラグインが自動的に読み込まれます。

url: 独自の Web サイトをお持ちの場合は、独自の Web サイトのアドレスを入力します。そうでない場合は、http://your github name.github.io/theme フォルダーのルート ディレクトリ名/home を入力します。これは、Built を指します。 -個人のホームページ内。
組み込みの個人ホームページを使用した後、個人情報を設定する必要があります: 場所、ドメイン、会社、役職、学校、専攻、履歴書
性別アイコンを変更する方法: ホームフォルダーの下にあるindex.htmlを開き、次を検索しますクラス名fa-marsをfa-venusに変更するだけです。

ページネーション: ページネーション ナビゲーションの各ページに表示されるブログ投稿の数を決定する値を入力します。この値に達すると、ページネーションが自動的に行われます。

プロフィール: あなたのモットー

その他の変更項目:


  • Web サイトのアイコンとカスタム アバターはアセット フォルダーにあります。また、オフサイトの画像リンクへのパスを設定することもできます。

  • SCSS プリコンパイルを使用する場合は、まず SCSS ファイルを変更します。

  • 検索プラグインは手動でパスを設定し、検索フォルダーを見つけて、JS フォルダー内の cb-search.js の 66 行目の bohu-jekyll-theme をブログ Web サイトのルート ディレクトリの名前に変更する必要があります。 。

  • このテーマのその後のメンテナンスと更新については、GitHub プロジェクトのホームページ bohu-jekyll-theme に注意してください。

    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート