hugo theme charlolamode

Charlola.Mode

このWebサイトのテーマは、Hugo Frameworkに基づいています。これは、テンプレートのPapermodとHugo-Paperの変更です。最小限のデザインと最も基本的な機能により、迅速かつ使いやすいです。

同様の例をご覧ください：www.cmart1n.comをご覧ください

ヒューゴへのリンク：https：//themes.gohugo.io/themes/hugo-theme-charlolamode/。

特徴

1. ホームページをカスタマイズします...

   • ページのタイトル
   • あなたの名前
   • 説明
   • ソーシャルアイコン
   • ボタン

2. 背景、テキスト、アイコンなどのすべての要素の色を変更...

3. タブをクリックすると、投稿のリストが表示されます。

   • 投稿は画像で視覚化できます
   • 投稿は外部リンクにつながる可能性があります

クイックスタート

1. Hugoをインストールします
2. gitをインストールします

ターミナルまたはコマンドラインを開きます

1. 新しいフォルダー「QuickStart」を作成する

 hugo new site quickstart

2. このフォルダーに移動します

 cd quickstart

3. 現在のディレクトリの空のgitリポジトリを初期化します

 git init

4. このリポジトリをフォルダーにクローンします

 git submodule add https://github.com/charlola/hugo-theme-charlolamode.git themes/charlolamode

5. config.tomlを削除します

 rm config.toml

6. 新しいconfig.ymlファイルにテーマを追加します

 echo "theme: charlolamode" >> config.yml

7. Hugoの開発サーバーを起動して、サイトをローカルに表示します。

 hugo server

ローカルサーバーが起動したら、サイトを見ることができます。 Webbrowserが自動的にポップアップしない場合は、ブラウザを開き、http：// localhost：1313を入力します。これで、ディレクトリでこのページの変更を開始できます。新しい変更を保存すると、このサイトは自動的に更新され、変更が表示されます。

ブログを編集するためのビジュアルスタジオコードを開きます

3. Visual Studioコードのようなお気に入りのエディターを開きます

基本的な構成

config.ymlはあなたの親友です。 ...などの情報を変更して追加できます。

• ページのタイトル
• あなたの名前
• 説明
• ソーシャルアイコン
• ボタン

参照のためにCharlolamode/config.ymlをご覧ください。 LinkedIn、Twitter、YouTube、Instagramなどのタブやソーシャルアイコンを簡単に追加する方法を示すコメントの例があります。テーマのconfig.ymlを上書きするconfig.ymlのコンテンツをコピーします。

プロファイル画像を変更します

プロフィール写真を追加するには、フォルダーの静的/画像にプロファイルを置き換えます。幸せな顔で画像を取ることを確認してください:)

タブを追加します

config.ymlでは、「記事」と「連絡先」の横に新しいタブを追加できます。チェックアウトする「カテゴリ」。

注意config.ymlに新しいタブを追加する場合、次のことを行う必要があります。

1. 新しいタブと同じ名前のディレクトリ「コンテンツ」に新しいフォルダーを追加します。
2. _index.mdを記事から新しいフォルダーにコピーします。

新しいコンテンツを追加します

新しいコンテンツをプッシュしたい場合は、新しいフォルダーに新しいMarkdownファイルを作成します。コンテンツ/記事/article.mdで例を見つけます。

色を変更します

Assets/CSS/CORE/THEM-VARS.CSSを見て、色で遊んでください。

「プロファイルモード」を無効にする

プロファイル情報ではなく、ホームページに記事のコンテンツを表示するには、パラメージの下で以下を設定します。

 profileMode: 
    enabled: false

記事のコンテンツがホームページに移動すると、記事のメインメニューエントリを削除することが望ましい場合があります。

 menu:
    main:
        - name: Contact
          url: contact/
          weight: 30
        # - name: Articles
        #   url: articles/
        #   weight: 20
        - name: Projects
          url: projects
          weight: 15

ありがとう！

私はこれを構築するために自分の時間を投資しました、そしてそれは完全に無料です。このテンプレートが時間を節約した場合は、コーヒーの寄付でこのページをお気軽にサポートしてください:)

フィードバックを得て、LinkedInからメッセージを送信したいです！

オンラインウェブサイト

Webサイトをオンラインでプッシュするには、Azure Static Webを使用するか、Netflifyを使用してください。 Azure Static Webを使用しています。