mirror of https://github.com/jpanther/congo.git
98 lines
6.7 KiB
Markdown
98 lines
6.7 KiB
Markdown
---
|
||
title: "What's New in 2.0 ✨"
|
||
date: 2022-01-19
|
||
draft: false
|
||
description: "Congo 2.0の新機能について"
|
||
summary: "Version 2.0では、Congoを新たな高みへと導き、その軽量さを維持しながらも、テーマをさらに強力なものにしています。"
|
||
tags: ["new", "docs"]
|
||
---
|
||
|
||
{{< lead >}}
|
||
Congo 2.0には、大量の新機能と最適化が詰め込まれています。
|
||
{{< /lead >}}
|
||
|
||
Congoの当初の目的は、シンプルで軽量なテーマを開発することでした。Version 2では、これをさらに一歩進め、軽量でありながら、よりパワフルなテーマとなっています。
|
||
|
||
新機能については以下をご覧ください。アップグレードの準備ができましたら、[アップグレードガイド]({{< ref "upgrade" >}})をご覧ください。
|
||
|
||
## Tailwind CSS 3.0
|
||
|
||
Tailwind CSSはCongoの中核であり、この新しいリリースには最新の[Tailwind CSS version 3](https://tailwindcss.com/blog/tailwindcss-v3)が含まれています。Tailwind CSS 3.0では、パフォーマンスが最適化され、新しいCSS機能がサポートされています。
|
||
|
||
{{< youtube "TmWIrBPE6Bc" >}}
|
||
|
||
この新バージョンを実装することで、テーマからTailwindプラグインの依存関係をいくつか削除し、全体的なフットプリントを軽量に保つことができるようになりました。
|
||
|
||
## 多言語対応
|
||
|
||
要望の多かった多言語対応を行いました！複数の言語でコンテンツを公開する場合、サイトはすべての翻訳が利用可能な状態で構築されます。
|
||
|
||
<div class="text-2xl text-center" style="font-size: 2.8rem">:gb: :de: :fr: :es: :cn: :jp: :brazil: :tr: :bangladesh:</div>
|
||
|
||
コミュニティの貢献によって、Congoはすでに[23言語](https://github.com/jpanther/congo/tree/dev/i18n)以上に翻訳されています。新しい翻訳も[Pull Request](https://github.com/jpanther/congo/pulls)からいつでも歓迎しています！
|
||
|
||
## Right to Left言語のサポート
|
||
|
||
新しいTailwindの利点の一つは、RTL言語サポートを追加する機能です。有効にすると、サイト全体のコンテンツが右から左にリフローされます。テーマ内のすべての要素は、RTL言語でも見栄えが良くなるように再構築されています。
|
||
|
||
RTLは言語ごとに制御されるため、プロジェクト内でRTLとLTRの両方のコンテンツを混ぜてマッチさせることができ、テーマはそれに応じて対応します。
|
||
|
||
## 画像の自動リサイズ
|
||
|
||
Congo 2.0の大きな変更点は、画像の自動リサイズ機能の追加です。Hugo Pipesのパワーを使って、Markdownコンテンツ内の画像が自動的に異なる出力サイズに拡大縮小されるようになりました。これらの画像はHTMLの `srcset` 属性を使って表示され、サイト訪問者に最適化されたファイルサイズを提供することができます。
|
||
|
||
|
||
|
||
```html
|
||
<!-- Markdown:  -->
|
||
<img
|
||
srcset="
|
||
/image_320x0_resize_q75_box.jpg 320w,
|
||
/image_635x0_resize_q75_box.jpg 635w,
|
||
/image_1024x0_resize_q75_box.jpg 1024w,
|
||
/image_1270x0_resize_q75_box.jpg 2x"
|
||
src="/image_635x0_resize_q75_box.jpg"
|
||
alt="My image"
|
||
/>
|
||
```
|
||
|
||
あなたは何も変更する必要がありません！標準的なMarkdown画像構文を挿入するだけで、あとはテーマにお任せください。もう少しコントロールしたい場合は、 `figure` ショートコードを完全に書き換えて、同じリサイズの利点を提供します。
|
||
|
||
## パフォーマンスの改善
|
||
|
||
今回のアップデートでは、全体的にパフォーマンスが向上している。今回のリリースの主な目的はLighthouseのスコアを向上させることで、Congoは4つの指標すべてで100点満点を獲得しました。
|
||
|
||
{{< screenshot src="lighthouse.jpg" >}}
|
||
|
||
個々の変更点が多すぎて、ここでは紹介しきれませんが、さらに詳しく知りたい場合は、[Lighthouseのレポート](lighthouse.html)をご覧ください。実際のパフォーマンスは、サーバーの構成によって異なります。
|
||
|
||
## サイト内検索
|
||
|
||
[Fuse.js](https://fusejs.io)を利用したサイト内検索で、訪問者が素早く簡単にコンテンツを見つけることができます。すべての検索はクライアントサイドで実行されるため、サーバー上で設定する必要がなく、クエリは超高速で実行されます。サイト設定でこの機能を有効にするだけで準備は完了です。また、フルキーボードナビゲーションにも対応しています！
|
||
|
||
## 記事ページ内の目次
|
||
|
||
要望の多かった記事ページ内の目次をサポートしました。このページで実際にご覧いただけます。コンテンツは完全にレスポンシブで、異なる画面解像度で利用可能なスペースを活用するように調整されます。
|
||
|
||
グローバルまたは記事単位で利用可能な目次は、Hugoの標準設定値を使用して完全にカスタマイズすることができます。
|
||
|
||
## アクセシビリティの改善
|
||
|
||
より多くの項目にARIA記述を追加し、特定のテキスト要素のコントラストを調整してアクセシビリティを改善しました。
|
||
|
||
Congo 2.0では、クイックナビゲーションを可能にする「コンテンツへスキップ」と「トップへスクロール」リンクも導入されています。また、マウスに手を伸ばすことなく検索などの項目を有効にするためのキーボードショートカットもあります。
|
||
|
||
新しい画像サイズ変更機能は、 `alt` と `title` 要素の完全なコントロールを提供し、すべての訪問者にアクセシブルな体験を提供します。
|
||
|
||
## その他もろもろ
|
||
|
||
他にも数え切れないほどの細かな変更があります。記事やリストページでTaxonomyを表示できるようになったり、新しい `headline` の著者パラメーターを使ってホームページをカスタマイズできるようになったり。また、SEOのパフォーマンスをさらに最適化するJSON-LDも改善されています。さらに、一貫したデザイン言語を保証するために、テーマ全体がさらに洗練されました。
|
||
|
||
:rocket: 詳細は[full changelog](https://github.com/jpanther/congo/blob/dev/CHANGELOG.md)をご覧ください。
|
||
|
||
## Next steps
|
||
|
||
準備ができたら[Version 1.xからのアップグレードガイド]({{< ref "upgrade" >}})をお読みください。Congoを初めてお使いになる方は[インストール]({{< ref "docs/installation" >}})に進んでください。
|
||
|
||
---
|