Skip to content

Commit

Permalink
feat: add article image support
Browse files Browse the repository at this point in the history
  • Loading branch information
tomowang committed Apr 28, 2024
1 parent 1277c7b commit e8f01f0
Show file tree
Hide file tree
Showing 11 changed files with 187 additions and 31 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ Check [https://hugo-theme-tailwind.tomo.dev/](https://hugo-theme-tailwind.tomo.d
* Multilingual
* Default image process for lazy load and srcset
* Search (by using [fuse.js](https://fusejs.io/) and [mark.js](https://markjs.io/))
* Image support for article (using `image` param in front matter)

## Installation

Expand Down
91 changes: 91 additions & 0 deletions assets/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -1145,6 +1145,10 @@ video {
position: static;
}

.fixed {
position: fixed;
}

.absolute {
position: absolute;
}
Expand Down Expand Up @@ -1280,6 +1284,10 @@ video {
height: 3rem;
}

.h-36 {
height: 9rem;
}

.h-5 {
height: 1.25rem;
}
Expand Down Expand Up @@ -1434,6 +1442,10 @@ video {
align-self: center;
}

.overflow-hidden {
overflow: hidden;
}

.rounded {
border-radius: 0.25rem;
}
Expand Down Expand Up @@ -1505,6 +1517,11 @@ video {
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.bg-indigo-600 {
--tw-bg-opacity: 1;
background-color: rgb(79 70 229 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -1685,6 +1702,11 @@ video {
letter-spacing: -0.025em;
}

.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-emerald-600 {
--tw-text-opacity: 1;
color: rgb(5 150 105 / var(--tw-text-opacity));
Expand Down Expand Up @@ -2881,6 +2903,19 @@ video {
}

@media (min-width: 640px) {
.sm\:block {
display: block;
}

.sm\:hidden {
display: none;
}

.sm\:bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}

.sm\:text-5xl {
font-size: 3rem;
line-height: 1;
Expand Down Expand Up @@ -2921,6 +2956,10 @@ video {
display: none;
}

.md\:h-48 {
height: 12rem;
}

.md\:w-1\/3 {
width: 33.333333%;
}
Expand Down Expand Up @@ -2962,13 +3001,65 @@ video {
border-left-width: 1px;
}

.md\:bg-yellow-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 240 138 / var(--tw-bg-opacity));
}

.md\:pl-2 {
padding-left: 0.5rem;
}
}

@media (min-width: 1024px) {
.lg\:block {
display: block;
}

.lg\:hidden {
display: none;
}

.lg\:max-w-5xl {
max-width: 64rem;
}

.lg\:bg-green-200 {
--tw-bg-opacity: 1;
background-color: rgb(187 247 208 / var(--tw-bg-opacity));
}
}

@media (min-width: 1280px) {
.xl\:block {
display: block;
}

.xl\:hidden {
display: none;
}

.xl\:h-60 {
height: 15rem;
}

.xl\:bg-blue-200 {
--tw-bg-opacity: 1;
background-color: rgb(191 219 254 / var(--tw-bg-opacity));
}
}

@media (min-width: 1536px) {
.\32xl\:block {
display: block;
}

.\32xl\:hidden {
display: none;
}

.\32xl\:bg-pink-200 {
--tw-bg-opacity: 1;
background-color: rgb(251 207 232 / var(--tw-bg-opacity));
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions exampleSite/content/post/markdown-syntax/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ categories = [
]
series = ["Themes Guide"]
aliases = ["migrate-from-jekyl"]
# Photo by <a href="https://unsplash.com/@drucsko?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Dávid Drucskó</a> on <a href="https://unsplash.com/photos/a-computer-screen-with-a-bunch-of-text-on-it-eZ_hyar3qqc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
image = "images/david-drucsko-eZ_hyar3qqc-unsplash.jpg"
+++

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
Expand Down
2 changes: 2 additions & 0 deletions exampleSite/content/post/markdown-syntax/index.zh-cn.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ categories = [
]
series = ["Themes Guide"]
aliases = ["migrate-from-jekyl"]
# Photo by <a href="https://unsplash.com/@drucsko?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Dávid Drucskó</a> on <a href="https://unsplash.com/photos/a-computer-screen-with-a-bunch-of-text-on-it-eZ_hyar3qqc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
image = "images/david-drucsko-eZ_hyar3qqc-unsplash.jpg"
+++

本文档提供可用于 Hugo 内容文件的基本 Markdown 语法示例,并且还展示了 Hugo 主题中是否用 CSS 修饰了 HTML 基本元素。
Expand Down
4 changes: 3 additions & 1 deletion exampleSite/content/post/math-typesetting/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ title: Math Typesetting
date: 2019-03-08
description: A brief guide to setup KaTeX
math: true
# Photo by <a href="https://unsplash.com/@antoine1003?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Antoine Dautry</a> on <a href="https://unsplash.com/photos/mathematics-computation-05A-kdOH6Hw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
image: "/images/antoine-dautry-05A-kdOH6Hw-unsplash.jpg"
---

Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
Expand Down Expand Up @@ -35,7 +37,7 @@ In this example we will be using [KaTeX](https://katex.org/)
{{ end }}
{{</ math.inline >}}
### Examples
## Examples
{{< math.inline >}}
<p>
Expand Down
4 changes: 3 additions & 1 deletion exampleSite/content/post/math-typesetting/index.zh-cn.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ title: 数学符号
date: 2019-03-08
description: KaTeX 设置简要指南
math: true
# Photo by <a href="https://unsplash.com/@antoine1003?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Antoine Dautry</a> on <a href="https://unsplash.com/photos/mathematics-computation-05A-kdOH6Hw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
image: "/images/antoine-dautry-05A-kdOH6Hw-unsplash.jpg"
---

在 Hugo 项目中,可以通过使用第三方 JavaScript 库来启用数学符号。
Expand Down Expand Up @@ -35,7 +37,7 @@ math: true
{{ end }}
{{</ math.inline >}}
### 示例
## 示例
{{< math.inline >}}
<p>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 14 additions & 7 deletions layouts/_default/list.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,22 @@
<div class="flex flex-row">
<section class="flex flex-col w-full md:w-2/3">
{{ range (.Paginate $pages).Pages }}
<article class="flex flex-col gap-y-3 p-6 mt-6 mx-2 md:mx-0 rounded-lg shadow-md bg-white dark:bg-gray-700">
<h2 class="text-4xl font-semibold text-slate-800 dark:text-slate-200">
<a href="{{ .RelPermalink }}">{{ .Title | .RenderString }}</a>
</h2>
<article class="flex flex-col mt-6 mx-2 md:mx-0 rounded-lg overflow-hidden shadow-md bg-white dark:bg-gray-700">
<div>
<a href="{{ .RelPermalink }}">
{{ partial "block/image.html" . }}
</a>
</div>
<div class="flex flex-col gap-y-3 p-6">
<h2 class="text-4xl font-semibold text-slate-800 dark:text-slate-200">
<a href="{{ .RelPermalink }}">{{ .Title | .RenderString }}</a>
</h2>

{{ partial "block/desc.html" . }}
{{ partial "block/taxonomies.html" .}}
{{ partial "block/desc.html" . }}
{{ partial "block/taxonomies.html" .}}

{{ partial "block/time.html" . }}
{{ partial "block/time.html" . }}
</div>
</article>
{{ end }}
</section>
Expand Down
52 changes: 30 additions & 22 deletions layouts/_default/single.html
Original file line number Diff line number Diff line change
@@ -1,33 +1,41 @@
{{ define "main" }}
<div class="w-full max-w-4xl lg:max-w-5xl">
<div class="flex flex-col gap-y-3 p-6 mt-6 mx-2 md:mx-0 rounded-lg shadow-md bg-white dark:bg-gray-700">
<h1 class="text-4xl font-semibold text-slate-800 dark:text-slate-100">
<a href="{{ .RelPermalink }}">{{ .Title | .RenderString }}</a>
</h1>
<div class="flex flex-col mt-6 mx-2 md:mx-0 rounded-lg overflow-hidden shadow-md bg-white dark:bg-gray-700">
<div>
<a href="{{ .RelPermalink }}">
{{ partial "block/image.html" . }}
</a>
</div>
<div class="flex flex-col gap-y-3 p-6">
<h1 class="text-4xl font-semibold text-slate-800 dark:text-slate-100">
<a href="{{ .RelPermalink }}">{{ .Title | .RenderString }}</a>
</h1>

{{ with .Description }}
<h2 class="my-4 text-large text-slate-600 dark:text-slate-300">
{{ . | $.Page.RenderString }}
</h2>
{{ end }}
{{ partial "block/taxonomies.html" .}}
{{ with .Description }}
<h2 class="my-4 text-large text-slate-600 dark:text-slate-300">
{{ . | $.Page.RenderString }}
</h2>
{{ end }}
{{ partial "block/taxonomies.html" .}}

{{ partial "block/time.html" . }}
{{ partial "block/time.html" . }}

{{ if or .Params.Toc $.Site.Params.Toc }}
{{ if ne .Params.Toc false }}
<section class="prose prose-slate dark:prose-invert w-full max-w-4xl lg:max-w-5xl mt-6">
<h2>{{ T "table_of_contents" }}</h2>
<aside>{{ .TableOfContents }}</aside>
</section>
{{ if or .Params.Toc $.Site.Params.Toc }}
{{ if ne .Params.Toc false }}
<section class="prose prose-slate dark:prose-invert w-full max-w-4xl lg:max-w-5xl mt-6">
<h2>{{ T "table_of_contents" }}</h2>
<aside>{{ .TableOfContents }}</aside>
</section>
{{ end }}
{{ end }}
{{ end }}

<article class="mt-6 w-full max-w-4xl lg:max-w-5xl prose prose-slate dark:prose-invert prose-quoteless post-content">
{{ .Content | safeHTML }}
</article>
<article class="mt-6 w-full max-w-4xl lg:max-w-5xl prose prose-slate dark:prose-invert prose-quoteless post-content">
{{ .Content | safeHTML }}
</article>

{{ partial "comments.html" . }}

{{ partial "comments.html" . }}
</div>
</div>
</div>
{{ end }}
41 changes: 41 additions & 0 deletions layouts/partials/block/image.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
{{- $alt := .Title -}}

{{- $respSizes := slice "960" "1600" -}}
{{- $hint := "photo" -}}
{{- $filter := "box" -}}
{{- if .Params.image -}}
{{- $dest := .Params.image | safeURL -}}
{{- $dest = path.Base $dest -}}
{{- with (.Resources.ByType "image").GetMatch ( printf "{**/%s,%s}" $dest $dest ) -}}
{{- $src := . -}}
{{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}}
{{- $actualImg := $src.Resize (print "640x jpg " $filter) -}}
<picture>
<source type="image/webp" srcset="
{{- with $respSizes -}}
{{- range $i, $e := . -}}
{{- if ge $src.Width . -}}
{{- if $i }}, {{ end -}}{{- ($src.Resize (print . "x webp " $hint " " $filter) ).RelPermalink }} {{ . }}w
{{- end -}}
{{- end -}}
{{- end -}}" sizes="{{ $dataSzes }}" />
<source type="image/jpeg" srcset="
{{- with $respSizes -}}
{{- range $i, $e := . -}}
{{- if ge $src.Width . -}}
{{- if $i }}, {{ end -}}{{- ($src.Resize (print . "x jpg " $filter) ).RelPermalink }} {{ . }}w
{{- end -}}
{{- end -}}
{{- end -}}" sizes="{{ $dataSzes }}" />
<img class="w-full object-cover h-36 md:h-48 xl:h-60" src="{{ $actualImg.RelPermalink }}" width="{{ $src.Width }}" height="{{ $src.Height }}" alt="{{ $alt }}" title="{{ $alt }}" loading="lazy" />
</picture>
<!-- or otherwise simply load the URL -->
{{- else -}}
<figure>
<img class="w-full object-cover h-36 md:h-48 xl:h-60" src="{{ .Params.image | safeURL }}"
alt="{{ $alt }}" title="{{ $alt }}"
loading="lazy"
>
</figure>
{{- end -}}
{{- end -}}

0 comments on commit e8f01f0

Please sign in to comment.