From 4625eff1403d82535d9a663e332b957d538dd148 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8A=B1=E9=AD=91?=
 <50327243+QinghuaMa@users.noreply.github.com>
Date: Mon, 25 Nov 2024 13:54:53 +0800
Subject: [PATCH] 2024-11-25 13:54:52 +0800

---
 _posts/2024-11-25-HTML-`time`-Tag.md          | 41 ++++++++++++++++++
 .../2024-11-25-Date-and-Time-Formats.md       | 43 +++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 _posts/2024-11-25-HTML-`time`-Tag.md
 create mode 100644 _posts/web development/jekyll/2024-11-25-Date-and-Time-Formats.md

diff --git a/_posts/2024-11-25-HTML-`time`-Tag.md b/_posts/2024-11-25-HTML-`time`-Tag.md
new file mode 100644
index 0000000..78cf944
--- /dev/null
+++ b/_posts/2024-11-25-HTML-`time`-Tag.md
@@ -0,0 +1,41 @@
+---
+title: HTML `<time>` Tag
+toc: false
+categories:
+ - Web Development
+tags:
+ - HTML
+date: 2024-11-25 13:22:16 +0800
+last_modified_at: 2024-11-25 13:22:16 +0800
+---
+
+HTML `<time>` tag[^1]:
+
+<div class="quote--left" markdown="1">
+
+The `<time>` tag defines a specific time (or datetime).
+
+The `datetime` attribute of this element is used translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.
+
+</div>
+
+Those available `datetime` formats can be found in documentations[^2][^3].
+
+It should be noted that "the `<time>` element does not render as anything special in any of the major browsers"[^4], for example:
+
+```html
+Today is <time datetime="2024-11-25">Nov. 25, 2024</time>.
+```
+
+Today is <time datetime="2024-11-25">Nov. 25, 2024</time>.
+
+We can see there is nothing special, but we can check its difference in developer mode. So I think the `<time>` tag is mainly convenient for web development, e.g. when using CSS and JavaScript, not for formating date strings.
+
+<br>
+
+**References**
+
+[^1]: [HTML `<time>` Tag](https://www.w3schools.com/tags/tag_time.asp).
+[^2]: [HTML `<time>` `datetime` Attribute](https://www.w3schools.com/tags/att_time_datetime.asp).
+[^3]: [{% raw %}`<time>`{% endraw %}: The (Date) Time element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time).
+[^4]: [W3Schools Tryit Editor](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_time).
\ No newline at end of file
diff --git a/_posts/web development/jekyll/2024-11-25-Date-and-Time-Formats.md b/_posts/web development/jekyll/2024-11-25-Date-and-Time-Formats.md
new file mode 100644
index 0000000..c685941
--- /dev/null
+++ b/_posts/web development/jekyll/2024-11-25-Date-and-Time-Formats.md	
@@ -0,0 +1,43 @@
+---
+title: Date and Time Formats in Jekyll 
+toc: false
+categories:
+ - Web Development
+tags:
+ - Jekyll
+date: 2024-11-25 10:00:50 +0800
+last_modified_at: 2024-11-25 13:13:00 +0800
+---
+
+**Predefined date filters**[^1][^2]
+
+- {% raw %}`{{ "2024-11-25 10:00:50 +0800" | date_to_xmlschema }}`{% endraw %}: {{ "2024-11-25 10:00:50 +0800" | date_to_xmlschema }}
+- {% raw %}`{{ "2024-11-25 10:00:50 +0800" | date_to_rfc822 }}`{% endraw %}: {{ "2024-11-25 10:00:50 +0800" | date_to_rfc822 }}
+- {% raw %}`{{ "2024-11-25 10:00:50 +0800" | date_to_string }}`{% endraw %}: {{ "2024-11-25 10:00:50 +0800" | date_to_string }}
+- {% raw %}`{{ "2024-11-25 10:00:50 +0800" | date_to_long_string }}`{% endraw %}: {{ "2024-11-25 10:00:50 +0800" | date_to_long_string }}
+- {% raw %}`{{ "2024-11-25 10:00:50 +0800" | date_to_long_string: "ordinal" }}`{% endraw %}: {{ "2024-11-25 10:00:50 +0800" | date_to_long_string : "ordinal" }}
+
+<br>
+
+**Combined date filters**[^2]
+
+- {% raw %}`{{ "2024-11-25 10:00:50 +0800" | date: '%Y-%m-%d' }}`{% endraw %}: {{ "2024-11-25 10:00:50 +0800" | date: '%Y-%m-%d' }}
+- {% raw %}`{{ "2024-11-25 10:00:50 +0800" | date: '%m/%d/%Y' }}`{% endraw %}: {{ "2024-11-25 10:00:50 +0800" | date: '%m/%d/%Y' }}
+- {% raw %}`{{ "2024-11-25 10:00:50 +0800" | date: '%-m/%-d/%y' }}`{% endraw %}: {{ "2024-11-25 10:00:50 +0800" | date: '%-m/%-d/%y' }}
+- {% raw %}`{{ "2024-11-25 10:00:50 +0800" | date: '%B %-d, %Y' }}`{% endraw %}: {{ "2024-11-25 10:00:50 +0800" | date: '%B %-d, %Y' }}
+- {% raw %}`{{ "2024-11-25 10:00:50 +0800" | date: '%-d %B %Y' }}`{% endraw %}: {{ "2024-11-25 10:00:50 +0800" | date: '%-d %B %Y' }}
+- {% raw %}`{{ "2024-11-25 10:00:50 +0800" | date: '%B %-d, %Y' }}`{% endraw %}: {{ "2024-11-25 10:00:50 +0800" | date: '%B %-d, %Y' }}
+- {% raw %}`{{ "2024-11-25 10:00:50 +0800" | date: '%A, %B %-d, %Y' }}`{% endraw %}: {{ "2024-11-25 10:00:50 +0800" | date: '%A, %B %-d, %Y' }}
+
+If there is no `-` before `d` in date format `'%-d %B %Y'`, numbers below ten would have a leading zero[^3], for example, {% raw %}`{{ "2024-11-07 10:00:50 +0800" | date: '%d %B %Y' }}`{% endraw %}({{ "2024-11-07 10:00:50 +0800" | date: '%d %B %Y' }}) vs. {% raw %}`{{ "2024-10-07 10:00:50 +0800" | date: '%-d %B %Y' }}`{% endraw %} ({{ "2024-10-07 10:00:50 +0800" | date: '%-d %B %Y' }}).
+{: .notice--primary}
+
+There are more formats of year, month, day, hour, minute, second, time zone, weekday, and week number etc. and more date patterns formed by their combination in blog[^2].
+
+<br>
+
+**References**
+
+[^1]: [Liquid Filters \| Jekyll • Simple, blog-aware, static sites](https://jekyllrb.com/docs/liquid/filters/).
+[^2]: [Jekyll Time and Date · Time And Date Formats used for J1 Template](https://jekyll.one/pages/public/tools/toolbox/jekyll/date_time_formats/).
+[^3]: [liquid - How does Jekyll date formatting work?](https://stackoverflow.com/questions/7395520/how-does-jekyll-date-formatting-work).