自分だけの無料ホームページ作成3部 - ブログの作成
第1部と 第2部に続き、ホームページ制作を続けます。 もし、3部ですぐにアクセスした方は、1,2部を続けて見ながらRStudioを利用し、RStudioを利用し、この記事をもう一度見てみてください。
今回の記事では、ホームページ内にブログ形式のページを作ってみたいと思います。ゆっくりついてきていただければ大丈夫です。コーディングは慣れることだと覚えていますよね。(実は今やっていることはコーディングと言うには少し弱い面もあります。)とにかく、下記のクオートサイトで実装しておいたブログ形式のページを私と一緒に作ってみましょう。
ホームページYAMLファイル設定
まず、rootフォルダにある_quarto.ymlファイルをクリックしてソースコード編集ウインドウを開きます。 そして、下記のコードを入力します。 '-' の位置を上の '-' と同じに合わせます。 この作業でナビゲーションバーにBlogメニューを挿入して、クリックしたらブログページが開きます。hrefアドレスを見ると、当然rootフォルダにdocsフォルダ、その下にblogフォルダを順次作ってindex.qmdファイルも生成する必要があることが動物的な感覚で感じられますよね(私が動物だから私だけ感じてるんでしょうか？笑)
- text: "ブログ"
href: docs/blog/index.qmd
blogフォルダ内のindex.qmdを設定する
ナビゲーションバー(navbar)のBlogメニューをクリックしたら表示されるページのためにblogフォルダ内に下の図のようにindex.qmdを生成してそのファイルに次のソースコードを入力して保存します。もちろん、タイトルとサブタイトルは好きなように変えてください。
---ーー
title: IT遊び場ブログ
subtitle: R＆Python＆AIに関するニュース、豆知識
listing：
sort: "date desc" # ブログの最新記事が一番上に表示される
contents: "posts"
sort-ui: false
filter-ui: false
categories: true
feed: true
page-layout: full
margin-header: signup.html
title-block-banner: "#EDF3F9"
title-block-banner-color: body
search: false
---...
blogフォルダ内のsignup.htmlを設定します。
上のステップで rootフォルダ/docs/blog/index.qmdを設定しましたよね？ これで、ブログに新しい記事がアップロードされたら、登録したメールアドレスで更新状況を確認できるよう サブスクリプションサービスの設定をすることにします。 実はこの部分は該当サービス提供会社のソリューションの勉強が必要な事項なので、参考程度にしてください。実は私も勉強が必要な部分ですが。とりあえず、形式を整えることに集中してみます。(後日、関連的にポスティングしてみます。 もし、1分1秒でもお急ぎの方のためのサービスです。 こちらをクリックしてご覧ください〜)
blogフォルダに singup.html(大声で歌うことではありません～！単語のスペルに注意！) signup.htmlを生成して、そのファイルに下記のソースコードをコピーして貼り付けます。
<!-- Begin Mailchimp Signup Form -->
<div id="mc_embed_signup" style="padding-bottom: 1em; max-width: 400px;" class="ms-auto me-auto">
<p style="font-weight: 600; margin-bottom: 0;">購読する</p>
<span style="font-size: 0.9em;">このブログをお楽しみに？ メールで新着記事をお知らせします：</span>
<form action="https://quarto.us14.list-manage.com/subscribe/post?u=c79fb56a311ae347fbe916740&id=ec05dfca03" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="input-group mt-1 mb-2">
<input type="email" class="form-control" placeholder="メールアドレス" aria-label="メールアドレス" name="EMAIL" style="font-size: 0.8em; padding: .2em;">
</div>
<div id="mce-responses" class="clear foot">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c79fb56a311ae347fbe916740_ec05dfca03" tabindex="-1" value=""></div>
<div class="optionalParent">
<div class="clear foot" style="display: flex; align-items: center; justify-content: center;">
<input type="submit" value="購読する" name="subscribe" style="min-width: 150px; font-size: 0.8em;" id="mc-embedded-subscribe" class="button btn btn-light btn-sm ms-auto me-auto">
</div>
</div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
postsフォルダ内のYAMLファイルを設定する
次に、ポスティングのための基本設定のためblogフォルダの中にpostsフォルダを生成します。 そしてpostsフォルダ内に_metadata.ymlという名前のファイルを生成してそのファイルに下記のソースコードをコピーして貼り付けます。
のコメント：
giscus：
repo: quarto-dev/quarto-web
category: ブログ
title-block-banner: "#EDF3F9"
title-block-banner-color: body
toc-location: left
の形式を使用しています：
html：
include-after-body：
- ../signup.html
search: false
実際に投稿してみる
それでは、実際にポスティングする作業をします。 postsフォルダ内のurlアドレスに入るテキストでフォルダを生成します。ここでは 2024-01-24-first-post 名前のフォルダを生成してその中にindex.qmdファイルを生成します。 そして下記のソースコードをコピーして貼り付けます。 そしてレンダリングを実行してlocalhostで表示してくれるウェブサイトでBlogメニューをクリックすると下記のように最初のポストが完成されたことが確認できます。(参考までにイメージは別途作業をしてないので表示されませんが、少ししてからその作業をやってみます。)そのポストをクリックすると詳細を確認することができます。
--- ブログリスティング成功
title: ブログリスティング成功
subtitle: これは私の最初の投稿です。
description: |｜。
思ったより難しいけど楽しいです。
categories：
- Quarto
- study
author: TERE
date: "01/24/2024"
image: "success.jpg"
image-alt: "成功する子供のイメージです。"
---画像-alt: "成功している子供のイメージです。
思ったより複雑ですが、面白いです。
それでは、2回目の投稿をするためにはどうしたらいいでしょうか？少し分かるでしょうか？ postsフォルダ内に別のポストフォルダを作り、そのフォルダにindex.qmdを生成してレンダリングすればいいです。
1番目と2番目のポスティング作業を見ながら、コードソースウィンドウに表示されるtitle、subtitle、description、categories、author、dataをレンダリングして、ウェブサイトのBlogメニューに表示されるものとマッチしますか？他のことより一つだけ説明します、 カテゴリー の部分にAuthoring, Featuresなどでポストがグループ化されたのが見えますか？レンダリングされたBlogメニュー画面で右側真ん中のCategoriesの下にあるリストをクリックすると、そのキーワードに合うブログだけをフィルタリングして見ることができます。
今日も短く、簡単に理解できるようにしようとしましたが、やっぱり長くなってしまいましたね。 ㅜㅜㅜ
人生が豊作になるその日まで！secondlife.lolでテリーでした。
ありがとうございます〜。
追加1.ポストリストに画像を挿入(サムネイル形式)
ウェブサイトのブログメニューでポストがリストアップされる部分で、そのポストにサムネイル形式で画像が表示されるようにしてみます。 既存に作った最初のポストフォルダ(2024-01-24-first-post)にサムネイル画像をアップロードした後、index.qmdファイルを開いて イメージ と image-alt に該当する画像の内容を入力します。これで終わりです。思ったより簡単ではないでしょうか？ image-altは、何らかの理由で画像が表示されないときにテキストに置き換えるフレーズのために必要です。
追加2.投稿内容に画像を挿入
ポスト内容内に画像を挿入するためには、上でアップロードした画像をそのまま使用します。下記のようなソースコードをコピーしてポスト内容の中の好きな位置に貼り付ければいいです。もちろん、画像ファイル名(success.jpg)とfig-altの内容は下記のソースコードの内容と違ってください。
{.preview-image fig-align="center" fig-alt="成功する子供のイメージです。"}。
'secondlife.lol'のすべてのコンテンツは著作権法の保護を受けています。無断転載やコピー、配布などを禁じます。
