Compare commits

..

25 Commits

Author SHA1 Message Date
Xin
f8e02e6151 fix: generate mobile nav data 2024-12-30 22:38:28 +00:00
Xin
b01c8ee405 chore: add example sidebar data file
- update docs
- replace original sidebar template with new sidebar template
- update references names
2024-12-29 00:33:09 +00:00
Xin
2acfb3b877 chore: test new sidebar rendering 2024-12-28 18:06:15 +00:00
Xin
4d9015aefe fix: replace deprecated site.IsMultiLingual 2024-12-28 17:55:55 +00:00
Xin
783ab1e97f Merge remote-tracking branch 'origin/main' into sidebar-data-source 2024-12-28 16:43:20 +00:00
Xin
168ecf91f4 Merge remote-tracking branch 'origin/main' into sidebar-data-source 2024-11-11 22:59:41 +00:00
Xin
9e7b13a0da chore: add experimental flag for hiding sidebar 2024-05-01 00:02:05 +01:00
Xin
66489e5274 chore: use index as fallback option 2024-04-30 23:56:57 +01:00
Xin
2004648076 fix: class name in render-data 2024-04-30 23:54:06 +01:00
Xin
0da6f97e99 fix: pass in the right page link 2024-04-30 23:03:09 +01:00
Xin
a4bfa2d97e chore: use utils/title to get title 2024-04-30 23:02:36 +01:00
Xin
3a2ce0b5c0 fix: class selector in sidebar.js 2024-04-30 22:44:09 +01:00
Xin
55af474f51 chore: update sidebar item list and link class names 2024-04-30 22:42:04 +01:00
Xin
b91cc79674 Merge remote-tracking branch 'origin/main' into sidebar-data-source 2024-04-30 08:58:06 +01:00
Xin
68e1e25119 feat: caching for sidebar items from data 2024-04-29 22:36:48 +01:00
Xin
8c789626be refactor: move sidebar item styles to css 2024-04-28 23:37:50 +01:00
Xin
a1c7acd6b5 feat: add params page.sidebar.source and page.sidebar.cache 2024-04-14 23:53:53 +01:00
Xin
e444156bb9 refactor: add back mobile and footer for sidebar 2024-04-14 12:28:39 +01:00
Xin
33f2cf653b feat: generate sidebar json data for rendering 2024-04-14 11:31:13 +01:00
Xin
63f153999e chore: basic rendering from data 2024-04-14 11:12:17 +01:00
Xin
c62b1fd401 refactor: make sidebar footer work 2024-04-14 10:23:52 +01:00
Xin
fdfdef69b5 chore: basic structure using new sidebar data 2024-04-05 21:30:24 +01:00
Xin
462cc5b68d chore: add new sidebar template 2024-04-04 21:57:17 +00:00
Xin
f40c7fd5d4 Merge remote-tracking branch 'origin/main' into sidebar-data-source 2024-04-04 20:39:47 +00:00
Xin
74fb165358 feat: sidebar util to read data 2024-04-03 22:36:58 +00:00
108 changed files with 1168 additions and 4237 deletions

View File

@ -31,7 +31,7 @@ jobs:
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
env: env:
HUGO_VERSION: 0.145.0 HUGO_VERSION: 0.138.0
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v4 uses: actions/checkout@v4

View File

@ -584,6 +584,10 @@ video {
margin-left: 0.25rem; margin-left: 0.25rem;
margin-right: 0.25rem; margin-right: 0.25rem;
} }
.hx-mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.hx-mx-4 { .hx-mx-4 {
margin-left: 1rem; margin-left: 1rem;
margin-right: 1rem; margin-right: 1rem;
@ -835,9 +839,6 @@ video {
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
} }
.hx-grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.hx-flex-col { .hx-flex-col {
flex-direction: column; flex-direction: column;
} }
@ -859,9 +860,6 @@ video {
.hx-justify-center { .hx-justify-center {
justify-content: center; justify-content: center;
} }
.hx-justify-between {
justify-content: space-between;
}
.hx-justify-items-start { .hx-justify-items-start {
justify-items: start; justify-items: start;
} }
@ -1027,10 +1025,6 @@ video {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(255 247 237 / var(--tw-bg-opacity)); background-color: rgb(255 247 237 / var(--tw-bg-opacity));
} }
.hx-bg-primary-100 {
--tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / var(--tw-bg-opacity));
}
.hx-bg-primary-400 { .hx-bg-primary-400 {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / var(--tw-bg-opacity)); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / var(--tw-bg-opacity));
@ -1310,10 +1304,6 @@ video {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(154 52 18 / var(--tw-text-opacity)); color: rgb(154 52 18 / var(--tw-text-opacity));
} }
.hx-text-primary-800 {
--tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-text-opacity));
}
.hx-text-red-900 { .hx-text-red-900 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(127 29 29 / var(--tw-text-opacity)); color: rgb(127 29 29 / var(--tw-text-opacity));
@ -2482,7 +2472,7 @@ article details > summary::before {
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity)); color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.sidebar-container { .hextra-sidebar-container {
position: fixed; position: fixed;
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
@ -2493,28 +2483,152 @@ article details > summary::before {
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
padding-top: calc(var(--navbar-height)); padding-top: calc(var(--navbar-height));
} }
.sidebar-container:is(html[class~="dark"] *) { .hextra-sidebar-container:is(html[class~="dark"] *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(17 17 17 / var(--tw-bg-opacity)); background-color: rgb(17 17 17 / var(--tw-bg-opacity));
} }
.sidebar-container { .hextra-sidebar-container {
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1); transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
will-change: transform, opacity; will-change: transform, opacity;
contain: layout style; contain: layout style;
backface-visibility: hidden; backface-visibility: hidden;
} }
} }
.sidebar-container li > div { .hextra-sidebar-container li > div {
height: 0px; height: 0px;
} }
.sidebar-container li.open > div { .hextra-sidebar-container li.open > div {
height: auto; height: auto;
padding-top: 0.25rem; padding-top: 0.25rem;
} }
.sidebar-container li.open > a > span > svg > path { .hextra-sidebar-container li.open > a > span > svg > path {
--tw-rotate: 90deg; --tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
.hextra-sidebar-container .hextra-sidebar-item-list {
position: relative;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.hextra-sidebar-container .hextra-sidebar-item-list::before {
position: absolute;
top: 0.25rem;
bottom: 0.25rem;
width: 1px;
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.hextra-sidebar-container .hextra-sidebar-item-list:is(html[class~="dark"] *)::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}
.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="ltr"], [dir="ltr"] *) {
margin-left: 0.75rem;
padding-left: 0.75rem;
}
.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="ltr"], [dir="ltr"] *)::before {
content: var(--tw-content);
left: 0px;
}
.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="rtl"], [dir="rtl"] *) {
margin-right: 0.75rem;
padding-right: 0.75rem;
}
.hextra-sidebar-container .hextra-sidebar-item-list:where([dir="rtl"], [dir="rtl"] *)::before {
content: var(--tw-content);
right: 0px;
}
.hextra-sidebar-container .hextra-sidebar-item-link {
display: flex;
cursor: pointer;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
border-radius: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: .875rem;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.hextra-sidebar-container .hextra-sidebar-item-link.active {
--tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / var(--tw-bg-opacity));
font-weight: 600;
--tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 32) / var(--tw-text-opacity));
}
@media (prefers-contrast: more) {
.hextra-sidebar-container .hextra-sidebar-item-link.active {
border-width: 1px;
--tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
}
}
.hextra-sidebar-container .hextra-sidebar-item-link.active:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / 0.1);
--tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
}
@media (prefers-contrast: more) {
.hextra-sidebar-container .hextra-sidebar-item-link.active:is(html[class~="dark"] *) {
--tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
}
}
.hextra-sidebar-container .hextra-sidebar-item-link.inactive {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
@media (prefers-contrast: more) {
.hextra-sidebar-container .hextra-sidebar-item-link.inactive {
border-width: 1px;
border-color: transparent;
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover {
--tw-border-opacity: 1;
border-color: rgb(17 24 39 / var(--tw-border-opacity));
}
}
.hextra-sidebar-container .hextra-sidebar-item-link.inactive:is(html[class~="dark"] *) {
--tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity));
}
.hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 44) / 0.05);
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity));
}
@media (prefers-contrast: more) {
.hextra-sidebar-container .hextra-sidebar-item-link.inactive:is(html[class~="dark"] *) {
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity));
}
.hextra-sidebar-container .hextra-sidebar-item-link.inactive:hover:is(html[class~="dark"] *) {
--tw-border-opacity: 1;
border-color: rgb(249 250 251 / var(--tw-border-opacity));
}
}
nav .search-wrapper { nav .search-wrapper {
display: none; display: none;
} }
@ -2688,11 +2802,6 @@ body:is(html[class~="dark"] *) {
content: var(--tw-content); content: var(--tw-content);
inset: 0px; inset: 0px;
} }
.before\:hx-inset-y-1::before {
content: var(--tw-content);
top: 0.25rem;
bottom: 0.25rem;
}
.before\:hx-mr-1::before { .before\:hx-mr-1::before {
content: var(--tw-content); content: var(--tw-content);
margin-right: 0.25rem; margin-right: 0.25rem;
@ -2701,37 +2810,16 @@ body:is(html[class~="dark"] *) {
content: var(--tw-content); content: var(--tw-content);
display: inline-block; display: inline-block;
} }
.before\:hx-w-px::before {
content: var(--tw-content);
width: 1px;
}
.before\:hx-bg-gray-200::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.before\:hx-opacity-25::before {
content: var(--tw-content);
opacity: 0.25;
}
.before\:hx-transition-transform::before { .before\:hx-transition-transform::before {
content: var(--tw-content); content: var(--tw-content);
transition-property: transform; transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms; transition-duration: 150ms;
} }
.before\:hx-content-\[\'\#\'\]::before {
--tw-content: '#';
content: var(--tw-content);
}
.before\:hx-content-\[\'\'\]::before { .before\:hx-content-\[\'\'\]::before {
--tw-content: ''; --tw-content: '';
content: var(--tw-content); content: var(--tw-content);
} }
.before\:hx-content-\[\\\"\\\"\]::before {
--tw-content: \"\";
content: var(--tw-content);
}
.first\:hx-mt-0:first-child { .first\:hx-mt-0:first-child {
margin-top: 0px; margin-top: 0px;
} }
@ -2910,15 +2998,6 @@ body:is(html[class~="dark"] *) {
border-color: rgb(163 163 163 / var(--tw-border-opacity)); border-color: rgb(163 163 163 / var(--tw-border-opacity));
} }
.contrast-more\:hx-border-primary-500 {
--tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
}
.contrast-more\:hx-border-transparent {
border-color: transparent;
}
.contrast-more\:hx-font-bold { .contrast-more\:hx-font-bold {
font-weight: 700; font-weight: 700;
} }
@ -2957,11 +3036,6 @@ body:is(html[class~="dark"] *) {
--tw-shadow-colored: 0 0 #0000; --tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.contrast-more\:hover\:hx-border-gray-900:hover {
--tw-border-opacity: 1;
border-color: rgb(17 24 39 / var(--tw-border-opacity));
}
} }
.dark\:hx-block:is(html[class~="dark"] *) { .dark\:hx-block:is(html[class~="dark"] *) {
display: block; display: block;
@ -3047,9 +3121,6 @@ body:is(html[class~="dark"] *) {
.dark\:hx-bg-primary-300\/10:is(html[class~="dark"] *) { .dark\:hx-bg-primary-300\/10:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 27) / 0.1);
} }
.dark\:hx-bg-primary-400\/10:is(html[class~="dark"] *) {
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness)) / 50) * 16) / 0.1);
}
.dark\:hx-bg-primary-600:is(html[class~="dark"] *) { .dark\:hx-bg-primary-600:is(html[class~="dark"] *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-bg-opacity)); background-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-bg-opacity));
@ -3108,18 +3179,10 @@ body:is(html[class~="dark"] *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(229 229 229 / var(--tw-text-opacity)); color: rgb(229 229 229 / var(--tw-text-opacity));
} }
.dark\:hx-text-neutral-400:is(html[class~="dark"] *) {
--tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity));
}
.dark\:hx-text-orange-300:is(html[class~="dark"] *) { .dark\:hx-text-orange-300:is(html[class~="dark"] *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(253 186 116 / var(--tw-text-opacity)); color: rgb(253 186 116 / var(--tw-text-opacity));
} }
.dark\:hx-text-primary-600:is(html[class~="dark"] *) {
--tw-text-opacity: 1;
color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 45) / var(--tw-text-opacity));
}
.dark\:hx-text-red-200:is(html[class~="dark"] *) { .dark\:hx-text-red-200:is(html[class~="dark"] *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(254 202 202 / var(--tw-text-opacity)); color: rgb(254 202 202 / var(--tw-text-opacity));
@ -3161,11 +3224,6 @@ body:is(html[class~="dark"] *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity)); color: rgb(156 163 175 / var(--tw-text-opacity));
} }
.dark\:before\:hx-bg-neutral-800:is(html[class~="dark"] *)::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}
.dark\:before\:hx-invert:is(html[class~="dark"] *)::before { .dark\:before\:hx-invert:is(html[class~="dark"] *)::before {
content: var(--tw-content); content: var(--tw-content);
--tw-invert: invert(100%); --tw-invert: invert(100%);
@ -3281,11 +3339,6 @@ body:is(html[class~="dark"] *) {
border-color: rgb(163 163 163 / var(--tw-border-opacity)); border-color: rgb(163 163 163 / var(--tw-border-opacity));
} }
.contrast-more\:dark\:hx-border-primary-500:is(html[class~="dark"] *) {
--tw-border-opacity: 1;
border-color: hsl(var(--primary-hue) var(--primary-saturation) calc(calc(var(--primary-lightness) / 50) * 50) / var(--tw-border-opacity));
}
.dark\:contrast-more\:hx-border-neutral-400:is(html[class~="dark"] *) { .dark\:contrast-more\:hx-border-neutral-400:is(html[class~="dark"] *) {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(163 163 163 / var(--tw-border-opacity)); border-color: rgb(163 163 163 / var(--tw-border-opacity));
@ -3321,11 +3374,6 @@ body:is(html[class~="dark"] *) {
--tw-shadow-colored: 0 0 #0000; --tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
} }
.contrast-more\:dark\:hover\:hx-border-gray-50:hover:is(html[class~="dark"] *) {
--tw-border-opacity: 1;
border-color: rgb(249 250 251 / var(--tw-border-opacity));
}
} }
@media not all and (min-width: 1280px) { @media not all and (min-width: 1280px) {
@ -3426,10 +3474,6 @@ body:is(html[class~="dark"] *) {
flex-shrink: 0; flex-shrink: 0;
} }
.md\:hx-grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.md\:hx-justify-start { .md\:hx-justify-start {
justify-content: flex-start; justify-content: flex-start;
} }
@ -3459,21 +3503,11 @@ body:is(html[class~="dark"] *) {
font-size: .875rem; font-size: .875rem;
} }
} }
@media (min-width: 1024px) {
.lg\:hx-grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1280px) { @media (min-width: 1280px) {
.xl\:hx-block { .xl\:hx-block {
display: block; display: block;
} }
.xl\:hx-grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
} }
.ltr\:hx-right-1\.5:where([dir="ltr"], [dir="ltr"] *) { .ltr\:hx-right-1\.5:where([dir="ltr"], [dir="ltr"] *) {
right: 0.375rem; right: 0.375rem;
@ -3487,9 +3521,6 @@ body:is(html[class~="dark"] *) {
.ltr\:hx-ml-1:where([dir="ltr"], [dir="ltr"] *) { .ltr\:hx-ml-1:where([dir="ltr"], [dir="ltr"] *) {
margin-left: 0.25rem; margin-left: 0.25rem;
} }
.ltr\:hx-ml-3:where([dir="ltr"], [dir="ltr"] *) {
margin-left: 0.75rem;
}
.ltr\:hx-ml-auto:where([dir="ltr"], [dir="ltr"] *) { .ltr\:hx-ml-auto:where([dir="ltr"], [dir="ltr"] *) {
margin-left: auto; margin-left: auto;
} }
@ -3539,10 +3570,6 @@ body:is(html[class~="dark"] *) {
.ltr\:hx-text-right:where([dir="ltr"], [dir="ltr"] *) { .ltr\:hx-text-right:where([dir="ltr"], [dir="ltr"] *) {
text-align: right; text-align: right;
} }
.ltr\:before\:hx-left-0:where([dir="ltr"], [dir="ltr"] *)::before {
content: var(--tw-content);
left: 0px;
}
@media (min-width: 768px) { @media (min-width: 768px) {
.ltr\:md\:hx-left-auto:where([dir="ltr"], [dir="ltr"] *) { .ltr\:md\:hx-left-auto:where([dir="ltr"], [dir="ltr"] *) {
@ -3564,9 +3591,6 @@ body:is(html[class~="dark"] *) {
.rtl\:hx-mr-1:where([dir="rtl"], [dir="rtl"] *) { .rtl\:hx-mr-1:where([dir="rtl"], [dir="rtl"] *) {
margin-right: 0.25rem; margin-right: 0.25rem;
} }
.rtl\:hx-mr-3:where([dir="rtl"], [dir="rtl"] *) {
margin-right: 0.75rem;
}
.rtl\:hx-mr-auto:where([dir="rtl"], [dir="rtl"] *) { .rtl\:hx-mr-auto:where([dir="rtl"], [dir="rtl"] *) {
margin-right: auto; margin-right: auto;
} }
@ -3610,10 +3634,6 @@ body:is(html[class~="dark"] *) {
.rtl\:hx-text-left:where([dir="rtl"], [dir="rtl"] *) { .rtl\:hx-text-left:where([dir="rtl"], [dir="rtl"] *) {
text-align: left; text-align: left;
} }
.rtl\:before\:hx-right-0:where([dir="rtl"], [dir="rtl"] *)::before {
content: var(--tw-content);
right: 0px;
}
.rtl\:before\:hx-rotate-180:where([dir="rtl"], [dir="rtl"] *)::before { .rtl\:before\:hx-rotate-180:where([dir="rtl"], [dir="rtl"] *)::before {
content: var(--tw-content); content: var(--tw-content);
--tw-rotate: 180deg; --tw-rotate: 180deg;

View File

@ -1,5 +1,5 @@
@media (max-width: 767px) { @media (max-width: 767px) {
.sidebar-container { .hextra-sidebar-container {
@apply hx-fixed hx-pt-[calc(var(--navbar-height))] hx-top-0 hx-w-full hx-bottom-0 hx-z-[15] hx-overscroll-contain hx-bg-white dark:hx-bg-dark; @apply hx-fixed hx-pt-[calc(var(--navbar-height))] hx-top-0 hx-w-full hx-bottom-0 hx-z-[15] hx-overscroll-contain hx-bg-white dark:hx-bg-dark;
transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1); transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
will-change: transform, opacity; will-change: transform, opacity;
@ -8,7 +8,7 @@
} }
} }
.sidebar-container { .hextra-sidebar-container {
li > div { li > div {
@apply hx-h-0; @apply hx-h-0;
} }
@ -18,4 +18,19 @@
li.open > a > span > svg > path { li.open > a > span > svg > path {
@apply hx-rotate-90; @apply hx-rotate-90;
} }
.hextra-sidebar-item-list {
@apply hx-relative hx-flex hx-flex-col hx-gap-1 before:hx-absolute before:hx-inset-y-1 before:hx-w-px before:hx-bg-gray-200 ltr:hx-ml-3 ltr:hx-pl-3 ltr:before:hx-left-0 rtl:hx-mr-3 rtl:hx-pr-3 rtl:before:hx-right-0 dark:before:hx-bg-neutral-800;
}
.hextra-sidebar-item-link {
@apply hx-flex hx-items-center hx-justify-between hx-gap-2 hx-cursor-pointer hx-rounded hx-px-2 hx-py-1.5 hx-text-sm hx-transition-colors;
&.active {
@apply hx-bg-primary-100 hx-font-semibold hx-text-primary-800 contrast-more:hx-border contrast-more:hx-border-primary-500 dark:hx-bg-primary-400/10 dark:hx-text-primary-600 contrast-more:dark:hx-border-primary-500;
}
&.inactive {
@apply hx-text-gray-500 hover:hx-bg-gray-100 hover:hx-text-gray-900 contrast-more:hx-border contrast-more:hx-border-transparent contrast-more:hx-text-gray-900 contrast-more:hover:hx-border-gray-900 dark:hx-text-neutral-400 dark:hover:hx-bg-primary-100/5 dark:hover:hx-text-gray-50 contrast-more:dark:hx-text-gray-50 contrast-more:dark:hover:hx-border-gray-50;
}
}
} }

View File

@ -195,19 +195,8 @@ document.addEventListener("DOMContentLoaded", function () {
*/ */
async function preloadIndex() { async function preloadIndex() {
const tokenize = '{{- site.Params.search.flexsearch.tokenize | default "forward" -}}'; const tokenize = '{{- site.Params.search.flexsearch.tokenize | default "forward" -}}';
const isCJK = () => {
const lang = document.documentElement.lang || "en";
return lang.startsWith("zh") || lang.startsWith("ja") || lang.startsWith("ko");
}
const encodeCJK = (str) => str.replace(/[\x00-\x7F]/g, "").split("");
const encodeDefault = (str) => (""+str).toLocaleLowerCase().split(/[\p{Z}\p{S}\p{P}\p{C}]+/u);
const encodeFunction = isCJK() ? encodeCJK : encodeDefault;
window.pageIndex = new FlexSearch.Document({ window.pageIndex = new FlexSearch.Document({
tokenize, tokenize,
encode: encodeFunction,
cache: 100, cache: 100,
document: { document: {
id: 'id', id: 'id',
@ -218,7 +207,6 @@ document.addEventListener("DOMContentLoaded", function () {
window.sectionIndex = new FlexSearch.Document({ window.sectionIndex = new FlexSearch.Document({
tokenize, tokenize,
encode: encodeFunction,
cache: 100, cache: 100,
document: { document: {
id: 'id', id: 'id',

View File

@ -3,7 +3,7 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const menu = document.querySelector('.hamburger-menu'); const menu = document.querySelector('.hamburger-menu');
const overlay = document.querySelector('.mobile-menu-overlay'); const overlay = document.querySelector('.mobile-menu-overlay');
const sidebarContainer = document.querySelector('.sidebar-container'); const sidebarContainer = document.querySelector('.hextra-sidebar-container');
// Initialize the overlay // Initialize the overlay
const overlayClasses = ['hx-fixed', 'hx-inset-0', 'hx-z-10', 'hx-bg-black/80', 'dark:hx-bg-black/60']; const overlayClasses = ['hx-fixed', 'hx-inset-0', 'hx-z-10', 'hx-bg-black/80', 'dark:hx-bg-black/60'];
@ -23,12 +23,6 @@ document.addEventListener('DOMContentLoaded', function () {
document.body.classList.toggle('md:hx-overflow-auto'); document.body.classList.toggle('md:hx-overflow-auto');
} }
function hideOverlay() {
// Hide the overlay
overlay.classList.remove(...overlayClasses);
overlay.classList.add('hx-bg-transparent');
}
menu.addEventListener('click', (e) => { menu.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
toggleMenu(); toggleMenu();
@ -39,7 +33,8 @@ document.addEventListener('DOMContentLoaded', function () {
overlay.classList.remove('hx-bg-transparent'); overlay.classList.remove('hx-bg-transparent');
} else { } else {
// Hide the overlay // Hide the overlay
hideOverlay(); overlay.classList.remove(...overlayClasses);
overlay.classList.add('hx-bg-transparent');
} }
}); });
@ -48,23 +43,7 @@ document.addEventListener('DOMContentLoaded', function () {
toggleMenu(); toggleMenu();
// Hide the overlay // Hide the overlay
hideOverlay(); overlay.classList.remove(...overlayClasses);
}); overlay.classList.add('hx-bg-transparent');
// Select all anchor tags in the sidebar container
const sidebarLinks = sidebarContainer.querySelectorAll('a');
// Add click event listener to each anchor tag
sidebarLinks.forEach(link => {
link.addEventListener('click', (e) => {
// Check if the href attribute contains a hash symbol (links to a heading)
if (link.getAttribute('href') && link.getAttribute('href').startsWith('#')) {
// Only dismiss overlay on mobile view
if (window.innerWidth < 768) {
toggleMenu();
hideOverlay();
}
}
});
}); });
}); });

View File

@ -1,3 +1,12 @@
/**
* Check if the element is visible.
* @param {Element} element Dom element
* @returns boolean
*/
function isVisible(element) {
return element.offsetWidth > 0 || element.offsetHeight > 0;
}
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
scrollToActiveItem(); scrollToActiveItem();
enableCollapsibles(); enableCollapsibles();
@ -10,10 +19,43 @@ function enableCollapsibles() {
e.preventDefault(); e.preventDefault();
const list = button.parentElement.parentElement; const list = button.parentElement.parentElement;
if (list) { if (list) {
list.classList.toggle("open") list.classList.toggle("open");
} }
}); });
}); });
const isCached = "{{- site.Params.page.sidebar.cache | default false -}}" === "true";
const currentPagePath = window.location.href;
if (isCached) {
// find the current page in the sidebar and open the parent lists
const sidebar = document.querySelector(".hextra-sidebar-container");
if (sidebar) {
// find a tags and compare href with current page path
const links = sidebar.querySelectorAll("a");
links.forEach(function (link) {
const linkPath = link.href;
if (currentPagePath === linkPath) {
// add active class to the link
link.classList.add("active");
link.classList.remove("inactive");
if (!isVisible(link)) {
return;
}
// recursively open parent lists
let parent = link.parentElement;
while (parent && !parent.classList.contains("hextra-sidebar-container")) {
if (parent.tagName === "LI" && parent.classList.contains("hextra-sidebar-item")) {
parent.classList.add("open");
}
parent = parent.parentElement;
}
}
});
}
}
} }
function scrollToActiveItem() { function scrollToActiveItem() {
@ -31,6 +73,6 @@ function scrollToActiveItem() {
const yDistance = visibleActiveItem.getBoundingClientRect().top - sidebarScrollbar.getBoundingClientRect().top; const yDistance = visibleActiveItem.getBoundingClientRect().top - sidebarScrollbar.getBoundingClientRect().top;
sidebarScrollbar.scrollTo({ sidebarScrollbar.scrollTo({
behavior: "instant", behavior: "instant",
top: yDistance - yOffset top: yDistance - yOffset,
}); });
} }

View File

@ -290,4 +290,3 @@ x-twitter: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path f
linkedin: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg> linkedin: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
slack: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52a2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52zm0 1.271a2.528 2.528 0 0 1 2.521 2.521a2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521a2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522zm0-1.268a2.527 2.527 0 0 1-2.52-2.523a2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523z" /></svg> slack: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52a2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52zm0 1.271a2.528 2.528 0 0 1 2.521 2.521a2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521zm10.122 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522zm-1.268 0a2.528 2.528 0 0 1-2.523 2.521a2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522zm-2.523 10.122a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522zm0-1.268a2.527 2.527 0 0 1-2.52-2.523a2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523z" /></svg>
bluesky: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 530"><path fill="currentColor" d="M136 44c66 50 138 151 164 205 26-54 98-155 164-205 48-36 126-64 126 25 0 18-10 149-16 170-21 74-96 93-163 81 117 20 147 86 82 153-122 125-176-32-189-72-3-8-4-11-4-8 0-3-1 0-4 8-13 40-67 197-189 72-65-67-35-133 82-153-67 12-142-7-163-81-6-21-16-152-16-170 0-89 78-61 126-25z"/></svg> bluesky: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 530"><path fill="currentColor" d="M136 44c66 50 138 151 164 205 26-54 98-155 164-205 48-36 126-64 126 25 0 18-10 149-16 170-21 74-96 93-163 81 117 20 147 86 82 153-122 125-176-32-189-72-3-8-4-11-4-8 0-3-1 0-4 8-13 40-67 197-189 72-65-67-35-133 82-153-67 12-142-7-163-81-6-21-16-152-16-170 0-89 78-61 126-25z"/></svg>
telegram: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248 248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3-3.476 18.584-10.322 24.816-16.948 25.425-14.4 1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25 5.342-39.5 3.652-3.793 67.107-61.51 68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7 108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789 2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716 43.8 43.8 0 0 1 .417 9.769"/></svg>

View File

@ -1,76 +0,0 @@
---
title: Hextra テーマ
layout: hextra-home
---
{{< hextra/hero-badge >}}
<div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
<span>無料、オープンソース</span>
{{< icon name="arrow-circle-right" attributes="height=14" >}}
{{< /hextra/hero-badge >}}
<div class="hx-mt-6 hx-mb-6">
{{< hextra/hero-headline >}}
MarkdownとHugoで&nbsp;<br class="sm:hx-block hx-hidden" />モダンなウェブサイトを構築
{{< /hextra/hero-headline >}}
</div>
<div class="hx-mb-12">
{{< hextra/hero-subtitle >}}
美しい静的ウェブサイトを作るための&nbsp;<br class="sm:hx-block hx-hidden" />高速でバッテリー同梱型のHugoテーマ
{{< /hextra/hero-subtitle >}}
</div>
<div class="hx-mb-6">
{{< hextra/hero-button text="始める" link="docs" >}}
</div>
<div class="hx-mt-6"></div>
{{< hextra/feature-grid >}}
{{< hextra/feature-card
title="高速かつ多機能"
subtitle="シンプルで使いやすく、それでいて強力で豊富な機能を備えています。"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
image="/images/hextra-doc.webp"
imageClass="hx-top-[40%] hx-left-[24px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
>}}
{{< hextra/feature-card
title="MarkdownだけでOK"
subtitle="Markdownだけで作成可能。ショートコードコンポーネントで充実させることもできます。"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-lg:hx-min-h-[340px]"
image="/images/hextra-markdown.webp"
imageClass="hx-top-[40%] hx-left-[36px] hx-w-[180%] sm:hx-w-[110%] dark:hx-opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
>}}
{{< hextra/feature-card
title="全文検索"
subtitle="FlexSearchによる全文検索が内蔵されており、追加の設定は不要です。"
class="hx-aspect-auto md:hx-aspect-[1.1/1] max-md:hx-min-h-[340px]"
image="/images/hextra-search.webp"
imageClass="hx-top-[40%] hx-left-[36px] hx-w-[110%] sm:hx-w-[110%] dark:hx-opacity-80"
style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
>}}
{{< hextra/feature-card
title="羽のように軽量"
subtitle="Hextraを使用するために依存関係やNode.jsは必要ありません。Hugoによって動力を得ており、単一のバイナリで数秒でサイトを構築できます。"
>}}
{{< hextra/feature-card
title="レスポンシブ対応とダークモード"
subtitle="さまざまな画面サイズで美しく見えます。内蔵のダークモードサポートにより、ユーザーのシステム設定に基づいて自動切り替えが可能です。"
>}}
{{< hextra/feature-card
title="無料で構築とホスティング"
subtitle="GitHub Actionsを使って構築し、GitHub Pagesで無料でホスティングできます。また、他の静的ホスティングサービスでもホスティング可能です。"
>}}
{{< hextra/feature-card
title="簡単な多言語対応"
subtitle="Markdownファイルにロケールサフィックスを追加するだけで多言語ページを作成できます。i18nサポートの追加も直感的です。"
>}}
{{< hextra/feature-card
title="さらに多くの機能"
icon="sparkles"
subtitle="構文ハイライト / 目次 / SEO / RSS / LaTeX / Mermaid / カスタマイズ可能 / など多数..."
>}}
{{< /hextra/feature-grid >}}

View File

@ -1,40 +0,0 @@
---
linkTitle: "ドキュメンテーション"
title: イントロダクション
---
👋 こんにちはHextraのドキュメンテーションへようこそ
<!--more-->
## Hextraとは
Hextraは、[Tailwind CSS][tailwind-css]を使用して構築された、モダンで高速かつ機能豊富な[Hugo][hugo]テーマです。ドキュメンテーション、ブログ、ウェブサイトのための美しいウェブサイトを構築するために設計されており、さまざまな要件に対応するための機能と柔軟性を提供します。
## 特徴
- **美しいデザイン** - Nextraにインスパイアされ、Tailwind CSSを活用してモダンなデザインを提供し、サイトを際立たせます。
- **レスポンシブレイアウトとダークモード** - モバイル、タブレット、デスクトップなど、すべてのデバイスで美しく表示されます。また、ダークモードもサポートされており、さまざまな照明条件に対応します。
- **高速で軽量** - 単一のバイナリファイルに収められた超高速の静的サイトジェネレータであるHugoを採用し、Hextraはそのフットプリントを最小限に抑えています。JavaScriptやNode.jsは必要ありません。
- **全文検索** - FlexSearchを利用したオフライン全文検索が組み込まれており、追加の設定は不要です。
- **機能豊富** - Markdown、シンタックスハイライト、LaTeX数式、ダイアグラム、ショートコード要素など、コンテンツを強化するための機能を提供します。目次、パンくずリスト、ページネーション、サイドバーナビゲーションなどが自動生成されます。
- **多言語対応とSEO対応** - Hugoの多言語モードを使用して、多言語サイトを簡単に作成できます。SEOタグ、Open Graph、Twitter Cardsのサポートも標準で提供されます。
## 質問やフィードバックは?
{{< callout emoji="❓" >}}
Hextraはまだ活発に開発中です。
質問やフィードバックがありますか?[issueを開いて](https://github.com/imfing/hextra/issues)お気軽にお知らせください!
{{< /callout >}}
## 次に
以下のセクションに進んで、すぐに始めましょう:
{{< cards >}}
{{< card link="getting-started" title="はじめに" icon="document-text" subtitle="Hextraを使用してウェブサイトを作成する方法を学ぶ" >}}
{{< /cards >}}
[hugo]: https://gohugo.io/
[flex-search]: https://github.com/nextapps-de/flexsearch
[tailwind-css]: https://tailwindcss.com/

View File

@ -7,29 +7,29 @@ title: 介绍
<!--more--> <!--more-->
## 什么是 Hextra ## Hextra 是什么
Hextra 是一现代、快速且功能齐全的 [Hugo][hugo] 主题,基于 [Tailwind CSS][tailwind-css] 构建。专为构建美观的文档、博客和网站而设计,它提供了开箱即用的功能和灵活性以满足各种需求。 Hextra 是一现代、快速且内置丰富功能的 [Hugo][hugo] 主题,它是用 [Tailwind CSS][tailwind-css] 构建的。该主题旨在创建美观的文档、博客和网站提供了开箱即用的功能和灵活性以满足各种需求。
## 特性 ## 功能特点
- **精美设计** - 灵感源自 NextraHextra 利用 Tailwind CSS 提供现代设计,使您的网站脱颖而出 - **优美的设计** - 受到 Nextra 的启发Hextra 利用 Tailwind CSS 提供了一种现代设计,使您的网站看起来出色
- **响应式布局与暗黑模式** - 在所有设备上都能完美呈现,从手机、平板到桌面。暗黑模式也得到支持,以适应不同的光照条件。 - **响应式布局和深色模式** - 无论是在移动设备、平板还是桌面上,都表现出色。同时支持深色模式以适应各种光线条件。
- **快速轻量** - 由 Hugo 驱动,这是一个闪电般快速的静态网站生成器,仅需一个二进制文件Hextra 保持其占用空间最小。无需 JavaScript 或 Node.js 即可使用 - **快速轻量** - 由 Hugo 驱动,一个轻量级且超快的静态网站生成器,封装在一个单一的二进制文件Hextra 保持其占用极小。使用它不需要 Javascript 或 Node.js。
- **全文搜索** - 内置离线全文搜索由 FlexSearch 提供支持,无需额外配置。 - **全文搜索** - 内置离线全文搜索由 FlexSearch 提供支持,无需额外配置。
- **功能全** - Markdown、语法高亮、LaTeX 数学公式、图表 Shortcodes 元素,丰富您的内容。目录、面包屑导航、分页、侧边栏导航等自动生成。 - **功能全** - 支持 Markdown、语法高亮、LaTeX 数学公式、图表以及 Shortcodes 元素以增强您的内容。目录、面包屑、分页、侧边栏导航等都会自动生成。
- **多语言 SEO 就绪** - 通过 Hugo 的多语言模式轻松创建多语言网站。开箱即用支持 SEO 标签、Open Graph 和 Twitter Cards - **多语言 SEO 支持** - Hugo 的多语言模式轻松支持多语言网站。对于 SEO 标签、Open Graph 和 Twitter 卡片,也提供了开箱即用的支持
## 有问题或反馈? ## 有问题或反馈?
{{< callout emoji="❓" >}} {{< callout emoji="❓" >}}
Hextra 仍在积极开发中。 Hextra 仍在积极开发中。
有问题或反馈?欢迎[问题](https://github.com/imfing/hextra/issues) 有问题或反馈?请随时[问题](https://github.com/imfing/hextra/issues)
{{< /callout >}} {{< /callout >}}
## 下一步 ## 接下来
立即深入以下部分开始使用 直接进入以下部分开始:
{{< cards >}} {{< cards >}}
{{< card link="getting-started" title="入门指南" icon="document-text" subtitle="学习如何使用 Hextra 创建网站" >}} {{< card link="getting-started" title="入门指南" icon="document-text" subtitle="学习如何使用 Hextra 创建网站" >}}

View File

@ -1,16 +0,0 @@
---
linkTitle: 上級者向け
title: 上級者向けトピック
prev: /docs/guide/shortcodes/tabs
next: /docs/advanced/multi-language
---
このセクションでは、テーマの上級者向けトピックをカバーします。
<!--more-->
{{< cards >}}
{{< card link="multi-language" title="多言語対応" icon="translate" >}}
{{< card link="customization" title="カスタマイズ" icon="pencil" >}}
{{< card link="comments" title="コメントシステム" icon="chat-alt" >}}
{{< /cards >}}

View File

@ -1,16 +1,15 @@
--- ---
linkTitle: 高级 linkTitle: 高级配置
title: 高级主题 title: 高级配置
prev: /docs/guide/shortcodes/tabs prev: /docs/guide/shortcodes/tabs
next: /docs/advanced/multi-language next: /docs/advanced/multi-language
--- ---
本节涵盖了一些主题的高级内容 此部分提供了 Hextra 的一些高级配置
<!--more--> <!--more-->
{{< cards >}} {{< cards >}}
{{< card link="multi-language" title="多语言" icon="translate" >}} {{< card link="multi-language" title="多语言" icon="translate" >}}
{{< card link="customization" title="自定义" icon="pencil" >}} {{< card link="customization" title="定制化" icon="pencil" >}}
{{< card link="comments" title="评论系统" icon="chat-alt" >}} {{< /cards >}}
{{< /cards >}}

View File

@ -1,39 +0,0 @@
---
title: コメントシステム
linkTitle: コメント
---
Hextraは、サイトにコメントシステムを追加することをサポートしています。
現在、[giscus](https://giscus.app/)がサポートされています。
<!--more-->
## giscus
[giscus](https://giscus.app/)は、[GitHub Discussions](https://docs.github.com/ja/discussions)を利用したコメントシステムです。無料でオープンソースです。
giscusを有効にするには、サイトの設定ファイルに以下を追加する必要があります
```yaml {filename="hugo.yaml"}
params:
comments:
enable: false
type: giscus
giscus:
repo: <リポジトリ>
repoId: <リポジトリID>
category: <カテゴリ>
categoryId: <カテゴリID>
```
giscusの設定は、[giscus.app](https://giscus.app/)のウェブサイトから構築できます。詳細もそこで確認できます。
特定のページでコメントを有効または無効にするには、ページのフロントマターに以下を追加します:
```yaml {filename="content/docs/about.md"}
---
title: について
comments: true
---
```

View File

@ -1,18 +1,18 @@
--- ---
title: 评论系统 title: 评论系统
linkTitle: 评论 linkTitle: Comments
--- ---
Hextra 支持为您的网站添加评论系统。 Hextra 支持在你的网站添加评论系统。
目前支持 [giscus](https://giscus.app/) 目前已经支持 [giscus](https://giscus.app/).
<!--more--> <!--more-->
## giscus ## giscus
[giscus](https://giscus.app/) 是一个由 [GitHub Discussions](https://docs.github.com/en/discussions) 提供支持的评论系统。它是免费且开源 [giscus](https://giscus.app/) 是由 [GitHub Discussions](https://docs.github.com/en/discussions)驱动的评论系统。Giscus 免费且开源。
启用 giscus,您需要在网站配置文件中添加以下内容: 如需启用 Giscus, 你需要在配置文件中添加以下内容:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@ -21,19 +21,19 @@ params:
type: giscus type: giscus
giscus: giscus:
repo: <仓库> repo: <repository>
repoId: <仓库 ID> repoId: <repository ID>
category: <分类> category: <category>
categoryId: <分类 ID> categoryId: <category ID>
``` ```
giscus 配置可以 [giscus.app](https://giscus.app/) 网站生成。更多详细信息也可以在那里找到。 Giscus 配置可以参考 [giscus.app](https://giscus.app/),还可以在那里找到更多详细信息
可以在页面的 front matter 中为特定页面启用或禁用评论: 可以在 front matter 中启用或禁用特定页面的评论:
```yaml {filename="content/docs/about.md"} ```yaml {filename="content/docs/about.md"}
--- ---
title: 关于 title: About
comments: true comments: true
--- ---
``` ```

View File

@ -1,211 +0,0 @@
---
title: Hextraのカスタマイズ
linkTitle: カスタマイズ
---
Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトのカスタマイズオプションを提供し、テーマを設定できます。
このページでは、利用可能なオプションと、テーマをさらにカスタマイズする方法について説明します。
<!--more-->
## カスタムCSS
カスタムCSSを追加するには、サイト内に`assets/css/custom.css`ファイルを作成する必要があります。Hextraはこのファイルを自動的に読み込みます。
### フォントファミリー
コンテンツのフォントファミリーは、以下のようにカスタマイズできます:
```css {filename="assets/css/custom.css"}
.content {
font-family: "Times New Roman", Times, serif;
}
```
### インラインコード要素
`other text`と混在するテキストの色は、以下のようにカスタマイズできます:
```css {filename="assets/css/custom.css"}
.content code:not(.code-block code) {
color: #c97c2e;
}
```
### プライマリカラー
テーマのプライマリカラーは、`--primary-hue`、`--primary-saturation`、`--primary-lightness`変数を設定することでカスタマイズできます:
```css {filename="assets/css/custom.css"}
:root {
--primary-hue: 100deg;
--primary-saturation: 90%;
--primary-lightness: 50%;
}
```
### テーマのさらなるカスタマイズ
テーマは、公開されているCSSクラスを介してデフォルトのスタイルをオーバーライドすることでさらにカスタマイズできます。フッター要素をカスタマイズする例
```css {filename="assets/css/custom.css"}
.hextra-footer {
/* フッター要素に適用されるスタイル */
}
.hextra-footer:is(html[class~="dark"] *) {
/* ダークモードでのフッター要素に適用されるスタイル */
}
```
以下のクラスを使用して、テーマのさまざまな部分をカスタマイズできます。
#### 一般
- `hextra-scrollbar` - スクロールバー要素
- `content` - ページコンテンツコンテナ
#### ショートコード
##### バッジ
- `hextra-badge` - バッジ要素
##### カード
- `hextra-card` - カード要素
- `hextra-card-image` - カード画像要素
- `hextra-card-icon` - カードアイコン要素
- `hextra-card-subtitle` - カードサブタイトル要素
##### カードグリッド
- `hextra-cards` - カードグリッドコンテナ
##### Jupyter Notebook
- `hextra-jupyter-code-cell` - Jupyterコードセルコンテナ
- `hextra-jupyter-code-cell-outputs-container` - Jupyterコードセル出力コンテナ
- `hextra-jupyter-code-cell-outputs` - Jupyterコードセル出力div要素
##### PDF
- `hextra-pdf` - PDFコンテナ要素
##### ステップ
- `steps` - ステップコンテナ
##### タブ
- `hextra-tabs-panel` - タブパネルコンテナ
- `hextra-tabs-toggle` - タブトグルボタン
##### ファイルツリー
- `hextra-filetree` - ファイルツリーコンテナ
##### フォルダ
- `hextra-filetree-folder` - ファイルツリーフォルダコンテナ
#### ナビゲーションバー
- `nav-container` - ナビゲーションバーコンテナ
- `nav-container-blur` - ナビゲーションバーコンテナのぼかし要素
- `hamburger-menu` - ハンバーガーメニューボタン
#### フッター
- `hextra-footer` - フッター要素
- `hextra-custom-footer` - カスタムフッターセクションコンテナ
#### 検索
- `search-wrapper` - 検索ラッパーコンテナ
- `search-input` - 検索入力要素
- `search-results` - 検索結果リストコンテナ
#### 目次
- `hextra-toc` - 目次コンテナ
#### サイドバー
- `mobile-menu-overlay` - モバイルメニューのオーバーレイ要素
- `sidebar-container` - サイドバーコンテナ
- `sidebar-active-item` - サイドバーのアクティブアイテム
#### 言語スイッチャー
- `language-switcher` - 言語スイッチャーボタン
- `language-options` - 言語オプションコンテナ
#### テーマトグル
- `theme-toggle` - テーマトグルボタン
#### コードコピーボタン
- `hextra-code-copy-btn-container` - コードコピーボタンコンテナ
- `hextra-code-copy-btn` - コードコピーボタン
#### コードブロック
- `hextra-code-block` - コードブロックコンテナ
#### フィーチャーカード
- `hextra-feature-card` - フィーチャーカードリンク要素
#### フィーチャーグリッド
- `hextra-feature-grid` - フィーチャーグリッドコンテナ
#### パンくずリスト
パンくずリスト用の特定のクラスはありません。
### シンタックスハイライト
利用可能なシンタックスハイライトテーマのリストは、[Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html)で確認できます。スタイルシートは以下のコマンドで生成できます:
```shell
hugo gen chromastyles --style=github
```
デフォルトのシンタックスハイライトテーマをオーバーライドするには、生成されたスタイルをカスタムCSSファイルに追加します。
## カスタムスクリプト
すべてのページのheadの最後にカスタムスクリプトを追加するには、以下のファイルを追加します
```
layouts/partials/custom/head-end.html
```
## フッターのカスタムセクション
フッターに追加のセクションを追加するには、サイト内に`layouts/partials/custom/footer.html`ファイルを作成します。
```html {filename="layouts/partials/custom/footer.html"}
<!-- ここにフッター要素を追加 -->
```
追加されたセクションは、フッターの著作権セクションの前に追加されます。
[HTML](https://developer.mozilla.org/ja/docs/Web/HTML)と[Hugoテンプレート構文](https://gohugo.io/templates/)を使用して、独自のコンテンツを追加できます。
フッターセクションで利用可能なHugo変数は、`.switchesVisible`と`.copyrightVisible`です。
## カスタムレイアウト
テーマのレイアウトは、サイトの`layouts`ディレクトリ内に同じ名前のファイルを作成することでオーバーライドできます。
例えば、ドキュメント用の`single.html`レイアウトをオーバーライドするには、サイト内に`layouts/docs/single.html`ファイルを作成します。
詳細については、[Hugoテンプレート][hugo-template-docs]を参照してください。
## さらなるカスタマイズ
探しているものが見つかりませんでしたか?[ディスカッションを開く](https://github.com/imfing/hextra/discussions)か、テーマに貢献してください!
[hugo-template-docs]: https://gohugo.io/templates/

View File

@ -145,7 +145,7 @@ The following classes can be used to customize various parts of the theme.
- `theme-toggle` - The theme toggle button - `theme-toggle` - The theme toggle button
#### Code Copy Button #### Cody Copy Button
- `hextra-code-copy-btn-container` - The code copy button container - `hextra-code-copy-btn-container` - The code copy button container
- `hextra-code-copy-btn` - The code copy button - `hextra-code-copy-btn` - The code copy button
@ -195,7 +195,7 @@ You can add extra section in the footer by creating a file `layouts/partials/cus
The added section will be added before the copyright section in the footer. The added section will be added before the copyright section in the footer.
You can use [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [Hugo template syntax](https://gohugo.io/templates/) to add your own content. You can use [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [Hugo template syntax](https://gohugo.io/templates/) to add your own content.
Hugo variables available in the footer section are: `.switchesVisible` and `.displayCopyright`. Hugo variables available in the footer section are: `.switchesVisible` and `.copyrightVisible`.
## Custom Layouts ## Custom Layouts

View File

@ -3,18 +3,14 @@ title: 自定义 Hextra
linkTitle: 自定义 linkTitle: 自定义
--- ---
Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,用于配置主题。 Hextra 在 `hugo.yaml` 中提供了一些自定义选项配置主题。
本页描述了可用选项以及如何进一步自定义主题。 本页介绍了可用选项以及如何进一步自定义主题。
<!--more--> <!--more-->
## 自定义 CSS ## 自定义 CSS
要添加自定义 CSS我们需要在站点中创建一个文件 `assets/css/custom.css`。Hextra 自动加载文件 要添加自定义 CSS我们需要在站点中创建一个文件 `assets/css/custom.css`。Hextra 自动加载文件,比如自定义字体:
### 字体
内容的字体可以通过以下方式自定义:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
.content { .content {
@ -22,190 +18,41 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,
} }
``` ```
### 内联代码元素 ### 主题色
与 `其他文本` 混合的文本颜色可以通过以下方式自定义: 主题色可以通过设置 `--primary-hue` 变量来自定义:
```css {filename="assets/css/custom.css"}
.content code:not(.code-block code) {
color: #c97c2e;
}
```
### 主色调
主题的主色调可以通过设置 `--primary-hue`、`--primary-saturation` 和 `--primary-lightness` 变量来自定义:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
:root { :root {
--primary-hue: 100deg; --primary-hue: 100deg;
--primary-saturation: 90%;
--primary-lightness: 50%;
} }
``` ```
### 进一步的主题自定义 ### 代码高亮
可以通过覆盖暴露的 CSS 类来进一步自定义主题。以下是一个自定义页脚元素的示例 代码高亮风格的详细信息可在 [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html) 中找到。可以使用以下命令生成样式表
```css {filename="assets/css/custom.css"}
.hextra-footer {
/* 样式将应用于页脚元素 */
}
.hextra-footer:is(html[class~="dark"] *) {
/* 样式将应用于暗模式下的页脚元素 */
}
```
以下类可用于自定义主题的各个部分。
#### 通用
- `hextra-scrollbar` - 滚动条元素
- `content` - 页面内容容器
#### 短代码
##### 徽章
- `hextra-badge` - 徽章元素
##### 卡片
- `hextra-card` - 卡片元素
- `hextra-card-image` - 卡片图片元素
- `hextra-card-icon` - 卡片图标元素
- `hextra-card-subtitle` - 卡片副标题元素
##### 卡片组
- `hextra-cards` - 卡片网格容器
##### Jupyter Notebook
- `hextra-jupyter-code-cell` - Jupyter 代码单元容器
- `hextra-jupyter-code-cell-outputs-container` - Jupyter 代码单元输出容器
- `hextra-jupyter-code-cell-outputs` - Jupyter 代码单元输出 div 元素
##### PDF
- `hextra-pdf` - PDF 容器元素
##### 步骤
- `steps` - 步骤容器
##### 标签页
- `hextra-tabs-panel` - 标签页面板容器
- `hextra-tabs-toggle` - 标签页切换按钮
##### 文件树
- `hextra-filetree` - 文件树容器
##### 文件夹
- `hextra-filetree-folder` - 文件树文件夹容器
#### 导航栏
- `nav-container` - 导航栏容器
- `nav-container-blur` - 导航栏模糊元素
- `hamburger-menu` - 汉堡菜单按钮
#### 页脚
- `hextra-footer` - 页脚元素
- `hextra-custom-footer` - 自定义页脚部分容器
#### 搜索
- `search-wrapper` - 搜索包装容器
- `search-input` - 搜索输入元素
- `search-results` - 搜索结果列表容器
#### 目录
- `hextra-toc` - 目录容器
#### 侧边栏
- `mobile-menu-overlay` - 移动菜单的覆盖元素
- `sidebar-container` - 侧边栏容器
- `sidebar-active-item` - 侧边栏中的活动项
#### 语言切换器
- `language-switcher` - 语言切换按钮
- `language-options` - 语言选项容器
#### 主题切换
- `theme-toggle` - 主题切换按钮
#### 代码复制按钮
- `hextra-code-copy-btn-container` - 代码复制按钮容器
- `hextra-code-copy-btn` - 代码复制按钮
#### 代码块
- `hextra-code-block` - 代码块容器
#### 功能卡片
- `hextra-feature-card` - 功能卡片链接元素
#### 功能网格
- `hextra-feature-grid` - 功能网格容器
#### 面包屑导航
面包屑导航没有特定的类。
### 语法高亮
可用的语法高亮主题列表可在 [Chroma 样式库](https://xyproto.github.io/splash/docs/all.html) 中找到。可以使用以下命令生成样式表:
```shell ```shell
hugo gen chromastyles --style=github hugo gen chromastyles --style=github
``` ```
要覆盖默认的语法高亮主题,可以将生成的样式添加到自定义 CSS 文件中。 将生成的样式添加到自定义 CSS 文件中以覆盖默认代码高亮样式
## 自定义脚本 ## 自定义 Script
你可以通过添加以下文件在每个页面的 head 末尾添加自定义脚本 你可以添加以下文件以自定义 `script` 添加到每页的 `head` 最后
``` ```
layouts/partials/custom/head-end.html layouts/partials/custom/head-end.html
``` ```
## 自定义页脚额外部分
你可以通过在站点中创建文件 `layouts/partials/custom/footer.html` 来在页脚中添加额外部分。
```html {filename="layouts/partials/custom/footer.html"}
<!-- 你的页脚元素在这里 -->
```
添加的部分将出现在页脚的版权部分之前。
你可以使用 [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) 和 [Hugo 模板语法](https://gohugo.io/templates/) 来添加自己的内容。
页脚部分可用的 Hugo 变量有:`.switchesVisible` 和 `.copyrightVisible`。
## 自定义布局 ## 自定义布局
可以通过在站点的 `layouts` 目录中创建同名文件来覆盖主题的布局。 可以在站点的 `layouts` 目录中创建同名文件来覆盖主题的默认布局。
例如,要覆盖文档的 `single.html` 布局,可以在站点中创建文件 `layouts/docs/single.html`。 例如,要覆盖文档的 `single.html` 布局,在站点中创建文件 `layouts/docs/single.html`。
更多信息,请参阅 [Hugo 模板文档][hugo-template-docs] 如需或许更多信息,转至 [Hugo Templates](https://gohugo.io/templates/)
## 进一步自定义 ## 进一步定制 Hextra
没有找到你想要的?欢迎 [发起讨论](https://github.com/imfing/hextra/discussions) 或为主题做出贡献 没有找到你想修改的内容?在 GitHub 上[创建 Discussion](https://github.com/imfing/hextra/discussions) 或为 Hextra 贡献你的智慧
[hugo-template-docs]: https://gohugo.io/templates/

View File

@ -1,83 +0,0 @@
---
title: "多言語対応"
weight: 1
prev: /docs/advanced
---
Hextraは、Hugoの[多言語モード](https://gohugo.io/content-management/multilingual/)を使用して、複数の言語でサイトを作成することをサポートしています。
<!--more-->
## 多言語対応を有効にする
サイトを多言語対応にするためには、Hugoにサポートする言語を伝える必要があります。サイトの設定ファイルに以下を追加します
```yaml {filename="hugo.yaml"}
defaultContentLanguage: en
languages:
en:
languageName: English
weight: 1
fr:
languageName: Français
weight: 2
ja:
languageName: 日本語
weight: 3
```
## ファイル名による翻訳管理
Hugoは、ファイル名による翻訳管理をサポートしています。例えば、英語のファイル `content/docs/_index.md` がある場合、フランス語の翻訳用に `content/docs/_index.fr.md` というファイルを作成できます。
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" state="open" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/file name="_index.fr.md" >}}
{{< filetree/file name="_index.ja.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
注: Hugoは[コンテンツディレクトリによる翻訳](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)もサポートしています。
## メニュー項目の翻訳
ナビゲーションバーのメニュー項目を翻訳するには、`identifier` フィールドを設定する必要があります:
```yaml {filename="hugo.yaml"}
menu:
main:
- identifier: documentation
name: Documentation
pageRef: /docs
weight: 1
- identifier: blog
name: Blog
pageRef: /blog
weight: 2
```
そして、対応するi18nファイルで翻訳します
```yaml {filename="i18n/fr.yaml"}
documentation: Documentation
blog: Blog
```
## 文字列の翻訳
他の場所の文字列を翻訳するには、対応するi18nファイルに翻訳を追加する必要があります
```yaml {filename="i18n/fr.yaml"}
readMore: Lire la suite
```
テーマで使用されている文字列のリストは、`i18n/en.yaml` ファイルにあります。
## さらに詳しく
- [Hugo 多言語モード](https://gohugo.io/content-management/multilingual/)
- [Hugo 多言語 Part 1: コンテンツ翻訳](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
- [Hugo 多言語 Part 2: 文字列のローカライズ](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)

View File

@ -1,16 +1,16 @@
--- ---
title: "多语言支持" title: "多语言"
weight: 1 weight: 1
prev: /docs/advanced prev: /docs/advanced
--- ---
Hextra 支持使用 Hugo 的[多语言模式](https://gohugo.io/content-management/multilingual/)创建多语言网站。 Hextra 支持使用 Hugo 的[多语言模式](https://gohugo.io/content-management/multilingual/) 创建多语言网站。
<!--more--> <!--more-->
## 启用多语言 ## 启用多语言支持
使我们的网站支持多语言,我们需要告诉 Hugo 支持的语言。我们需要在站点配置文件中添加: 为了使我们的网站支持多语言,我们需要告诉 Hugo 需要支持的语言。 在站点配置文件中添加:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
defaultContentLanguage: en defaultContentLanguage: en
@ -26,9 +26,9 @@ languages:
weight: 3 weight: 3
``` ```
## 通过文件名管理翻译 ## 文件名管理翻译
Hugo 支持通过文件名管理翻译。例如,如果我们有一个英文文件 `content/docs/_index.md`,我们可以创建一个文件 `content/docs/_index.fr.md` 作为法语翻译 Hugo 支持文件名管理翻译。例如,如果我们有一个英文文件 `content/docs/_index.md`,我们可以创建一个翻译为法语的文件 `content/docs/_index.fr.md`。
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="content" >}} {{< filetree/folder name="content" >}}
@ -40,7 +40,7 @@ Hugo 支持通过文件名管理翻译。例如,如果我们有一个英文文
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
注意Hugo 还支持[通过内容目录进行翻译](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)。 注意Hugo 还支持[内容目录管理翻译](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)。
## 翻译菜单项 ## 翻译菜单项
@ -59,25 +59,16 @@ menu:
weight: 2 weight: 2
``` ```
并在相应的 i18n 文件中进行翻译:
```yaml {filename="i18n/fr.yaml"}
documentation: Documentation
blog: Blog
```
## 翻译字符串 ## 翻译字符串
要翻译其他地方的字符串,我们需要将翻译添加到相应的 i18n 文件中: 要翻译其他地方的字符串,我们需要将翻译添加到相应的 `i18n` 文件中:
```yaml {filename="i18n/fr.yaml"} ```yaml {filename="i18n/fr.yaml"}
readMore: Lire la suite readMore: Lire la suite
``` ```
主题中使用的字符串列表可以在 `i18n/en.yaml` 文件中找到。 ## 更多参考
## 了解更多 - [Hugo Multilingual Mode](https://gohugo.io/content-management/multilingual/)
- [Hugo Multilingual Part 1: Content translation](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
- [Hugo 多语言模式](https://gohugo.io/content-management/multilingual/) - [Hugo Multilingual Part 2: Strings localization](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)
- [Hugo 多语言第一部分:内容翻译](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
- [Hugo 多语言第二部分:字符串本地化](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)

View File

@ -1,192 +0,0 @@
---
title: はじめに
weight: 1
next: /docs/guide
prev: /docs
---
## テンプレートからクイックスタート
{{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
上記のテンプレートリポジトリを使用して、すぐに始めることができます。
<img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">
[GitHub Actionsワークフロー](https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow)を提供しており、サイトを自動的にビルドしてGitHub Pagesにデプロイし、無料でホストすることができます。
その他のオプションについては、[サイトのデプロイ](../guide/deploy-site)を確認してください。
[🌐 デモ ↗](https://imfing.github.io/hextra-starter-template/)
## 新しいプロジェクトとして始める
HugoプロジェクトにHextraテーマを追加する主な方法は2つあります
1. **Hugoモジュール推奨**: 最も簡単で推奨される方法です。[Hugoモジュール](https://gohugo.io/hugo-modules/)を使用すると、テーマを直接オンラインソースから取り込むことができます。テーマは自動的にダウンロードされ、Hugoによって管理されます。
2. **Gitサブモジュール**: または、Hextraを[Gitサブモジュール](https://git-scm.com/book/ja/v2/Git-%E3%83%84%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)として追加します。テーマはGitによってダウンロードされ、プロジェクトの`themes`フォルダに保存されます。
### HugoモジュールとしてHextraをセットアップ
#### 前提条件
開始する前に、以下のソフトウェアがインストールされている必要があります:
- [Hugo拡張版](https://gohugo.io/installation/)
- [Git](https://git-scm.com/)
- [Go](https://go.dev/)
#### 手順
{{% steps %}}
### 新しいHugoサイトを初期化
```shell
hugo new site my-site --format=yaml
```
### モジュール経由でHextraテーマを設定
```shell
# Hugoモジュールを初期化
cd my-site
hugo mod init github.com/username/my-site
# Hextraテーマを追加
hugo mod get github.com/imfing/hextra
```
`hugo.yaml`を設定してHextraテーマを使用するために、以下を追加します
```yaml
module:
imports:
- path: github.com/imfing/hextra
```
### 最初のコンテンツページを作成
ホームページとドキュメントページの新しいコンテンツページを作成します:
```shell
hugo new content/_index.md
hugo new content/docs/_index.md
```
### ローカルでサイトをプレビュー
```shell
hugo server --buildDrafts --disableFastRender
```
これで、新しいサイトのプレビューが`http://localhost:1313/`で利用可能です。
{{% /steps %}}
{{% details title="テーマを更新するには?" %}}
プロジェクト内のすべてのHugoモジュールを最新バージョンに更新するには、次のコマンドを実行します
```shell
hugo mod get -u
```
Hextraを[最新リリースバージョン](https://github.com/imfing/hextra/releases)に更新するには、次のコマンドを実行します:
```shell
hugo mod get -u github.com/imfing/hextra
```
詳細については、[Hugoモジュール](https://gohugo.io/hugo-modules/use-modules/#update-all-modules)を参照してください。
{{% /details %}}
### GitサブモジュールとしてHextraをセットアップ
#### 前提条件
開始する前に、以下のソフトウェアがインストールされている必要があります:
- [Hugo拡張版](https://gohugo.io/installation/)
- [Git](https://git-scm.com/)
#### 手順
{{% steps %}}
### 新しいHugoサイトを初期化
```shell
hugo new site my-site --format=yaml
```
### HextraテーマをGitサブモジュールとして追加
```shell
git submodule add https://github.com/imfing/hextra.git themes/hextra
```
`hugo.yaml`を設定してHextraテーマを使用するために、以下を追加します
```yaml
theme: hextra
```
### 最初のコンテンツページを作成
ホームページとドキュメントページの新しいコンテンツページを作成します:
```shell
hugo new content/_index.md
hugo new content/docs/_index.md
```
### ローカルでサイトをプレビュー
```shell
hugo server --buildDrafts --disableFastRender
```
新しいサイトのプレビューが`http://localhost:1313/`で利用可能です。
{{% /steps %}}
[CI/CD](https://ja.wikipedia.org/wiki/CI/CD)を使用してHugoウェブサイトをデプロイする場合、`hugo`コマンドを実行する前に以下のコマンドを実行することが重要です。
```shell
git submodule update --init
```
このコマンドを実行しないと、テーマフォルダにHextraテーマファイルが取り込まれず、ビルドが失敗します。
{{% details title="テーマを更新するには?" %}}
リポジトリ内のすべてのサブモジュールを最新のコミットに更新するには、次のコマンドを実行します:
```shell
git submodule update --remote
```
Hextraを最新のコミットに更新するには、次のコマンドを実行します
```shell
git submodule update --remote themes/hextra
```
詳細については、[Gitサブモジュール](https://git-scm.com/book/ja/v2/Git-%E3%83%84%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)を参照してください。
{{% /details %}}
## 次へ
以下のセクションを探索して、さらにコンテンツを追加し始めましょう:
{{< cards >}}
{{< card link="../guide/organize-files" title="ファイルの整理" icon="document-duplicate" >}}
{{< card link="../guide/configuration" title="設定" icon="adjustments" >}}
{{< card link="../guide/markdown" title="Markdown" icon="markdown" >}}
{{< /cards >}}

View File

@ -1,63 +1,49 @@
--- ---
title: 入门指南 title: 快速开始
weight: 1 weight: 1
next: /docs/guide next: /docs/guide
prev: /docs prev: /docs
--- ---
## 模板快速开始 ## 使用模板快速开始
{{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template) {{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
您可以通过使用上模板仓库快速入门 通过使用上面的模板仓库,您将能够快速地开始
<img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500"> <img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">
我们提供了一个 [GitHub Actions 工作流](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow),可以帮助自动构建并将您的站点部署到 GitHub Pages并免费托管。 我们提供了一个 [GitHub Actions 工作流](https://docs.github.com/cn/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow)可以帮助自动构建并部署您的网站到 GitHub Pages并免费托管。
更多选项,请查看 [部署站点](../guide/deploy-site)。
[🌐 演示 ↗](https://imfing.github.io/hextra-starter-template/) [🌐 演示 ↗](https://imfing.github.io/hextra-starter-template/)
## 作为新项目开始 ## 作为新项目开始
有两种主要方式将 Hextra 主题添加到您的 Hugo 项目中: ### 前提条件
1. **Hugo 模块(推荐)**:最简单且推荐的方法。[Hugo 模块](https://gohugo.io/hugo-modules/)允许您直接从在线源拉取主题。主题会自动下载并由 Hugo 管理 在开始之前,请确保我们已经安装了 [Hugo](https://gohugo.io/)
请参考 Hugo 的[官方安装指南](https://gohugo.io/installation/)以获取更多详情。
2. **Git 子模块**:或者,将 Hextra 添加为 [Git 子模块](https://git-scm.com/book/en/v2/Git-Tools-Submodules)。主题由 Git 下载并存储在您项目的 `themes` 文件夹中 [Hugo 模块](https://gohugo.io/hugo-modules/)是管理 Hugo 主题的推荐方式。要使用 Hugo 模块,我们需要安装 [Git](https://git-scm.com/) 和 [Go](https://go.dev/)
### 将 Hextra 设置为 Hugo 模块 ### 初始化 Hugo 站点
#### 先决条件
在开始之前,您需要安装以下软件:
- [Hugo扩展版](https://gohugo.io/installation/)
- [Git](https://git-scm.com/)
- [Go](https://go.dev/)
#### 步骤
{{% steps %}}
### 初始化一个新的 Hugo 站点
```shell ```shell
hugo new site my-site --format=yaml hugo new site my-site --format=yaml
``` ```
### 通过模块配置 Hextra 主题 ### 通过 Hugo Module 安装
```shell ```shell
# 初始化 Hugo 模块 # 初始化 Hugo 模块
cd my-site cd my-site
hugo mod init github.com/username/my-site hugo mod init github.com/username/my-site
# 添加 Hextra 主题 # 添加 Hextra
hugo mod get github.com/imfing/hextra hugo mod get github.com/imfing/hextra
``` ```
配置 `hugo.yaml`使用 Hextra 主题,添加以下内容 编辑 `hugo.yaml`用 Hextra
```yaml ```yaml
module: module:
@ -65,128 +51,92 @@ module:
- path: github.com/imfing/hextra - path: github.com/imfing/hextra
``` ```
### 创建您的内容页面 ### 通过 Git Submodule 安装
为主页和文档页面创建新的内容页面:
```shell
hugo new content/_index.md
hugo new content/docs/_index.md
```
### 本地预览站点
```shell
hugo server --buildDrafts --disableFastRender
```
恭喜,您的新站点预览可在 `http://localhost:1313/` 查看。
{{% /steps %}}
{{% details title="如何更新主题?" %}}
要更新项目中所有 Hugo 模块到最新版本,请运行以下命令:
```shell
hugo mod get -u
```
要将 Hextra 更新到 [最新发布版本](https://github.com/imfing/hextra/releases),请运行以下命令:
```shell
hugo mod get -u github.com/imfing/hextra
```
有关更多详细信息,请参阅 [Hugo 模块](https://gohugo.io/hugo-modules/use-modules/#update-all-modules)。
{{% /details %}}
### 将 Hextra 设置为 Git 子模块
#### 先决条件 #### 先决条件
在开始之前,您需要安装以下软件 我们开始之前,你必须先确保以下软件已经安装
- [Hugo(扩展版)](https://gohugo.io/installation/) - [Hugo (extended version)](https://gohugo.io/installation/)
- [Git](https://git-scm.com/) - [Git](https://git-scm.com/)
#### 步骤 #### 步骤
{{% steps %}} {{% steps %}}
### 初始化一个新的 Hugo 站点 ### 初始化 Hugo 站点
```shell ```shell
hugo new site my-site --format=yaml hugo new site my-site --format=yaml
``` ```
### 将 Hextra 主题添加为 Git 子模块 ### 将 Hextra 添加为 Git Submodule
```shell ```shell
git submodule add https://github.com/imfing/hextra.git themes/hextra git submodule add https://github.com/imfing/hextra.git themes/hextra
``` ```
配置 `hugo.yaml` 以使用 Hextra 主题,添加以下内容 添加以下内容来配置 `hugo.yaml` 以使用 Hextra
```yaml ```yaml
theme: hextra theme: hextra
``` ```
### 创建您的内容页 ### 创建你的第一个内容页
为主页和文档页面创建新的内容页面: 让我们为主页和文档页面创建一个新的内容页面:
```shell ```shell
hugo new content/_index.md hugo new content/_index.md
hugo new content/docs/_index.md hugo new content/docs/_index.md
``` ```
### 本地预览站点 ### 本地预览站点
```shell ```shell
hugo server --buildDrafts --disableFastRender hugo server --buildDrafts --disableFastRender
``` ```
您的新站点预览可`http://localhost:1313/` 看。 瞧!你现在可以`http://localhost:1313/`到你的新站点
{{% /steps %}} {{% /steps %}}
当使用 [CI/CD](https://en.wikipedia.org/wiki/CI/CD) 部署 Hugo 网站时,确保在运行 `hugo` 命令之前执行以下命令至关重要。
使用 [CI/CD](https://en.wikipedia.org/wiki/CI/CD) 进行部署时,必须确保在运行 `hugo` 命令之前执行以下命令。
```shell ```shell
git submodule update --init git submodule update --init
``` ```
如果不运行此命令,主题文件夹将不会 Hextra 主题文件填充,导致构建失败。 如果不运行此命令,theme 中将不会存在 Hextra 文件,进而导致构建失败。
{{% details title="如何更新主题?" %}} {{% details title="如何更新主题?" %}}
要更新仓库中所有子模块到最新提交,请运行以下命令: 如需把项目中所有的 Hugo Modules 都升级到最新,在终端中运行此命令:
```shell ```shell
git submodule update --remote hugo mod get -u
``` ```
要将 Hextra 更新到最新提交,请运行以下命令: 如需把 Hextra 升级到[最新的发行版本](https://github.com/imfing/hextra/releases), 在终端中运行此命令:
```shell ```shell
git submodule update --remote themes/hextra hugo mod get -u github.com/imfing/hextra
``` ```
有关更多详细信息,请参阅 [Git 子模块](https://git-scm.com/book/en/v2/Git-Tools-Submodules) 如果你需要获得更多信息,参见 [Hugo Modules](https://gohugo.io/hugo-modules/use-modules/#update-all-modules).
{{% /details %}} {{% /details %}}
## 下一步 ## 接下来
探索以下部分以开始添加更多内容: 探索这些文档以便添加更多内容:
{{< cards >}} {{< cards >}}
{{< card link="../guide/organize-files" title="组织文件" icon="document-duplicate" >}} {{< card link="../guide/organize-files" title="Organize Files" icon="document-duplicate" >}}
{{< card link="../guide/configuration" title="配置" icon="adjustments" >}} {{< card link="../guide/configuration" title="Configuration" icon="adjustments" >}}
{{< card link="../guide/markdown" title="Markdown" icon="markdown" >}} {{< card link="../guide/markdown" title="Markdown" icon="markdown" >}}
{{< /cards >}} {{< /cards >}}

View File

@ -1,23 +0,0 @@
---
title: ガイド
weight: 2
prev: /docs/getting-started
next: /docs/guide/organize-files
sidebar:
open: true
---
Hextraの使い方を学ぶために、以下のセクションを探索してください:
<!--more-->
{{< cards >}}
{{< card link="organize-files" title="ファイルの整理" icon="document-duplicate" >}}
{{< card link="configuration" title="設定" icon="adjustments" >}}
{{< card link="markdown" title="Markdown" icon="markdown" >}}
{{< card link="syntax-highlighting" title="シンタックスハイライト" icon="sparkles" >}}
{{< card link="latex" title="LaTeX" icon="variable" >}}
{{< card link="diagrams" title="ダイアグラム" icon="chart-square-bar" >}}
{{< card link="shortcodes" title="ショートコード" icon="template" >}}
{{< card link="deploy-site" title="サイトのデプロイ" icon="server" >}}
{{< /cards >}}

View File

@ -7,17 +7,16 @@ sidebar:
open: true open: true
--- ---
探索以下部分,了解如何使用 Hextra 探索以下各节以学习如何使用 Hextra 编写内容
<!--more--> <!--more-->
{{< cards >}} {{< cards >}}
{{< card link="organize-files" title="文件组织" icon="document-duplicate" >}} {{< card link="organize-files" title="目录结构" icon="document-duplicate" >}}
{{< card link="configuration" title="配置" icon="adjustments" >}} {{< card link="configuration" title="配置" icon="adjustments" >}}
{{< card link="markdown" title="Markdown" icon="markdown" >}} {{< card link="markdown" title="Markdown" icon="markdown" >}}
{{< card link="syntax-highlighting" title="语法高亮" icon="sparkles" >}} {{< card link="syntax-highlighting" title="代码高亮" icon="sparkles" >}}
{{< card link="latex" title="LaTeX" icon="variable" >}} {{< card link="latex" title="LaTeX 公式" icon="variable" >}}
{{< card link="diagrams" title="图表" icon="chart-square-bar" >}} {{< card link="diagrams" title="图表" icon="chart-square-bar" >}}
{{< card link="shortcodes" title="短代码" icon="template" >}} {{< card link="shortcodes" title="短代码" icon="template" >}}
{{< card link="deploy-site" title="部署站点" icon="server" >}} {{< /cards >}}
{{< /cards >}}

View File

@ -1,288 +0,0 @@
---
title: 設定
weight: 2
---
Hugoは、Hugoサイトのルートにある`hugo.yaml`から設定を読み取ります。
この設定ファイルでは、サイトのすべての側面を設定できます。
利用可能な設定とベストプラクティスの包括的な理解を得るために、GitHub上のこのサイトの設定ファイル[`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml)をチェックしてください。
<!--more-->
## ナビゲーション
### メニュー
右上のメニューは、設定ファイルの`menu.main`セクションで定義されます:
```yaml {filename="hugo.yaml"}
menu:
main:
- name: ドキュメント
pageRef: /docs
weight: 1
- name: ブログ
pageRef: /blog
weight: 2
- name: について
pageRef: /about
weight: 3
- name: 検索
weight: 4
params:
type: search
- name: GitHub
weight: 5
url: "https://github.com/imfing/hextra"
params:
icon: github
```
メニュー項目にはさまざまなタイプがあります:
1. `pageRef`を使用してサイト内のページにリンク
```yaml
- name: ドキュメント
pageRef: /docs
```
2. `url`を使用して外部URLにリンク
```yaml
- name: GitHub
url: "https://github.com"
```
3. `type: search`を使用して検索バーを表示
```yaml
- name: 検索
params:
type: search
```
4. アイコン
```yaml
- name: GitHub
params:
icon: github
```
これらのメニュー項目は、`weight`パラメータを設定して並べ替えることができます。
### ロゴとタイトル
デフォルトのロゴを変更するには、`hugo.yaml`を編集し、`static`ディレクトリ下のロゴファイルへのパスを追加します。
オプションで、ロゴをクリックしたときにユーザーがリダイレクトされるリンクや、ロゴの幅と高さをピクセル単位で設定できます。
```yaml {filename="hugo.yaml"}
params:
navbar:
displayTitle: true
displayLogo: true
logo:
path: images/logo.svg
dark: images/logo-dark.svg
link: /
width: 40
height: 20
```
## サイドバー
### メインサイドバー
メインサイドバーは、コンテンツディレクトリの構造から自動的に生成されます。
詳細については、[ファイルの整理](/docs/guide/organize-files)ページを参照してください。
左サイドバーから単一のページを除外するには、ページのフロントマターで`sidebar.exclude`パラメータを設定します:
```yaml {filename="content/docs/guide/configuration.md"}
---
title: 設定
sidebar:
exclude: true
---
```
### 追加リンク
サイドバーの追加リンクは、設定ファイルの`menu.sidebar`セクションで定義されます:
```yaml {filename="hugo.yaml"}
menu:
sidebar:
- name: その他
params:
type: separator
weight: 1
- name: "について"
pageRef: "/about"
weight: 2
- name: "Hugo Docs ↗"
url: "https://gohugo.io/documentation/"
weight: 3
```
## 右サイドバー
### 目次
目次は、コンテンツファイルの見出しから自動的に生成されます。ページのフロントマターで`toc: false`を設定することで無効にできます。
```yaml {filename="content/docs/guide/configuration.md"}
---
title: 設定
toc: false
---
```
### ページ編集リンク
ページ編集リンクを設定するには、設定ファイルで`params.editURL.base`パラメータを設定します:
```yaml {filename="hugo.yaml"}
params:
editURL:
enable: true
base: "https://github.com/your-username/your-repo/edit/main"
```
提供されたURLをルートディレクトリとして、各ページの編集リンクが自動的に生成されます。
特定のページの編集リンクを設定したい場合は、ページのフロントマターで`editURL`パラメータを設定します:
```yaml {filename="content/docs/guide/configuration.md"}
---
title: 設定
editURL: "https://example.com/edit/this/page"
---
```
## フッター
### 著作権
ウェブサイトのフッターに表示される著作権テキストを変更するには、`i18n/en.yaml`という名前のファイルを作成します。
このファイルに、以下のように新しい著作権テキストを指定します:
```yaml {filename="i18n/en.yaml"}
copyright: "© 2024 YOUR TEXT HERE"
```
参考として、GitHubリポジトリに[`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml)ファイルの例があります。また、著作権テキストにMarkdown形式を使用することもできます。
## その他
### ファビコン
サイトの[ファビコン](https://ja.wikipedia.org/wiki/Favicon)をカスタマイズするには、`static`フォルダ下にアイコンファイルを配置して、[テーマのデフォルトのファビコン](https://github.com/imfing/hextra/tree/main/static)を上書きします:
{{< filetree/container >}}
{{< filetree/folder name="static" >}}
{{< filetree/file name="android-chrome-192x192.png" >}}
{{< filetree/file name="android-chrome-512x512.png" >}}
{{< filetree/file name="apple-touch-icon.png" >}}
{{< filetree/file name="favicon-16x16.png" >}}
{{< filetree/file name="favicon-32x32.png" >}}
{{< filetree/file name="favicon-dark.svg" >}}
{{< filetree/file name="favicon.ico" >}}
{{< filetree/file name="favicon.svg" >}}
{{< filetree/file name="site.webmanifest" >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
プロジェクトに`favicon.ico`、`favicon.svg`、`favicon-dark.svg`ファイルを含めて、サイトのファビコンが正しく表示されるようにします。
`favicon.ico`は一般的に古いブラウザ用ですが、`favicon.svg`と`favicon-dark.svg`は現代のブラウザでサポートされています。
[favicon.io](https://favicon.io/)や[favycon](https://github.com/ruisaraiva19/favycon)などのツールを使用して、このようなアイコンを生成できます。
### テーマ設定
`theme`設定を使用して、デフォルトのテーマモードとトグルボタンを設定し、訪問者がライトモードとダークモードを切り替えられるようにします。
```yaml {filename="hugo.yaml"}
params:
theme:
# light | dark | system
default: system
displayToggle: true
```
`theme.default`のオプション:
- `light` - 常にライトモードを使用
- `dark` - 常にダークモードを使用
- `system` - オペレーティングシステムの設定と同期(デフォルト)
`theme.displayToggle`パラメータを使用して、テーマを変更するためのトグルボタンを表示できます。
`true`に設定すると、訪問者はデフォルト設定を上書きしてライトモードとダークモードを切り替えることができます。
### ページ幅
ページの幅は、設定ファイルの`params.page.width`パラメータでカスタマイズできます:
```yaml {filename="hugo.yaml"}
params:
page:
# full (100%), wide (90rem), normal (1280px)
width: wide
```
利用可能なオプションは`full`、`wide`、`normal`です。デフォルトでは、ページ幅は`normal`に設定されています。
同様に、ナビゲーションバーとフッターの幅は、`params.navbar.width`と`params.footer.width`パラメータでカスタマイズできます。
### 検索インデックス
[FlexSearch](https://github.com/nextapps-de/flexsearch)による全文検索はデフォルトで有効です。
検索インデックスをカスタマイズするには、設定ファイルで`params.search.flexsearch.index`パラメータを設定します:
```yaml {filename="hugo.yaml"}
params:
# 検索
search:
enable: true
type: flexsearch
flexsearch:
# ページをインデックスする方法: content | summary | heading | title
index: content
```
`flexsearch.index`のオプション:
- `content` - ページの全内容(デフォルト)
- `summary` - ページの要約、詳細は[Hugoコンテンツ要約](https://gohugo.io/content-management/summaries/)を参照
- `heading` - レベル1とレベル2の見出し
- `title` - ページタイトルのみを含める
検索トークン化をカスタマイズするには、設定ファイルで`params.search.flexsearch.tokenize`パラメータを設定します:
```yaml {filename="hugo.yaml"}
params:
# ...
flexsearch:
# full | forward | reverse | strict
tokenize: forward
```
[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search)のオプション:
- `strict` - 単語全体をインデックス
- `forward` - 前方方向に単語を増分的にインデックス
- `reverse` - 両方向に単語を増分的にインデックス
- `full` - すべての可能な組み合わせをインデックス
検索インデックスからページを除外するには、ページのフロントマターで`excludeSearch: true`を設定します:
```yaml {filename="content/docs/guide/configuration.md"}
---
title: 設定
excludeSearch: true
---
```
### Googleアナリティクス
[Googleアナリティクス](https://marketingplatform.google.com/about/analytics/)を有効にするには、`hugo.yaml`で`services.googleAnalytics.ID`フラグを設定します:
```yaml {filename="hugo.yaml"}
services:
googleAnalytics:
ID: G-MEASUREMENT_ID
```

View File

@ -87,7 +87,7 @@ params:
### Main Sidebar ### Main Sidebar
For the main sidebar, it is automatically generated from the structure of the content directory. By default, the main sidebar is automatically generated from the structure of the content directory.
See the [Organize Files](/docs/guide/organize-files) page for more details. See the [Organize Files](/docs/guide/organize-files) page for more details.
To exclude a single page from the left sidebar, set the `sidebar.exclude` parameter in the front matter of the page: To exclude a single page from the left sidebar, set the `sidebar.exclude` parameter in the front matter of the page:
@ -119,6 +119,33 @@ menu:
weight: 3 weight: 3
``` ```
### Sidebar from Data
Alternatively, you can define the sidebar structure in the `data` directory. This gives you more flexibility to define sidebar differently than your content structure. To enable this, set the `params.sidebar.source` parameter in the config file to `data`:
```yaml {filename="hugo.yaml"}
params:
sidebar:
source: data
```
To define the sidebar data, create a file named `sidebar.yaml` in the `data` directory.
```yaml {filename="data/sidebar.yaml"}
docs:
- title: Documentation
link: /docs/
- title: Guide
link: /docs/guide/
open: false
items:
- title: Configuration
link: /docs/guide/configuration/
# ...
```
If your site is multilingual, you can define the sidebar data for each language, for example in `data/en/sidebar.yaml` file.
## Right Sidebar ## Right Sidebar
### Table of Contents ### Table of Contents
@ -212,22 +239,6 @@ Options for `theme.default`:
The `theme.displayToggle` parameter allows you to display a toggle button for changing themes. The `theme.displayToggle` parameter allows you to display a toggle button for changing themes.
When set to `true`, visitors can switch between light or dark mode, overriding the default setting. When set to `true`, visitors can switch between light or dark mode, overriding the default setting.
### Page Last Modification
The date of the page's last modification can be displayed by enabling the `params.displayUpdatedDate` flag. To use Git commit date as the source, enable also the `enableGitInfo` flag.
To customize the date format, set the `params.dateFormat` parameter. Its layout matches Hugo's [`time.Format`](https://gohugo.io/functions/time/format/).
```yaml {filename="hugo.yaml"}
# Parse Git commit
enableGitInfo: true
params:
# Display the last modification date
displayUpdatedDate: true
dateFormat: "January 2, 2006"
```
### Page Width ### Page Width
The width of the page can be customized by the `params.page.width` parameter in the config file: The width of the page can be customized by the `params.page.width` parameter in the config file:

View File

@ -1,33 +1,33 @@
--- ---
title: 配置 title: 配置文件
weight: 2 weight: 2
--- ---
Hugo 从 Hugo 站根目录下的 `hugo.yaml` 文件中读取配置。 Hugo 从 Hugo 站根目录下的 `hugo.yaml` 读取配置。
配置文件您可以配置站点所有方面的地方 配置文件中,您可以配置站点所有选项
查看此站点的配置文件 [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) 在 GitHub 上,以全面了解可用的设置和最佳实践 你可以在 `exampleSite/hugo.yaml` 中找到此站点的配置文件作为开始
<!--more--> <!--more-->
## 导航 ## 导航
### 菜单 ### 菜单
右上角的菜单在配置文件的 `menu.main` 部分中定义 右上角的菜单在配置文件的 `menu.main` 中配置
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
main: main:
- name: 文档 - name: Documentation
pageRef: /docs pageRef: /docs
weight: 1 weight: 1
- name: 博客 - name: Blog
pageRef: /blog pageRef: /blog
weight: 2 weight: 2
- name: 关于 - name: About
pageRef: /about pageRef: /about
weight: 3 weight: 3
- name: 搜索 - name: Search
weight: 4 weight: 4
params: params:
type: search type: search
@ -38,83 +38,55 @@ menu:
icon: github icon: github
``` ```
有不同类型的菜单项: 几种不同类型的菜单项:
1. 使用 `pageRef` 链接到站点内的页面 1. Link to a page in the site with `pageRef`
```yaml ```yaml
- name: 文档 - name: Documentation
pageRef: /docs pageRef: /docs
``` ```
2. 使用 `url` 链接到外部 URL 2. Link to an external URL with `url`
```yaml ```yaml
- name: GitHub - name: GitHub
url: "https://github.com" url: "https://github.com"
``` ```
3. 使用 `type: search` 的搜索栏 3. Search bar with `type: search`
```yaml ```yaml
- name: 搜索 - name: Search
params: params:
type: search type: search
``` ```
4. 图标 4. Icon
```yaml ```yaml
- name: GitHub - name: GitHub
params: params:
icon: github icon: github
``` ```
这些菜单项可以通过设置 `weight` 参数进行排序。 这些菜单项可以通过设置 `weight` 进行排序。
### 徽标和标题
要修改默认徽标,编辑 `hugo.yaml` 并在 `static` 目录下添加徽标文件的路径。
您还可以更改用户点击徽标时重定向的链接,以及设置徽标的宽度和高度(以像素为单位)。
```yaml {filename="hugo.yaml"}
params:
navbar:
displayTitle: true
displayLogo: true
logo:
path: images/logo.svg
dark: images/logo-dark.svg
link: /
width: 40
height: 20
```
## 侧边栏 ## 侧边栏
### 主侧边栏 ### 主侧边栏
主侧边栏是根据内容目录结构自动生成的。 主侧边栏是自动从 `content` 目录结构生成的。
有关更多详细信息,请参阅 [组织文件](/docs/guide/organize-files) 页面 有关更多详细信息,转至 [目录结构](/docs/guide/organize-files)。
要从左侧边栏中排除单个页面,请在页面的 front matter 中设置 `sidebar.exclude` 参数:
```yaml {filename="content/docs/guide/configuration.md"}
---
title: 配置
sidebar:
exclude: true
---
```
### 额外链接 ### 额外链接
侧边栏的额外链接在配置文件的 `menu.sidebar` 部分中定义 侧边栏的额外链接在配置文件的 `menu.sidebar` 部分中配置
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
sidebar: sidebar:
- name: 更多 - name: More
params: params:
type: separator type: separator
weight: 1 weight: 1
- name: "关于" - name: "About"
pageRef: "/about" pageRef: "/about"
weight: 2 weight: 2
- name: "Hugo 文档 ↗" - name: "Hugo Docs ↗"
url: "https://gohugo.io/documentation/" url: "https://gohugo.io/documentation/"
weight: 3 weight: 3
``` ```
@ -123,54 +95,50 @@ menu:
### 目录 ### 目录
目录是根据内容文件中的标题自动生成的可以通过在页面的 front matter 设置 `toc: false` 来禁用它。 目录是根据内容文件中的标题自动生成的可以在 `front matter` 设置 `tocfalse` 来禁用它。
```yaml {filename="content/docs/guide/configuration.md"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
title: 配置 title: Configuration
toc: false toc: false
--- ---
``` ```
### 页面编辑链接 ### 编辑此页链接
要配置页面编辑链接,我们可以在配置文件中设置 `params.editURL.base` 参数:
要配置编辑此页链接,我们可以在配置文件中设置 `params.editURL.base`
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
editURL: editURL:
enable: true
base: "https://github.com/your-username/your-repo/edit/main" base: "https://github.com/your-username/your-repo/edit/main"
``` ```
编辑链接将根据提供的 URL 作为根目录自动为每个页面生成 将为每个页面自动生成编辑链接。
果要为特定页面设置编辑链接,可以在页面的 front matter 中设置 `editURL` 参数 为特定页面设置编辑链接,可以在页面的 `front matter` 中设置 `editURL`
```yaml {filename="content/docs/guide/configuration.md"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
title: 配置 title: Configuration
editURL: "https://example.com/edit/this/page" editURL: "https://example.com/edit/this/page"
--- ---
``` ```
## Footer
## 页脚 ### 版权声明
### 版权 如需修改网站页脚中显示的版权文本您需要创建一个名为“i18n/en.yaml”的文件。
在此文件中,填写新的版权文本,像这样:
要修改网站页脚中显示的版权文本,您需要创建一个名为 `i18n/en.yaml` 的文件。
在此文件中,指定您的新版权文本,如下所示:
```yaml {filename="i18n/en.yaml"} ```yaml {filename="i18n/en.yaml"}
copyright: "© 2024 您的文本" copyright: "© 2024 YOUR TEXT HERE"
``` ```
你可以在 GitHub 存储库中找到示例 [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) 文件。另外,你可以在版权文本中使用 Markdown 格式。
作为参考,可以在 GitHub 仓库中找到示例 [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) 文件。此外,您可以在版权文本中使用 Markdown 格式。
## 其他 ## 其他
### 网站图标 ### Favicon
要为您的站点自定义 [网站图标](https://en.wikipedia.org/wiki/Favicon),请将图标文件放在 `static` 文件夹下以覆盖 [主题的默认网站图标](https://github.com/imfing/hextra/tree/main/static) 如需自定义 [favicon](https://en.wikipedia.org/wiki/Favicon),请将图标文件放在 `static` 文件夹下以覆盖 [主题的默认 favicon](https://github.com/imfing/hextra/tree/main/static)
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="static" >}} {{< filetree/folder name="static" >}}
@ -186,14 +154,15 @@ copyright: "© 2024 您的文本"
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
在您的项目中包含 `favicon.ico`、`favicon.svg` 和 `favicon-dark.svg` 文件,以确保您的站点图标正确显示。 在您的项目中包含 `favicon.ico` 和 `favicon.svg` 文件,以确保网站的网站图标正确显示。
虽然 `favicon.ico` 通常用于旧版浏览器,但 `favicon.svg` `favicon-dark.svg` 受现代浏览器支持 虽然 `favicon.ico` 通常用于较旧的浏览器,但 `favicon.svg` 受到现代浏览器的支持,所以更现代的做法是添加 `favicon-dark.svg` 以便在黑暗模式下提供较好的体验体验
使用 [favicon.io](https://favicon.io/) 或 [favycon](https://github.com/ruisaraiva19/favycon) 等工具生成此类图标。
### 主题配置 请随意使用 [favicon.io](https://favicon.io/) 或 [favycon](https://github.com/ruisaraiva19/favycon) 等工具来生成这些图标。
使用 `theme` 设置来配置默认主题模式和切换按钮,允许访问者在浅色或深色模式之间切换。 ### 颜色主题配置
使用`theme`设置来配置默认主题模式和切换按钮,允许访问者在浅色或深色模式之间切换。
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@ -203,18 +172,18 @@ params:
displayToggle: true displayToggle: true
``` ```
`theme.default` 的选项: `theme.default` 的选项:
- `light` - 始终使用浅色模式 - `light` - 使用浅色模式
- `dark` - 始终使用色模式 - `dark` - 使用色模式
- `system` - 与操作系统设置同步(默认) - `system` - 跟随系统
`theme.displayToggle` 参数允许您显示一个切换按钮以更改主题 `theme.displayToggle` 控制显示用于更改主题的切换按钮
当设置为 `true` 时,访问者可以在浅色或深色模式之间切换,覆盖默认设置。 当设置为true时,访问者可以在浅色或深色模式之间切换,覆盖默认设置。
### 页面宽度 ### 页
页面的宽度可以通过配置文件中的 `params.page.width` 参数进行自定义 页面的宽度可以通过配置文件中的`params.page.width`参数来调整
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@ -223,37 +192,36 @@ params:
width: wide width: wide
``` ```
有三个可选项:`full``wide` `normal`。默认情况下,页面宽度设置为 `normal` 有三个可选项:`full`, `wide`, and `normal`. 默认的页宽模式是 `normal`.
同样,导航栏和页脚的宽度可通过 `params.navbar.width` 和 `params.footer.width` 参数进行自定义 同样,导航栏和 `footer` 的宽度可通过 `params.navbar.width` 和 `params.footer.width` 调整
### 搜索索引 ### 搜索
默认启用由 [FlexSearch](https://github.com/nextapps-de/flexsearch) 提供全文搜索。 默认情况下启用由 [FlexSearch](https://github.com/nextapps-de/flexsearch) 提供全文搜索。
要自定义搜索索引,请在配置文件中设置 `params.search.flexsearch.index` 参数 要自定义搜索索引,请在配置文件中设置 `params.search.flexsearch.index`
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
# 搜索 # Search
search: search:
enable: true enable: true
type: flexsearch type: flexsearch
flexsearch: flexsearch:
# 按以下内容索引页面:content | summary | heading | title # index page by: content | summary | heading | title
index: content index: content
``` ```
`flexsearch.index` 的可选项:
`flexsearch.index` 的选项: - `content` - 全内容搜索
- `summary` - 概述 [Hugo Content Summaries](https://gohugo.io/content-management/summaries/)
- `content` - 页面的完整内容(默认)
- `summary` - 页面的摘要,请参阅 [Hugo 内容摘要](https://gohugo.io/content-management/summaries/) 了解更多详细信息
- `heading` - 一级和二级标题 - `heading` - 一级和二级标题
- `title` - 仅包括页面标题 - `title` - 仅搜索标题
要自定义索分词,请在配置文件中设置 `params.search.flexsearch.tokenize` 参数 要自定义索分词,请在配置文件中设置`params.search.flexsearch.tokenize`
```yaml {filename="hugo.yaml"} ```hugo.yaml
params: params:
# ... # ...
flexsearch: flexsearch:
@ -261,28 +229,30 @@ params:
tokenize: forward tokenize: forward
``` ```
[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search) 的选项 [`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search)的选项:
- `strict` - 索引整个单词 - `strict` - 严格单词匹配
- `forward` - 向前方向逐步索引单词 - `forward` - 单词前缀匹配
- `reverse` - 双向逐步索引单词 - `reverse` - 单词前后缀匹配
- `full` - 索引所有可能的组合 - `full` - 单词子串匹配。
要从搜索索引中排除页面,请在页面的 front matter 中设置 `excludeSearch: true` > 在默认的分词逻辑下,中文一句话就是一个“单词”
要从搜索索引中排除页面,更改 front matter 中的 `excludeSearch: true`:
```yaml {filename="content/docs/guide/configuration.md"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
title: 配置 title: Configuration
excludeSearch: true excludeSearch: true
--- ---
``` ```
### Google Analytics ### Google Analytics
要启用 [Google Analytics](https://marketingplatform.google.com/about/analytics/)请在 `hugo.yaml` 中设置 `services.googleAnalytics.ID` 标志: 要启用 [Google Analytics](https://marketingplatform.google.com/about/analytics/),设置 `services.googleAnalytics.ID`:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
services: services:
googleAnalytics: googleAnalytics:
ID: G-MEASUREMENT_ID ID: G-MEASUREMENT_ID
``` ```

View File

@ -1,164 +0,0 @@
---
title: サイトのデプロイ
prev: /docs/guide/shortcodes
next: /docs/advanced
---
Hugoは静的サイトを生成するため、柔軟なホスティングオプションが可能です。
このページでは、Hextraサイトをさまざまなプラットフォームにデプロイするためのガイドを提供します。
<!--more-->
## GitHub Pages
[GitHub Pages](https://docs.github.com/pages)は、無料でウェブサイトをデプロイおよびホストするための推奨方法です。
[hextra-starter-template](https://github.com/imfing/hextra-starter-template)を使用してサイトをブートストラップした場合、GitHub Pagesへの自動デプロイを支援するGitHub Actionsワークフローがすぐに利用可能です。
{{% details title="GitHub Actionsの設定" closed="true" %}}
以下は、[hextra-starter-template](https://github.com/imfing/hextra-starter-template)からの設定例です:
```yaml {filename=".github/workflows/pages.yaml"}
# HugoサイトをGitHub Pagesにデプロイするためのサンプルワークフロー
name: Deploy Hugo site to Pages
on:
# デフォルトブランチへのプッシュ時に実行
push:
branches: ["main"]
# Actionsタブから手動でこのワークフローを実行可能
workflow_dispatch:
# GITHUB_TOKENの権限を設定してGitHub Pagesへのデプロイを許可
permissions:
contents: read
pages: write
id-token: write
# 同時実行を1つに制限し、進行中の実行と最新のキューイングされた実行の間の実行をスキップ。
# ただし、進行中の実行はキャンセルしないでください。これらの本番デプロイを完了させたいためです。
concurrency:
group: "pages"
cancel-in-progress: false
# デフォルトはbash
defaults:
run:
shell: bash
jobs:
# ビルドジョブ
build:
runs-on: ubuntu-latest
env:
HUGO_VERSION: 0.138.0
steps:
- name: Checkout
uses: actions/checkout@v4
with:
fetch-depth: 0 # .GitInfoと.Lastmodのためにすべての履歴を取得
submodules: recursive
- name: Setup Go
uses: actions/setup-go@v5
with:
go-version: '1.22'
- name: Setup Pages
id: pages
uses: actions/configure-pages@v4
- name: Setup Hugo
run: |
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
- name: Build with Hugo
env:
# Hugoモジュールとの最大限の互換性のために
HUGO_ENVIRONMENT: production
HUGO_ENV: production
run: |
hugo \
--gc --minify \
--baseURL "${{ steps.pages.outputs.base_url }}/"
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: ./public
# デプロイジョブ
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
```
{{% /details %}}
{{< callout >}}
リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定します:
![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
{{< /callout >}}
デフォルトでは、上記のGitHub Actionsワークフロー `.github/workflows/pages.yaml` は、サイトが `https://<USERNAME>.github.io/<REPO>/` にデプロイされることを前提としています。
`https://<USERNAME>.github.io/` にデプロイする場合は、`--baseURL` を変更します:
```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
run: |
hugo \
--gc --minify \
--baseURL "https://${{ github.repository_owner }}.github.io/"
```
独自のドメインにデプロイする場合は、`--baseURL` の値を適宜変更してください。
## Cloudflare Pages
1. サイトのソースコードをGitリポジトリGitHubに配置します。
2. [Cloudflareダッシュボード](https://dash.cloudflare.com/)にログインし、アカウントを選択します。
3. アカウントホームで、**Workers & Pages** > **Create application** > **Pages** > **Connect to Git** を選択します。
4. リポジトリを選択し、**Set up builds and deployments** セクションで以下の情報を提供します:
| 設定 | 値 |
| ---------------- | ------------------- |
| 本番ブランチ | `main` |
| ビルドコマンド | `hugo --gc --minify` |
| ビルドディレクトリ | `public` |
詳細については、以下を確認してください:
- [Hugoサイトのデプロイ](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages)。
- [言語サポートとツール](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)。
## Netlify
1. コードをGitリポジトリGitHub、GitLabなどにプッシュします。
2. [プロジェクトをインポート](https://app.netlify.com/start)してNetlifyに追加します。
3. [hextra-starter-template][hextra-starter-template]を使用していない場合、以下の設定を手動で行います:
- ビルドコマンドを `hugo --gc --minify` に設定します。
- 公開ディレクトリを `public` に指定します。
- 環境変数 `HUGO_VERSION` を追加し、`0.138.0` に設定するか、`netlify.toml` ファイルに設定します。
4. デプロイします!
詳細については、[NetlifyでのHugo](https://docs.netlify.com/integrations/frameworks/hugo/)を確認してください。
## Vercel
1. コードをGitリポジトリGitHub、GitLabなどにプッシュします。
2. [Vercelダッシュボード](https://vercel.com/dashboard)に移動し、Hugoプロジェクトをインポートします。
3. プロジェクトを設定し、フレームワークプリセットとしてHugoを選択します。
4. ビルドコマンドとインストールコマンドを上書きします:
1. ビルドコマンドを `hugo --gc --minify` に設定します。
2. インストールコマンドを `yum install golang` に設定します。
![Vercelデプロイ設定](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)

View File

@ -4,32 +4,32 @@ prev: /docs/guide/shortcodes
next: /docs/advanced next: /docs/advanced
--- ---
Hugo 生成静态站,允许灵活的托管选项。 Hugo 生成静态站,允许多种托管方式,你可以自由选择
本页提供了在各种平台上部署 Hextra 站点的指南。 本页将给出部署你的 Hextra 站点的方法
<!--more--> <!--more-->
## GitHub Pages ## GitHub Pages
[GitHub Pages](https://docs.github.com/pages) 是推荐的方式,可以免费部署和托管您的网站。 [GitHub Pages](https://docs.github.com/pages) 是免费部署和托管网站的推荐方法
如果您使用 [hextra-starter-template](https://github.com/imfing/hextra-starter-template) 引导站点,它已经提供了开箱即用的 GitHub Actions 工作流,帮助自动部署到 GitHub Pages 如果您使用以下方式引导该网站 [hextra-starter-template](https://github.com/imfing/hextra-starter-template), 它提供了开箱即用的 GitHub Actions 工作流程,有助于自动部署到 GitHub Pages
{{% details title="GitHub Actions 配置" closed="true" %}} {{% details title="GitHub Actions Configuration" closed="true" %}}
以下是 [hextra-starter-template](https://github.com/imfing/hextra-starter-template) 的示例配置 以下是配置来自 [hextra-starter-template](https://github.com/imfing/hextra-starter-template) 的 Workflow 的示例:
```yaml {filename=".github/workflows/pages.yaml"} ```yaml {filename=".github/workflows/pages.yaml"}
# 用于构建和部署 Hugo 站点到 GitHub Pages 的示例工作流 # 用于构建 Hugo 站点并将其部署到 GitHub Pages 的示例工作流
name: 部署 Hugo 站点到 Pages name: Deploy Hugo site to Pages
on: on:
# 在推送到默认分支时运行 # 默认分支触发
push: push:
branches: ["main"] branches: ["main"]
# 允许您从 Actions 选项卡手动运行此工作流 # 允许手动运行
workflow_dispatch: workflow_dispatch:
# 设置 GITHUB_TOKEN 的权限以允许部署到 GitHub Pages # 设置 GITHUB_TOKEN 的权限以允许部署到 GitHub Pages
@ -38,55 +38,55 @@ permissions:
pages: write pages: write
id-token: write id-token: write
# 允许一并发部署,跳过运行和最新排队之间的运行 # 允许一并发部署,跳过正在进行的运行和最新排队的运行之间排队的运行
# 但是,不要取消正在行的运行,因为我们希望这些生产部署能够完成。 # 但是,不要取消正在行的运行,因为我们希望完成这些生产部署
concurrency: concurrency:
group: "pages" group: "pages"
cancel-in-progress: false cancel-in-progress: false
# 默认使用 bash # 默认 bash
defaults: defaults:
run: run:
shell: bash shell: bash
jobs: jobs:
# 构建任务 # 开始构建
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
env: env:
HUGO_VERSION: 0.138.0 HUGO_VERSION: 0.121.2
steps: steps:
- name: 检出 - name: Checkout
uses: actions/checkout@v4 uses: actions/checkout@v4
with: with:
fetch-depth: 0 # 获取所有历史记录以支持 .GitInfo 和 .Lastmod fetch-depth: 0 # 获取 .GitInfo 和 .Lastmod 的所有历史记录
submodules: recursive submodules: recursive
- name: 设置 Go - name: Setup Go
uses: actions/setup-go@v5 uses: actions/setup-go@v5
with: with:
go-version: '1.22' go-version: '1.21'
- name: 设置 Pages - name: Setup Pages
id: pages id: pages
uses: actions/configure-pages@v4 uses: actions/configure-pages@v4
- name: 设置 Hugo - name: Setup Hugo
run: | run: |
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \ wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb && sudo dpkg -i ${{ runner.temp }}/hugo.deb
- name: 使用 Hugo 构建 - name: Build with Hugo
env: env:
# 为了最大程度地兼容 Hugo 模块 # 最大程度地向后兼容 Hugo 模块
HUGO_ENVIRONMENT: production HUGO_ENVIRONMENT: production
HUGO_ENV: production HUGO_ENV: production
run: | run: |
hugo \ hugo \
--gc --minify \ --gc --minify \
--baseURL "${{ steps.pages.outputs.base_url }}/" --baseURL "${{ steps.pages.outputs.base_url }}/"
- name: 上传工件 - name: Upload artifact
uses: actions/upload-pages-artifact@v3 uses: actions/upload-pages-artifact@v3
with: with:
path: ./public path: ./public
# 部署任务 # 开始部署
deploy: deploy:
environment: environment:
name: github-pages name: github-pages
@ -94,7 +94,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
needs: build needs: build
steps: steps:
- name: 部署到 GitHub Pages - name: Deploy to GitHub Pages
id: deployment id: deployment
uses: actions/deploy-pages@v4 uses: actions/deploy-pages@v4
``` ```
@ -103,13 +103,13 @@ jobs:
{{< callout >}} {{< callout >}}
您的仓库设置中将 **Pages** > **Build and deployment** > **Source** 设置为 **GitHub Actions** 在仓库设置中将 **Pages** > **Build and deployment** > **Source** 调整为 **GitHub Actions**:
![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png) ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
{{< /callout >}} {{< /callout >}}
默认情况下,上述 GitHub Actions 工作流 `.github/workflows/pages.yaml` 假站点部署到 `https://<USERNAME>.github.io/<REPO>/` 默认情况下,上述 GitHub Actions 工作流 `.github/workflows/pages.yaml` 假站点部署到 `https://<USERNAME>.github.io/<REPO>/`
果您部署到 `https://<USERNAME>.github.io/`,请修改 `--baseURL` 部署到 `https://<USERNAME>.github.io/` 修改参数 `--baseURL`:
```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]} ```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
run: | run: |
@ -118,47 +118,47 @@ run: |
--baseURL "https://${{ github.repository_owner }}.github.io/" --baseURL "https://${{ github.repository_owner }}.github.io/"
``` ```
果您部署到自己的域,请相应地更改 `--baseURL` 值。 部署到自己的域,请对应修改 `--baseURL`
## Cloudflare Pages ## Cloudflare Pages
1. 将您的站点源代码放入 Git 库(例如 GitHub 1. 将您的网站托管在 Git 存储库(例如 GitHub
2. 登录 [Cloudflare 仪表板](https://dash.cloudflare.com/) 并选择的账户 2. 登录 [Cloudflare dashboard](https://dash.cloudflare.com/) 并选择的账户
3. 在账户主页中,选择 **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** 3. 转至在账户主页中 **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**
4. 选择仓库,并在 **Set up builds and deployments** 部分提供以下信息: 4. 选择你的仓库 **Set up builds and deployments** 提供以下信息:
| 配置项 | | | Configuration | Value |
| ------------------ | -------------------- | | ----------------- | -------------------- |
| 生产分支 | `main` | | Production branch | `main` |
| 构建命令 | `hugo --gc --minify` | | Build command | `hugo --gc --minify` |
| 构建目录 | `public` | | Build directory | `public` |
更多详情,请查看 如需了解更多内容,见
- [部署 Hugo 站点](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages) - [Deploy a Hugo site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages).
- [语言支持和工具](https://developers.cloudflare.com/pages/platform/language-support-and-tools/) - [Language support and tools](https://developers.cloudflare.com/pages/platform/language-support-and-tools/).
## Netlify ## Netlify
1. 将代码推送到您的 Git 仓库(GitHubGitLab 等) 1. 将代码推送到 Git 存储库 (如 GitHub, GitLab)
2. [导入项目](https://app.netlify.com/start) 到 Netlify 2. [导入项目](https://app.netlify.com/start)
3. 如果您没有使用 [hextra-starter-template][hextra-starter-template],请手动配置以下内容: 3. 如果您使用[hextra-starter-template][hextra-starter-template], 手动配置以下内容:
- 将构建命令配置为 `hugo --gc --minify` - C 将构建命令配置为 `hugo --gc --minify`
- 指定发布目录为 `public` - 指定发布目录为 `public`
- 添加环境变量 `HUGO_VERSION` 并设为 `0.138.0`,或者将其设置在 `netlify.toml` 文件中 - 添加环境变量 `HUGO_VERSION` 并设为 `0.119.0`
4. 部署 4. 部署
查看 [Netlify 上的 Hugo](https://docs.netlify.com/integrations/frameworks/hugo/) 了解更多详情。 转至 [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) 获得更多信息
## Vercel ## Vercel
1. 将代码推送到您的 Git GitHub、GitLab 等) 1. 将代码推送到 Git 存储GitHub、GitLab 等)
2. 前往 [Vercel 仪表板](https://vercel.com/dashboard) 并导入的 Hugo 项目 2. 转至 [Vercel Dashboard](https://vercel.com/dashboard) 并导入的 Hugo 项目
3. 配置项目,选择 Hugo 作为框架预设 3. 配置项目,选择 Hugo 作为 Framework Preset
4. 覆盖构建命令和安装命令: 4. 覆盖构建命令和安装命令:
1. 构建命令设置为 `hugo --gc --minify` 1. 设置构建命令为 `hugo --gc --minify`
2. 将安装命令设置为 `yum install golang` 2. 将安装命令设置为 `yum install golang`
![Vercel 部署配置](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3) ![Vercel Deployment Configuration](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)

View File

@ -1,53 +0,0 @@
---
title: ダイアグラム
weight: 6
next: /docs/guide/shortcodes
---
現在、Hextraはダイアグラムのために[Mermaid](#mermaid)をサポートしています。
<!--more-->
## Mermaid
[Mermaid](https://github.com/mermaid-js/mermaid#readme)は、JavaScriptベースのダイアグラムおよびチャート作成ツールで、Markdownにインスパイアされたテキスト定義を取り込み、ブラウザ内でダイナミックにダイアグラムを作成します。例えば、Mermaidはフローチャート、シーケンス図、円グラフなどをレンダリングできます。
HextraでMermaidを使用するのは、言語を`mermaid`に設定したコードブロックを書くのと同じくらい簡単です:
````markdown
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
````
これは次のようにレンダリングされます:
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
シーケンス図:
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: こんにちはJohn、元気ですか
loop 健康チェック
John->>John: 心気症と戦う
end
Note right of John: 理性的な思考 <br/>が勝つ!
John-->>Alice: 元気です!
John->>Bob: あなたはどうですか?
Bob-->>John: とても元気です!
```
詳細については、[Mermaidドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。

View File

@ -4,15 +4,15 @@ weight: 6
next: /docs/guide/shortcodes next: /docs/guide/shortcodes
--- ---
目前Hextra 支持使用 [Mermaid](#mermaid) 来绘制图表。 目前Hextra 支持 [Mermaid](#mermaid) 图表。
<!--more--> <!--more-->
## Mermaid ## Mermaid
[Mermaid](https://github.com/mermaid-js/mermaid#readme) 是一个基于 JavaScript 的图表工具,它通过类似 Markdown 的文本定义,在浏览器中动态生成图表。例如Mermaid 可以渲染流程图、序列图、饼图等。 [Mermaid](https://github.com/mermaid-js/mermaid#readme) 是一个基于 JavaScript 的图表绘制工具,它的文本定义和 Markdown 类似,可在浏览器中动态创建图表。例如流程图、序列图、饼图等。
在 Hextra 中使用 Mermaid 非常简单,只需编写一个语言设置为 `mermaid` 的代码块 在 Hextra 中使用 Mermaid 就像使用代码块一样简单
````markdown ````markdown
```mermaid ```mermaid
@ -24,7 +24,7 @@ graph TD;
``` ```
```` ````
会渲染为: 呈现为:
```mermaid ```mermaid
graph TD; graph TD;
@ -34,20 +34,20 @@ graph TD;
C-->D; C-->D;
``` ```
序列图示例 Sequence diagram
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant Bob participant Bob
Alice->>John: 你好 John最近怎么样 Alice->>John: Hello John, how are you?
loop 健康检查 loop Healthcheck
John->>John: 与疑病症作斗争 John->>John: Fight against hypochondria
end end
Note right of John: 理性思考 <br/>占据上风! Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: 很好! John-->>Alice: Great!
John->>Bob: 你怎么样? John->>Bob: How about you?
Bob-->>John: 非常好! Bob-->>John: Jolly good!
``` ```
更多信息,请参考 [Mermaid 文档](https://mermaid-js.github.io/mermaid/#/)。 如需获取更多信息,转至 [Mermaid Documentation](https://mermaid-js.github.io/mermaid/#/)。

View File

@ -1,97 +0,0 @@
---
title: "LaTeX"
weight: 4
math: true
---
$\KaTeX$ は LaTeX の数式をレンダリングするために使用されます。ページのフロントマターで `math``true` に設定することで、ページごとに有効にすることができます。
<!--more-->
```yaml {filename="page.md"}
---
title: "LaTeX を使用した私のページ"
math: true
---
```
有効にすると、KaTeX のスクリプト、スタイルシート、フォントが自動的にサイトに含まれます。Markdown コンテンツ内で LaTeX 数式を使用できます。
## 例
Markdown コンテンツ内で、インラインおよび別段落の LaTeX 数式がサポートされています。
### インライン
```markdown {filename="page.md"}
これは $\sigma(z) = \frac{1}{1 + e^{-z}}$ インラインです。
```
これは $\sigma(z) = \frac{1}{1 + e^{-z}}$ インラインです。
### 別段落
```markdown {filename="page.md"}
$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
```
次のようにレンダリングされます:
$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
> [!IMPORTANT]
> Hugo 設定ファイルで [パススルー拡張機能](https://gohugo.io/content-management/mathematics/) を有効にして設定してください。これにより、複雑な式のレンダリング問題を回避するために、デリミタ内の生のコンテンツが保持されます。
```yaml {filename="hugo.yaml"}
markup:
goldmark:
extensions:
passthrough:
delimiters:
block: [['\[', '\]'], ['$$', '$$']]
inline: [['\(', '\)']]
enable: true
```
例えば、aligned 環境を使用する場合:
```latex {filename="page.md"}
$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
\end{aligned}
$$
```
次のようにレンダリングされます:
$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
\end{aligned}
$$
## サポートされている関数
サポートされている関数の一覧については、[KaTeX サポートされている関数](https://katex.org/docs/supported.html) を参照してください。
## 化学
化学式は [mhchem](https://mhchem.github.io/MathJax-mhchem/) 拡張機能を介してサポートされています。
インライン: $\ce{H2O}$ は水です。
別段落:
```markdown {filename="page.md"}
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
```
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$

View File

@ -8,7 +8,7 @@ $\KaTeX$ is used for rendering LaTeX math expressions. It can be enabled per pag
<!--more--> <!--more-->
```yaml {filename="page.md"} ```yaml {filename="Markdown"}
--- ---
title: "My Page with LaTeX" title: "My Page with LaTeX"
math: true math: true
@ -40,43 +40,6 @@ will be rendered as:
$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$ $$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
> [!IMPORTANT]
> Please enable and configure the [passthrough extension](https://gohugo.io/content-management/mathematics/) in the Hugo configuration file. It preserves raw content within the delimiters to avoid rendering issues for complex expressions.
```yaml {filename="hugo.yaml"}
markup:
goldmark:
extensions:
passthrough:
delimiters:
block: [['\[', '\]'], ['$$', '$$']]
inline: [['\(', '\)']]
enable: true
```
For example, using the aligned environment:
```latex {filename="page.md"}
$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
\end{aligned}
$$
```
will be rendered as:
$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
\end{aligned}
$$
## Supported Functions ## Supported Functions

View File

@ -1,34 +1,33 @@
--- ---
title: "数学公式" title: "LaTeX 公式"
weight: 4 weight: 4
math: true math: true
--- ---
$\KaTeX$ 用于渲染 LaTeX 数学表达式。可以通过在页面前置设置中`math` 设置为 `true` 来启用 $\KaTeX$ 用于呈现 LaTeX 数学表达式。可`frontmatter` `math` 设置为 `true` 来启用。
<!--more--> <!--more-->
```yaml {filename="page.md"} ```yaml {filename="Markdown"}
--- ---
title: "我的页面包含 LaTeX" title: "My Page with LaTeX"
math: true math: true
--- ---
``` ```
启用后KaTeX 的脚本样式表和字体将自动包含在您的站点中。您可以在 Markdown 内容中开始使用 LaTeX 数学表达式。 启用后KaTeX 的脚本样式表和字体将自动包含在你的网站中。这样就可以在 Markdown 内容中使用 LaTeX 数学表达式。
## 示例 ## 示例
Markdown 内容支持内和独立段落的 LaTeX 数学表达式。 Markdown 内容支持内和独立段落的 LaTeX 数学表达式。
### 内 ###
```markdown {filename="page.md"} ```markdown {filename="page.md"}
这个 $\sigma(z) = \frac{1}{1 + e^{-z}}$ 是内联的。 This $\sigma(z) = \frac{1}{1 + e^{-z}}$ is inline.
``` ```
这个 $\sigma(z) = \frac{1}{1 + e^{-z}}$ 是内联的。 This $\sigma(z) = \frac{1}{1 + e^{-z}}$ is inline.
### 独立段落 ### 独立段落
@ -36,57 +35,20 @@ Markdown 内容中支持内联和独立段落的 LaTeX 数学表达式。
$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$ $$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
``` ```
将渲染为: 渲染为:
$$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$ $$F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-j\omega t} \, dt$$
> [!IMPORTANT]
> 请在 Hugo 配置文件中启用并配置 [passthrough 扩展](https://gohugo.io/content-management/mathematics/)。它保留分隔符内的原始内容,以避免复杂表达式的渲染问题。
```yaml {filename="hugo.yaml"} ## 支持的功能
markup:
goldmark:
extensions:
passthrough:
delimiters:
block: [['\[', '\]'], ['$$', '$$']]
inline: [['\(', '\)']]
enable: true
```
例如,使用对齐环境: 有关支持的符号列表,转至 [KaTeX 支持的公式](https://katex.org/docs/supported.html)。
```latex {filename="page.md"} ## 化学表达式
$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
\end{aligned}
$$
```
将渲染为: 通过 [mhchem](https://mhchem.github.io/MathJax-mhchem/) 支持化学表达式。
$$ 行内:$\ce{H2O}$ 是水。
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
\end{aligned}
$$
## 支持的函数
有关支持的函数列表,请参阅 [KaTeX 支持的函数](https://katex.org/docs/supported.html)。
## 化学
通过 [mhchem](https://mhchem.github.io/MathJax-mhchem/) 扩展支持化学表达式。
内联:$\ce{H2O}$ 是水。
独立段落: 独立段落:

View File

@ -1,196 +0,0 @@
---
title: Markdown
weight: 2
---
Hugoは、テキストのフォーマットやリストの作成などに[Markdown](https://ja.wikipedia.org/wiki/Markdown)構文をサポートしています。このページでは、最も一般的なMarkdown構文の例をいくつか紹介します。
<!--more-->
## Markdownの例
### テキストのスタイル
| スタイル | 構文 | 例 | 出力 |
| -------- | -------- | ------ | ------ |
| 太字 | `**太字テキスト**` | `**太字テキスト**` | **太字テキスト** |
| 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | *斜体テキスト* |
| 取り消し線 | `~~取り消し線テキスト~~` | `~~取り消し線テキスト~~` | ~~取り消し線テキスト~~ |
| 下付き文字 | `<sub></sub>` | `これは<sub>下付き文字</sub>です` | これは<sub>下付き文字</sub>です |
| 上付き文字 | `<sup></sup>` | `これは<sup>上付き文字</sup>です` | これは<sup>上付き文字</sup>です |
### ブロッククォート
引用元付きのブロッククォート
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
> — <cite>ロブ・パイク[^1]</cite>
[^1]: 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
```markdown {filename=Markdown}
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
> — <cite>ロブ・パイク[^1]</cite>
[^1]: 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
```
### アラート
{{< new-feature version="v0.9.0" >}}
アラートは、ブロッククォート構文に基づくMarkdown拡張で、重要な情報を強調するために使用できます。
[GitHubスタイルのアラート](https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)がサポートされています。
Hextraの最新バージョンと[Hugo v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0)以降を使用していることを確認してください。
> [!NOTE]
> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。
> [!TIP]
> 物事をより良く、または簡単に行うための役立つアドバイス。
> [!IMPORTANT]
> ユーザーが目標を達成するために知っておくべき重要な情報。
> [!WARNING]
> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。
> [!CAUTION]
> 特定のアクションのリスクやネガティブな結果についてのアドバイス。
```markdown {filename=Markdown}
> [!NOTE]
> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます。
> [!TIP]
> 物事をより良く、または簡単に行うための役立つアドバイス。
> [!IMPORTANT]
> ユーザーが目標を達成するために知っておくべき重要な情報。
> [!WARNING]
> 問題を避けるために即座にユーザーの注意を引く必要がある緊急の情報。
> [!CAUTION]
> 特定のアクションのリスクやネガティブな結果についてのアドバイス。
```
### テーブル
テーブルはMarkdownのコア仕様には含まれていませんが、Hugoはデフォルトでサポートしています。
| 名前 | 年齢 |
|--------|------|
| ボブ | 27 |
| アリス | 23 |
```markdown {filename=Markdown}
| 名前 | 年齢 |
|--------|------|
| ボブ | 27 |
| アリス | 23 |
```
#### テーブル内のインラインMarkdown
| 斜体 | 太字 | コード |
| -------- | -------- | ------ |
| *斜体* | **太字** | `コード` |
```markdown {filename=Markdown}
| 斜体 | 太字 | コード |
| -------- | -------- | ------ |
| *斜体* | **太字** | `コード` |
```
### コードブロック
{{< cards >}}
{{< card link="../../guide/syntax-highlighting" title="シンタックスハイライト" icon="sparkles" >}}
{{< /cards >}}
### リスト
#### 順序付きリスト
1. 最初の項目
2. 2番目の項目
3. 3番目の項目
```markdown {filename=Markdown}
1. 最初の項目
2. 2番目の項目
3. 3番目の項目
```
#### 順序なしリスト
* リスト項目
* 別の項目
* さらに別の項目
```markdown {filename=Markdown}
* リスト項目
* 別の項目
* さらに別の項目
```
#### ネストされたリスト
* 果物
* りんご
* オレンジ
* バナナ
* 乳製品
* 牛乳
* チーズ
```markdown {filename=Markdown}
* 果物
* りんご
* オレンジ
* バナナ
* 乳製品
* 牛乳
* チーズ
```
### 画像
![風景](https://picsum.photos/800/600)
```markdown {filename=Markdown}
![風景](https://picsum.photos/800/600)
```
キャプション付き:
![風景](https://picsum.photos/800/600 "Unsplashの風景")
```markdown {filename=Markdown}
![風景](https://picsum.photos/800/600 "Unsplashの風景")
```
## 設定
HugoはMarkdownの解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。
Markdownのレンダリングは、`hugo.yaml`の`markup.goldmark`で設定できます。
以下はHextraのデフォルト設定です:
```yaml {filename="hugo.yaml"}
markup:
goldmark:
renderer:
unsafe: true
highlight:
noClasses: false
```
その他の設定オプションについては、Hugoのドキュメント[Configure Markup](https://gohugo.io/getting-started/configuration-markup/)を参照してください。
## 学習リソース
* [Markdownガイド](https://www.markdownguide.org/)
* [Markdownチートシート](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
* [Markdownチュートリアル](https://www.markdowntutorial.com/)
* [Markdownリファレンス](https://commonmark.org/help/)

View File

@ -171,8 +171,6 @@ With caption:
![landscape](https://picsum.photos/800/600 "Unsplash Landscape") ![landscape](https://picsum.photos/800/600 "Unsplash Landscape")
``` ```
For more advanced functionality, use Hugo's built-in [Figure shortcode](https://gohugo.io/shortcodes/figure/).
## Configuration ## Configuration
Hugo uses [Goldmark](https://github.com/yuin/goldmark) for Markdown parsing. Hugo uses [Goldmark](https://github.com/yuin/goldmark) for Markdown parsing.

View File

@ -3,7 +3,7 @@ title: Markdown
weight: 2 weight: 2
--- ---
Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来格式化文本、创建列表等。本页将展示一些最常见的 Markdown 语法示例。 Hugo 支持 [Markdown](https://en.wikipedia.org/wiki/Markdown) 来书写内容,创建列表等。本页将向你展示一些最常见的 Markdown 语法示例。
<!--more--> <!--more-->
@ -11,171 +11,130 @@ Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来
### 文本样式 ### 文本样式
| 样式 | 语法 | 示例 | 输出 | | Style | Syntax | Example | Output |
| -------- | -------- | ------ | ------ | | -------- | -------- | ------ | ------ |
| 粗体 | `**粗体文本**` | `**粗体文本**` | **粗体文本** | | Bold | `**bold text**` | `**bold text**` | **bold text** |
| 斜体 | `*斜体文本*` | `*斜体文本*` | *斜体文本* | | Italic | `*italicized text*` | `*italicized text* | *italicized text* |
| 删除线 | `~~删除线文本~~` | `~~删除线文本~~` | ~~删除线文本~~ | | Strikethrough | `~~strikethrough text~~` | `~~strikethrough text~~` | ~~strikethrough text~~ |
| 下标 | `<sub></sub>` | `这是一个<sub>下标</sub>文本` | 这是一个<sub>下标</sub>文本 | | Subscript | `<sub></sub>` | `This is a <sub>subscript</sub> text` | This is a <sub>subscript</sub> text |
| 上标 | `<sup></sup>` | `这是一个<sup>上标</sup>文本` | 这是一个<sup>上标</sup>文本 | | Superscript | `<sup></sup>` | `This is a <sup>superscript</sup> text` | This is a <sup>superscript</sup> text |
### 引用 ### 引用
带出处的引用 带角标的块引用
> 不要通过共享内存来通信,而要通过通信来共享内存。<br> > Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite> > — <cite>Rob Pike[^1]</cite>
[^1]: 以上引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 上的[演讲](https://www.youtube.com/watch?v=PAAkCSZUG1c)。 [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
```markdown {filename=Markdown} ```markdown {filename=Markdown}
> 不要通过共享内存来通信,而要通过通信来共享内存。<br> > Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite> > — <cite>Rob Pike[^1]</cite>
[^1]: 以上引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 上的[演讲](https://www.youtube.com/watch?v=PAAkCSZUG1c) [^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
```
### 提示框
{{< new-feature version="v0.9.0" >}}
提示框是基于引用块语法的 Markdown 扩展,可用于强调关键信息。
支持 [GitHub 风格的提示框](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)。
请确保您使用的是最新版本的 Hextra 和 [Hugo v0.134.0](https://github.com/gohugoio/hugo/releases/tag/v0.134.0) 或更高版本。
> [!NOTE]
> 用户应该知道的有用信息,即使是在浏览内容时。
> [!TIP]
> 帮助用户更好地或更轻松地完成任务的建议。
> [!IMPORTANT]
> 用户需要了解的关键信息,以实现他们的目标。
> [!WARNING]
> 需要用户立即注意的紧急信息,以避免问题。
> [!CAUTION]
> 关于某些操作的风险或负面结果的建议。
```markdown {filename=Markdown}
> [!NOTE]
> 用户应该知道的有用信息,即使是在浏览内容时。
> [!TIP]
> 帮助用户更好地或更轻松地完成任务的建议。
> [!IMPORTANT]
> 用户需要了解的关键信息,以实现他们的目标。
> [!WARNING]
> 需要用户立即注意的紧急信息,以避免问题。
> [!CAUTION]
> 关于某些操作的风险或负面结果的建议。
``` ```
### 表格 ### 表格
表格不是 Markdown 核心规范的一部分,但 Hugo 默认支持它们。 表格并非核心 Markdown 规范,但 Hugo 支持开箱即用的表格:
| 姓名 | 年龄 | | Name | Age |
|--------|------| |--------|------|
| Bob | 27 | | Bob | 27 |
| Alice | 23 | | Alice | 23 |
```markdown {filename=Markdown} ```markdown {filename=Markdown}
| 姓名 | 年龄 | | Name | Age |
|--------|------| |--------|------|
| Bob | 27 | | Bob | 27 |
| Alice | 23 | | Alice | 23 |
``` ```
#### 表格中的内联 Markdown #### Markdown 表格中的内联
| 斜体 | 粗体 | 代码 | | Italics | Bold | Code |
| -------- | -------- | ------ | | -------- | -------- | ------ |
| *斜体* | **粗体** | `代码` | | *italics* | **bold** | `code` |
```markdown {filename=Markdown} ```markdown {filename=Markdown}
| 斜体 | 粗体 | 代码 | | Italics | Bold | Code |
| -------- | -------- | ------ | | -------- | -------- | ------ |
| *斜体* | **粗体** | `代码` | | *italics* | **bold** | `code` |
``` ```
### 代码块 ### 代码块
{{< cards >}} {{< cards >}}
{{< card link="../../guide/syntax-highlighting" title="语法高亮" icon="sparkles" >}} {{< card link="../../guide/syntax-highlighting" title="Syntax Highlighting" icon="sparkles" >}}
{{< /cards >}} {{< /cards >}}
### 列表 ### 列表
#### 有序列表 #### 有序列表
1. 第一项 1. First item
2. 第二项 2. Second item
3. 第三项 3. Third item
```markdown {filename=Markdown} ```markdown {filename=Markdown}
1. 第一项 1. First item
2. 第二项 2. Second item
3. 第三项 3. Third item
``` ```
#### 无序列表 #### 无序列表
* 列表项 * List item
* 另一个项 * Another item
* 再一个项 * And another item
```markdown {filename=Markdown} ```markdown {filename=Markdown}
* 列表项 * List item
* 另一个项 * Another item
* 再一个项 * And another item
``` ```
#### 嵌套列表 #### 嵌套列表
* 水果 * Fruit
* 苹果 * Apple
* 橙子 * Orange
* 香蕉 * Banana
* 乳制品 * Dairy
* 牛奶 * Milk
* 奶酪 * Cheese
```markdown {filename=Markdown} ```markdown {filename=Markdown}
* 水果 * Fruit
* 苹果 * Apple
* 橙子 * Orange
* 香蕉 * Banana
* 乳制品 * Dairy
* 牛奶 * Milk
* 奶酪 * Cheese
``` ```
### 图片 ### 图片
![风景](https://picsum.photos/800/600) ![landscape](https://picsum.photos/800/600)
```markdown {filename=Markdown} ```markdown {filename=Markdown}
![风景](https://picsum.photos/800/600) ![landscape](https://picsum.photos/800/600)
``` ```
带标题: 标题:
![风景](https://picsum.photos/800/600 "Unsplash 风景") ![landscape](https://picsum.photos/800/600 "Unsplash Landscape")
```markdown {filename=Markdown} ```markdown {filename=Markdown}
![风景](https://picsum.photos/800/600 "Unsplash 风景") ![landscape](https://picsum.photos/800/600 "Unsplash Landscape")
``` ```
## 配置 ## 配置
Hugo 使用 [Goldmark](https://github.com/yuin/goldmark) 进行 Markdown 解析 Hugo 使用 [Goldmark](https://github.com/yuin/goldmark) 解析 Markdown。
Markdown 渲染可以在 `hugo.yaml` 中的 `markup.goldmark` 下进行配置 Markdown 渲染可以在 `hugo.yaml` 中的 `markup.goldmark` 中配置。以下是Hextra的默认配置
以下是 Hextra 的默认配置:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
markup: markup:
@ -186,11 +145,11 @@ markup:
noClasses: false noClasses: false
``` ```
更多配置选项,请参阅 Hugo 文档中的 [配置 Markup](https://gohugo.io/getting-started/configuration-markup/)。 如需了解更多选项,转至 [Configure Markup](https://gohugo.io/getting-started/configuration-markup/)。
## 学习资源 ## 参考资料
* [Markdown 指南](https://www.markdownguide.org/) * [Markdown Guide](https://www.markdownguide.org/)
* [Markdown 速查表](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) * [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
* [Markdown 教程](https://www.markdowntutorial.com/) * [Markdown Tutorial](https://www.markdowntutorial.com/)
* [Markdown 参考](https://commonmark.org/help/) * [Markdown Reference](https://commonmark.org/help/)

View File

@ -1,187 +0,0 @@
---
title: ファイルの整理
weight: 1
prev: /docs/guide
---
## ディレクトリ構造
デフォルトでは、Hugoは`content`ディレクトリ内のMarkdownファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。
このサイトを例に取ります:
<!--more-->
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/folder name="docs" state="open" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/file name="getting-started.md" >}}
{{< filetree/folder name="guide" state="open" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/file name="organize-files.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< filetree/folder name="blog" state="open" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/file name="post-1.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
`_index.md`ファイルは、対応するセクションのインデックスページです。他のMarkdownファイルは通常のページです。
```
content
├── _index.md // <- /
├── docs
│ ├── _index.md // <- /docs/
│ ├── getting-started.md // <- /docs/getting-started/
│ └── guide
│ ├── _index.md // <- /docs/guide/
│ └── organize-files.md // <- /docs/guide/organize-files/
└── blog
├── _index.md // <- /blog/
└── post-1.md // <- /blog/post-1/
```
## レイアウト
Hextraは、異なるコンテンツタイプに対して3つのレイアウトを提供します
| レイアウト | ディレクトリ | 特徴 |
| :-------- | :-------------------- | :--------------------------------------------------------------- |
| `docs` | `content/docs/` | 構造化されたドキュメントに最適で、このセクションと同じです。 |
| `blog` | `content/blog/` | ブログ投稿用で、リスト表示と詳細記事表示の両方があります。 |
| `default` | その他のディレクトリ | サイドバーなしの単一ページ記事表示です。 |
セクションの動作をビルトインレイアウトと同じにするには、セクションの`_index.md`のフロントマターで希望するタイプを指定します。
```yaml {filename="content/my-docs/_index.md"}
---
title: My Docs
cascade:
type: docs
---
```
上記の設定例により、`content/my-docs/`内のコンテンツファイルはデフォルトでドキュメント(`docs`タイプ)として扱われます。
## サイドバーナビゲーション
サイドバーナビゲーションは、コンテンツの整理に基づいて自動的に生成されます。サイドバーの順序を手動で設定するには、Markdownファイルのフロントマターで`weight`パラメータを使用します。
```yaml {filename="content/docs/guide/_index.md"}
---
title: Guide
weight: 2
---
```
{{< callout emoji="">}}
サイドバーがあまり深くならないようにすることをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
{{< /callout >}}
## パンくずナビゲーション
パンくずは、`/content`のディレクトリ構造に基づいて自動生成されます。
例えば、[上記のファイル構造](#directory-structure)を考えます。その構造に基づいて、`/docs/guide/organize-files/`ページの上部にパンくずが自動的に表示されます:
```
Documentation > Guide > Organize Files
```
### パンくずリンクのタイトルをカスタマイズ
デフォルトでは、各パンくずリンクはそのページの`title`パラメータに基づいて生成されます。これをカスタマイズするには、`linkTitle`を指定します。
例えば、`Organize Files`の代わりに`Foo Bar`と表示したい場合:
```yaml {filename="content/docs/guide/organize-files.md"}
---
linkTitle: Foo Bar
title: Organize Files
---
```
これにより、以下のパンくずが生成されます:
```
Documentation > Guide > Foo Bar
```
### パンくずを非表示にする
ページのフロントマターで`breadcrumbs: false`を指定することで、パンくずを完全に非表示にできます:
```yaml {filename="content/docs/guide/organize-files.md"}
---
breadcrumbs: false
title: Organize Files
---
```
## コンテンツディレクトリの設定
デフォルトでは、Hugoはサイトを構築するためにルートの`content/`ディレクトリを使用します。
例えば`docs/`など、異なるディレクトリをコンテンツに使用する必要がある場合は、サイト設定`hugo.yaml`で[`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir)パラメータを設定することで行えます。
## 画像の追加
画像を追加する最も簡単な方法は、画像ファイルをMarkdownファイルと同じディレクトリに置くことです。
例えば、`my-page.md`ファイルと同じディレクトリに`image.png`ファイルを追加します:
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" >}}
{{< filetree/file name="my-page.md" >}}
{{< filetree/file name="image.png" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
その後、以下のMarkdown構文を使用してコンテンツに画像を追加できます
```markdown {filename="content/docs/my-page.md"}
![](image.png)
```
また、Hugoの[ページバンドル][page-bundles]機能を利用して、画像ファイルをMarkdownファイルと一緒に整理することもできます。そのためには、`my-page.md`ファイルを`my-page`ディレクトリに変換し、コンテンツを`index.md`というファイルに置き、画像ファイルを`my-page`ディレクトリ内に置きます:
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" >}}
{{< filetree/folder name="my-page" >}}
{{< filetree/file name="index.md" >}}
{{< filetree/file name="image.png" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
```markdown {filename="content/docs/my-page/index.md"}
![](image.png)
```
または、画像ファイルを`static`ディレクトリに置くこともできます。これにより、すべてのページで画像が利用可能になります:
{{< filetree/container >}}
{{< filetree/folder name="static" >}}
{{< filetree/folder name="images" >}}
{{< filetree/file name="image.png" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" >}}
{{< filetree/file name="my-page.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
画像パスはスラッシュ`/`で始まり、`static`ディレクトリからの相対パスであることに注意してください:
```markdown {filename="content/docs/my-page.md"}
![](/images/image.png)
```
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles

View File

@ -1,13 +1,13 @@
--- ---
title: 组织文件 title: 目录结构
weight: 1 weight: 1
prev: /docs/guide prev: /docs/guide
--- ---
## 目录结构 ## 目录结构
默认情况下Hugo `content` 目录中查找 Markdown 文件,目录的结构决定了网站最终输出结构。 默认情况下Hugo 在 `content` 目录中搜索 Markdown 文件,目录的结构决定了网站最终输出结构。
网站为例: 示例网站为例:
<!--more--> <!--more-->
@ -29,7 +29,7 @@ prev: /docs/guide
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
每个 `_index.md` 文件都是应部分的索引页面。其他 Markdown 文件则是常规页面。 每个 `_index.md` 文件都是应部分的索引页其他 Markdown 文件则是常规页面。
``` ```
content content
@ -45,143 +45,21 @@ content
└── post-1.md // <- /blog/post-1/ └── post-1.md // <- /blog/post-1/
``` ```
## 布局
Hextra 为不同类型的内容提供了三种布局:
| 布局 | 目录 | 特性 |
| :-------- | :------------------ | :----------------------------------------------------------- |
| `docs` | `content/docs/` | 适合结构化文档,与本部分相同。 |
| `blog` | `content/blog/` | 用于博客文章,包含列表和详细文章视图。 |
| `default` | 其他所有目录 | 单页文章视图,无侧边栏。 |
要将某个部分自定义为与内置布局相同的行为,可以在该部分的 `_index.md` 的前言中指定所需的类型。
```yaml {filename="content/my-docs/_index.md"}
---
title: 我的文档
cascade:
type: docs
---
```
上述示例配置确保 `content/my-docs/` 中的内容文件默认会被视为文档(`docs` 类型)。
## 侧边栏导航 ## 侧边栏导航
侧边栏导航根据内容组织字母顺序自动生成。要手动配置侧边栏顺序,可以在 Markdown 文件的前言中使用 `weight` 参数 侧边栏导航根据内容组织字母顺序自动生成。要手动配置侧边栏顺序,可以在 Markdown 文件的 `frontmatter ` 中使用 `weight` 配置
```yaml {filename="content/docs/guide/_index.md"} ```yaml {filename="content/docs/guide/_index.md"}
--- ---
title: 指南 title: Guide
weight: 2 weight: 2
--- ---
``` ```
{{< callout emoji="">}} {{< callout emoji="">}}
建议不要让侧边栏过深。如果你有很多内容,考虑**将它们分成多个部分**。 建议侧边栏不要太深。如果内容太多,请考虑 **将它们分成多个部分**。
{{< /callout >}} {{< /callout >}}
## 面包屑导航
面包屑导航会根据 `/content` 的目录结构自动生成。
例如,考虑上面[展示的目录结构](#directory-structure)。根据该结构,页面 `/docs/guide/organize-files/` 顶部的面包屑导航会自动显示如下:
```
文档 > 指南 > 组织文件
```
### 自定义面包屑链接标题
默认情况下,每个面包屑链接是根据页面的 `title` 参数生成的。你可以通过指定 `linkTitle` 来自定义。
例如,如果我们希望面包屑显示为 `Foo Bar` 而不是 `Organize Files`
```yaml {filename="content/docs/guide/organize-files.md"}
---
linkTitle: Foo Bar
title: 组织文件
---
```
现在会生成以下面包屑:
```
文档 > 指南 > Foo Bar
```
### 隐藏面包屑
你可以通过在页面的前言中指定 `breadcrumbs: false` 来完全隐藏面包屑:
```yaml {filename="content/docs/guide/organize-files.md"}
---
breadcrumbs: false
title: 组织文件
---
```
## 配置内容目录 ## 配置内容目录
默认情况下Hugo 使用根目录 `content/` 来构建网站 如果需要为的内容使用不同的目录,可以在站点配置文件中设置 [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) 来实现
如果你需要使用不同的目录来存放内容,例如 `docs/`,可以通过在站点配置文件 `hugo.yaml` 中设置 [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) 参数来实现。
## 添加图片
添加图片的最简单方法是将图片文件放在与 Markdown 文件相同的目录中。
例如,将图片文件 `image.png` 与 `my-page.md` 文件放在一起:
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" >}}
{{< filetree/file name="my-page.md" >}}
{{< filetree/file name="image.png" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
然后,我们可以使用以下 Markdown 语法将图片添加到内容中:
```markdown {filename="content/docs/my-page.md"}
![](image.png)
```
我们还可以利用 Hugo 的 [页面包][page-bundles] 功能将图片文件与 Markdown 文件一起组织。为此,将 `my-page.md` 文件转换为目录 `my-page`,并将内容放入名为 `index.md` 的文件中,然后将图片文件放入 `my-page` 目录中:
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" >}}
{{< filetree/folder name="my-page" >}}
{{< filetree/file name="index.md" >}}
{{< filetree/file name="image.png" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
```markdown {filename="content/docs/my-page/index.md"}
![](image.png)
```
或者,我们也可以将图片文件放在 `static` 目录中,这样所有页面都可以访问这些图片:
{{< filetree/container >}}
{{< filetree/folder name="static" >}}
{{< filetree/folder name="images" >}}
{{< filetree/file name="image.png" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" >}}
{{< filetree/file name="my-page.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
注意,图片路径以斜杠 `/` 开头,并且相对于静态目录:
```markdown {filename="content/docs/my-page.md"}
![](/images/image.png)
```
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles

View File

@ -1,29 +0,0 @@
---
title: ショートコード
weight: 9
prev: /docs/guide/diagrams
next: /docs/guide/shortcodes/callout
---
[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に埋め込まれるシンプルなスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
Hextra は、コンテンツを強化するための美しいショートコードのコレクションを提供します。
{{< cards >}}
{{< card link="callout" title="コールアウト" icon="warning" >}}
{{< card link="cards" title="カード" icon="card" >}}
{{< card link="details" title="詳細" icon="chevron-right" >}}
{{< card link="filetree" title="FileTree" icon="folder-tree" >}}
{{< card link="icon" title="アイコン" icon="badge-check" >}}
{{< card link="steps" title="ステップ" icon="one" >}}
{{< card link="tabs" title="タブ" icon="collection" >}}
{{< /cards >}}
<div style="padding-top:4rem"></div>
Hugo と Hextra が提供する追加のショートコード:
{{< cards >}}
{{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
{{< card link="others" title="その他" icon="view-grid" >}}
{{< /cards >}}

View File

@ -5,25 +5,15 @@ prev: /docs/guide/diagrams
next: /docs/guide/shortcodes/callout next: /docs/guide/shortcodes/callout
--- ---
[Hugo 短代码](https://gohugo.io/content-management/shortcodes/)内容文件中的简单片段,用于调用内置或自定义模板。 [Hugo 短代码](https://gohugo.io/content-management/shortcodes/) 是你的内容文件中调用内置或自定义模板的简单片段
Hextra 提供了一系列美的短代码以增强的内容。 Hextra 提供了一系列美的短代码以增强的内容。
{{< cards >}} {{< cards >}}
{{< card link="callout" title="注" icon="warning" >}} {{< card link="callout" title="注意事项" icon="warning" >}}
{{< card link="cards" title="卡片" icon="card" >}} {{< card link="cards" title="卡片" icon="card" >}}
{{< card link="details" title="详情" icon="chevron-right" >}}
{{< card link="filetree" title="文件树" icon="folder-tree" >}} {{< card link="filetree" title="文件树" icon="folder-tree" >}}
{{< card link="icon" title="图标" icon="badge-check" >}} {{< card link="icon" title="图标" icon="badge-check" >}}
{{< card link="steps" title="步骤" icon="one" >}} {{< card link="steps" title="步骤" icon="one" >}}
{{< card link="tabs" title="标签" icon="collection" >}} {{< card link="tabs" title="标签" icon="collection" >}}
{{< /cards >}} {{< /cards >}}
<div style="padding-top:4rem"></div>
Hugo 和 Hextra 提供的其他短代码:
{{< cards >}}
{{< card link="jupyter" title="Jupyter 笔记本" icon="jupyter" tag="alpha" >}}
{{< card link="others" title="其他" icon="view-grid" >}}
{{< /cards >}}

View File

@ -1,83 +0,0 @@
---
title: コールアウトコンポーネント
linkTitle: コールアウト
aliases:
- callouts
prev: /docs/guide/shortcodes
---
読者に重要な情報を示すための組み込みコンポーネントです。
<!--more-->
> [!NOTE]
> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
> これはMarkdown構文を活用してコールアウトをレンダリングし、コンテンツの移植性と可読性を向上させます。
## 例
{{< callout emoji="👾">}}
**コールアウト**は、注意を引くための短いテキストです。
{{< /callout >}}
{{< callout type="info" >}}
**コールアウト**は、注意を引くための短いテキストです。
{{< /callout >}}
{{< callout type="warning" >}}
**コールアウト**は、注意を引くための短いテキストです。
{{< /callout >}}
{{< callout type="error" >}}
**コールアウト**は、注意を引くための短いテキストです。
{{< /callout >}}
## 使用方法
### デフォルト
{{< callout emoji="🌐">}}
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
{{< /callout >}}
```markdown
{{</* callout emoji="🌐" */>}}
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
{{</* /callout */>}}
```
### 情報
{{< callout type="info" >}}
最新のリリースを確認するには、GitHubをご覧ください。
{{< /callout >}}
```markdown
{{</* callout type="info" */>}}
最新のリリースを確認するには、GitHubをご覧ください。
{{</* /callout */>}}
```
### 警告
{{< callout type="warning" >}}
このAPIは次のバージョンで非推奨になります。
{{< /callout >}}
```markdown
{{</* callout type="warning" */>}}
**コールアウト**は、注意を引くための短いテキストです。
{{</* /callout */>}}
```
### エラー
{{< callout type="error" >}}
何か問題が発生し、爆発しそうです。
{{< /callout >}}
```markdown
{{</* callout type="error" */>}}
何か問題が発生し、爆発しそうです。
{{</* /callout */>}}
```

View File

@ -1,83 +1,78 @@
--- ---
title: 提示框组件 title: 标注
linkTitle: 提示框
aliases: aliases:
- 提示框 - callouts
prev: /docs/guide/shortcodes prev: /docs/guide/shortcodes
--- ---
一个内置组件,用于向读者示重要信息。 向读者示重要信息的内置组件
<!--more--> <!--more-->
> [!NOTE] ## Example
> 自 [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) 起支持 [GitHub 风格的提醒](../../markdown#alerts)。
> 它利用 Markdown 语法来渲染提示框,确保内容具有更好的可移植性和可读性。
## 示例
{{< callout emoji="👾">}} {{< callout emoji="👾">}}
**提示框** 是一段简短的文本,旨在吸引注意力 **标注**是一段旨在吸引注意力的短文本
{{< /callout >}} {{< /callout >}}
{{< callout type="info" >}} {{< callout type="info" >}}
**提示框** 是一段简短的文本,旨在吸引注意力。 **标注**是一段旨在吸引注意力的短文本
{{< /callout >}} {{< /callout >}}
{{< callout type="warning" >}} {{< callout type="warning" >}}
**提示框** 是一段简短的文本,旨在吸引注意力。 **标注**是一段旨在吸引注意力的短文本
{{< /callout >}} {{< /callout >}}
{{< callout type="error" >}} {{< callout type="error" >}}
**提示框** 是一段简短的文本,旨在吸引注意力。 **标注**是一段旨在吸引注意力的短文本
{{< /callout >}} {{< /callout >}}
## 用法 ## Usage
### 默认 ### Default
{{< callout emoji="🌐">}} {{< callout emoji="🌐">}}
Hugo 可用于创建各种类型的网站,包括博客、作品集、文档站点等。 Hugo 可用于创建各种网站,包括博客、作品集、文档网站等
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout emoji="🌐" */>}} {{</* callout emoji="🌐" */>}}
Hugo 可用于创建各种类型的网站,包括博客、作品集、文档站点等。 Hugo 可用于创建各种网站,包括博客、作品集、文档网站等
{{</* /callout */>}} {{</* /callout */>}}
``` ```
### 信息 ### Info
{{< callout type="info" >}} {{< callout type="info" >}}
请访问 GitHub 查看最新版本 请访问 GitHub 查看最新版本
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout type="info" */>}} {{</* callout type="info" */>}}
请访问 GitHub 查看最新版本 请访问 GitHub 查看最新版本
{{</* /callout */>}} {{</* /callout */>}}
``` ```
### 警告 ### Warning
{{< callout type="warning" >}} {{< callout type="warning" >}}
API 将在下一版本中弃用 API 将在下一版本中弃用
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout type="warning" */>}} {{</* callout type="warning" */>}}
**提示框** 是一段简短的文本,旨在吸引注意力 **标注**是一段旨在吸引注意力的简短文字
{{</* /callout */>}} {{</* /callout */>}}
``` ```
### 错误 ### Error
{{< callout type="error" >}} {{< callout type="error" >}}
错了,系统即将崩溃。 问题了,要爆炸了
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout type="error" */>}} {{</* callout type="error" */>}}
错了,系统即将崩溃。 问题了,要爆炸了
{{</* /callout */>}} {{</* /callout */>}}
``` ```

View File

@ -1,115 +0,0 @@
---
title: カードコンポーネント
linkTitle: カード
---
## 例
{{< cards >}}
{{< card link="../callout" title="コールアウト" icon="warning" >}}
{{< card link="../callout" title="タグ付きカード" icon="tag" tag="カスタムタグ">}}
{{< card link="/" title="アイコンなし" >}}
{{< /cards >}}
{{< cards >}}
{{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" >}}
{{< card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" >}}
{{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" >}}
{{< /cards >}}
## 使用方法
```
{{</* cards */>}}
{{</* card link="../callout" title="コールアウト" icon="warning" */>}}
{{</* card link="../callout" title="タグ付きカード" icon="tag" tag= "カスタムタグ" */>}}
{{</* card link="/" title="アイコンなし" */>}}
{{</* /cards */>}}
```
```
{{</* cards */>}}
{{</* card link="/" title="画像カード" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplashの風景画像" */>}}
{{</* card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像。" */>}}
{{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み。" method="Resize" options="600x q80 webp" */>}}
{{</* /cards */>}}
```
## カードパラメータ
| パラメータ | 説明 |
|----------- |-----------------------------------------------------------------|
| `link` | URL内部または外部。 |
| `title` | カードのタイトル見出し。 |
| `subtitle` | サブタイトル見出しMarkdown対応。 |
| `icon` | アイコンの名前。 |
| `tag` | タグ内のテキスト。 |
| `tagColor` | タグの色: `gray`(デフォルト)、`yellow``red``blue`。 |
## 画像カード
さらに、カードは画像の追加と以下のパラメータを通じた処理をサポートします:
| パラメータ | 説明 |
|----------- |---------------------------------------------|
| `image` | カードの画像URLを指定します。 |
| `method` | Hugoの画像処理メソッドを設定します。 |
| `options` | Hugoの画像処理オプションを設定します。 |
カードは3種類の画像をサポートします:
1. リモート画像: `image`パラメータに完全なURLを指定。
2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。
3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。
Hextraはビルド時に画像処理が必要かどうかを自動検出し、`options`パラメータまたはデフォルト設定Resize、800x、品質80、WebPフォーマットを適用します。
現在サポートされている`method``Resize``Fit``Fill``Crop`です。
Hugoの組み込み画像処理コマンド、メソッド、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
## タグ
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに役立ちます。
{{< cards >}}
{{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}}
{{< card link="../callout" title="エラータグ付きカード" tag="タグテキスト" tagType="error" >}}
{{< card link="../callout" title="情報タグ付きカード" tag="タグテキスト" tagType="info" >}}
{{< card link="../callout" title="警告タグ付きカード" tag="タグテキスト" tagType="warning" >}}
{{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" tag="タグテキスト" tagType="error" >}}
{{< /cards >}}
```
{{</* cards */>}}
{{</* card link="../callout" title="デフォルトタグ色付きカード" tag="タグテキスト" */>}}
{{</* card link="../callout" title="デフォルト赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
{{</* card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" */>}}
{{</* card link="../callout" title="黄色タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
{{</* /cards */>}}
```
## 列
`cards`ショートコードに`cols`パラメータを渡すことで、カードが広がる最大列数を指定できます。ただし、小さい画面では列は折りたたまれます。
{{< cards cols="1" >}}
{{< card link="/" title="上部カード" >}}
{{< card link="/" title="下部カード" >}}
{{< /cards >}}
{{< cards cols="2" >}}
{{< card link="/" title="左カード" >}}
{{< card link="/" title="右カード" >}}
{{< /cards >}}
```
{{</* cards cols="1" */>}}
{{</* card link="/" title="上部カード" */>}}
{{</* card link="/" title="下部カード" */>}}
{{</* /cards */>}}
{{</* cards cols="2" */>}}
{{</* card link="/" title="左カード" */>}}
{{</* card link="/" title="右カード" */>}}
{{</* /cards */>}}
```

View File

@ -1,115 +1,65 @@
--- ---
title: 卡片组件 title: 卡片
linkTitle: 卡片 linkTitle: Cards
--- ---
## 示例 ## 示例
{{< cards >}} {{< cards >}}
{{< card link="../callout" title="提示框" icon="warning" >}} {{< card link="../callout" title="Callout" icon="warning" >}}
{{< card link="../callout" title="带标签的卡片" icon="tag" tag="自定义标签">}} {{< card link="/" title="No Icon" >}}
{{< card link="/" title="无图标" >}}
{{< /cards >}} {{< /cards >}}
{{< cards >}} {{< cards >}}
{{< card link="/" title="图片卡片" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="网络图片" >}} {{< card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" >}}
{{< card link="/" title="本地图片" image="/images/card-image-unprocessed.jpg" subtitle="静态目录下的原始图片。" >}} {{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
{{< card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片,由 Hugo 处理。" method="Resize" options="600x q80 webp" >}} {{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
{{< /cards >}} {{< /cards >}}
## 用 ## 使
``` ```
{{</* cards */>}} {{</* cards */>}}
{{</* card link="../callout" title="提示框" icon="warning" */>}} {{</* card link="../callout" title="Callout" icon="warning" */>}}
{{</* card link="../callout" title="带标签的卡片" icon="tag" tag= "自定义标签" */>}} {{</* card link="/" title="No Icon" */>}}
{{</* card link="/" title="无图标" */>}}
{{</* /cards */>}} {{</* /cards */>}}
``` ```
``` ```
{{</* cards */>}} {{</* cards */>}}
{{</* card link="/" title="图片卡片" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash 风景" */>}} {{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
{{</* card link="/" title="本地图片" image="/images/card-image-unprocessed.jpg" subtitle="静态目录下的原始图片。" */>}} {{</* card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." */>}}
{{</* card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片,由 Hugo 处理。" method="Resize" options="600x q80 webp" */>}} {{</* card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" */>}}
{{</* /cards */>}} {{</* /cards */>}}
``` ```
## 卡片参数 ## 卡片参数
| 参数 | 描述 | | Parameter | Description |
|----------- |-----------------------------------------------------------------| |----------- |---------------------------------------|
| `link` | URL内部或外部 | | `link` | URL内部或外部 |
| `title` | 卡片的标题 | | `title` | 卡片的标题 |
| `subtitle` | 卡片的副标题(支持 Markdown | | `subtitle` | 字幕标题(支持 Markdown |
| `icon` | 图标的名称 | | `icon` | 图标的名称 |
| `tag` | 标签中的文本。 |
| `tagColor` | 标签的颜色:`gray`(默认)、`yellow``red``blue`。 |
## 图片卡片
此外,卡片支持通过以下参数添加图片并进行处理: ## Image Card
| 参数 | 描述 | 此外,该卡还支持通过以下参数添加图像和处理:
|-----------|--------------------------------------|
| `image` | 指定卡片的图片 URL。 |
| `method` | 设置 Hugo 的图片处理方法。 |
| `options` | 配置 Hugo 的图片处理选项。 |
卡片支持三种类型的图片: | Parameter | Description |
|----------- |---------------------------------------------|
| `image` | 指定卡片的图像 URL. |
| `method` | 设置 Hugo 的图像处理方法。 |
| `options` | 配置 Hugo 的图像处理选项。|
1. 远程图片:`image` 参数中的完整 URL。 卡片支持三种图像:
2. 静态图片:使用 Hugo `static/` 目录中的相对路径。
3. 处理后的图片:使用 Hugo `assets/` 目录中的相对路径。
Hextra 在构建时自动检测是否需要图片处理,并应用 `options` 参数或默认设置Resize800x质量 80WebP 格式)。 1. 远程图片:完整网址应放置在 image 参数中
目前支持以下 `method``Resize``Fit``Fill``Crop` 2. 静态图片:使用 Hugo 的 static/ 目录中的相对路径
3. 处理过的图片:使用 Hugo 的 assets/ 目录中的相对路径
有关 Hugo 内置图片处理命令、方法和选项的更多信息,请参阅其[图片处理文档](https://gohugo.io/content-management/image-processing/) Hextra 在构建过程中会自动检测图片是否需要处理,并根据需要应用 options 参数或默认设置缩放800x质量 80WebP 格式)
## 标签 它目前支持以下处理方法Resize缩放、Fit适应、Fill填充和 Crop裁剪
卡片支持添加标签,这对于显示额外的状态信息非常有用。 有关 Hugo 内置图像处理命令、方法和选项的更多信息,请参阅他们的 [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
{{< cards >}}
{{< card link="../callout" title="带默认标签的卡片" tag="标签文本" >}}
{{< card link="../callout" title="带错误标签的卡片" tag="标签文本" tagType="error" >}}
{{< card link="../callout" title="带信息标签的卡片" tag="标签文本" tagType="info" >}}
{{< card link="../callout" title="带警告标签的卡片" tag="标签文本" tagType="warning" >}}
{{< card link="/" title="图片卡片" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="网络图片" tag="标签文本" tagType="error" >}}
{{< /cards >}}
```
{{</* cards */>}}
{{</* card link="../callout" title="带默认标签颜色的卡片" tag="标签文本" */>}}
{{</* card link="../callout" title="带红色标签的卡片" tag="标签文本" tagType="error" */>}}
{{</* card link="../callout" title="带蓝色标签的卡片" tag="标签文本" tagType="info" */>}}
{{</* card link="../callout" title="带黄色标签的卡片" tag="标签文本" tagType="warning" */>}}
{{</* /cards */>}}
```
## 列数
您可以通过将 `cols` 参数传递给 `cards` 短代码来指定卡片的最大列数。请注意,在较小的屏幕上,列仍会折叠。
{{< cards cols="1" >}}
{{< card link="/" title="顶部卡片" >}}
{{< card link="/" title="底部卡片" >}}
{{< /cards >}}
{{< cards cols="2" >}}
{{< card link="/" title="左侧卡片" >}}
{{< card link="/" title="右侧卡片" >}}
{{< /cards >}}
```
{{</* cards cols="1" */>}}
{{</* card link="/" title="顶部卡片" */>}}
{{</* card link="/" title="底部卡片" */>}}
{{</* /cards */>}}
{{</* cards cols="2" */>}}
{{</* card link="/" title="左侧卡片" */>}}
{{</* card link="/" title="右侧卡片" */>}}
{{</* /cards */>}}
```

View File

@ -1,43 +0,0 @@
---
title: 詳細
---
折りたたみ可能なコンテンツを表示するための組み込みコンポーネント。
<!--more-->
## 例
{{% details title="詳細" %}}
これは詳細のコンテンツです。
Markdownは**サポートされています**。
{{% /details %}}
{{% details title="クリックして表示" closed="true" %}}
これはデフォルトで非表示になります。
{{% /details %}}
## 使い方
````markdown
{{%/* details title="詳細" */%}}
これは詳細のコンテンツです。
Markdownは**サポートされています**。
{{%/* /details */%}}
````
````markdown
{{%/* details title="クリックして表示" closed="true" */%}}
これはデフォルトで非表示になります。
{{%/* /details */%}}
````

View File

@ -2,42 +2,42 @@
title: 详情 title: 详情
--- ---
一个内置组件,用于显示可折叠的内容 用于显示可折叠内容的内置组件
<!--more--> <!--more-->
## 示例 ## 示例
{{% details title="详情" %}} {{% details title="Details" %}}
这是详情的内容 这是细节的内容
支持 **Markdown** Markdown is **supported**.
{{% /details %}} {{% /details %}}
{{% details title="点击我展开" closed="true" %}} {{% details title="Click me to reveal" closed="true" %}}
默认情况下,这部分内容会被隐藏 默认情况下这将被隐藏
{{% /details %}} {{% /details %}}
## 用法 ## Usage
````markdown ````markdown
{{%/* details title="详情" */%}} {{%/* details title="Details" */%}}
这是详情的内容 这是细节的内容
支持 **Markdown**。 **支持** Markdown
{{%/* /details */%}} {{%/* /details */%}}
```` ````
````markdown ````markdown
{{%/* details title="点击我展开" closed="true" */%}} {{%/* details title="Click me to reveal" closed="true" */%}}
默认情况下,这部分内容会被隐藏 默认情况下这将被隐藏
{{%/* /details */%}} {{%/* /details */%}}
```` ````

View File

@ -1,34 +0,0 @@
---
title: FileTree コンポーネント
linkTitle: FileTree
---
## 例
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/folder name="docs" state="closed" >}}
{{< filetree/file name="_index.md" >}}
{{< filetree/file name="introduction.md" >}}
{{< filetree/file name="introduction.fr.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< filetree/file name="hugo.toml" >}}
{{< /filetree/container >}}
## 使用方法
```text {filename="Markdown"}
{{</* filetree/container */>}}
{{</* filetree/folder name="content" */>}}
{{</* filetree/file name="_index.md" */>}}
{{</* filetree/folder name="docs" state="closed" */>}}
{{</* filetree/file name="_index.md" */>}}
{{</* filetree/file name="introduction.md" */>}}
{{</* filetree/file name="introduction.fr.md" */>}}
{{</* /filetree/folder */>}}
{{</* /filetree/folder */>}}
{{</* filetree/file name="hugo.toml" */>}}
{{</* /filetree/container */>}}
```

View File

@ -1,6 +1,5 @@
--- ---
title: 文件树组件 title: 文件树
linkTitle: 文件树
--- ---
## 示例 ## 示例
@ -31,4 +30,4 @@ linkTitle: 文件树
{{</* /filetree/folder */>}} {{</* /filetree/folder */>}}
{{</* filetree/file name="hugo.toml" */>}} {{</* filetree/file name="hugo.toml" */>}}
{{</* /filetree/container */>}} {{</* /filetree/container */>}}
``` ```

View File

@ -1,46 +0,0 @@
---
title: アイコン
---
このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります:
```yaml {filename="hugo.yaml"}
enableInlineShortcodes: true
```
利用可能なアイコンのリストは、[`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
<!--more-->
## 例
{{< icon "academic-cap" >}}
{{< icon "cake" >}}
{{< icon "gift" >}}
{{< icon "sparkles" >}}
## 使用方法
```
{{</* icon "github" */>}}
```
[Heroicons](https://v1.heroicons.com/) v1 のアウトラインアイコンがデフォルトで利用可能です。
### 独自のアイコンを追加する方法
`data/icons.yaml` ファイルを作成し、以下の形式で独自のSVGアイコンを追加します:
```yaml {filename="data/icons.yaml"}
your-icon: <svg>your icon svg content</svg>
```
その後、ショートコードで以下のように使用できます:
```
{{</* icon "your-icon" */>}}
{{</* card icon="your-icon" */>}}
```
ヒント: [Iconify Design](https://iconify.design/) は、サイト用のSVGアイコンを見つけるのに最適な場所です。

View File

@ -2,13 +2,13 @@
title: 图标 title: 图标
--- ---
在行内使用此短代码,需要在配置中启用内短代码: 要内使用此短代码,需要在配置中启用内短代码:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
enableInlineShortcodes: true enableInlineShortcodes: true
``` ```
可用图标列表可以在 [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) 中找到。 可用图标列表可以在以下位置找到 [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml).
<!--more--> <!--more-->
@ -25,17 +25,17 @@ enableInlineShortcodes: true
{{</* icon "github" */>}} {{</* icon "github" */>}}
``` ```
[Heroicons](https://v1.heroicons.com/) v1 轮廓图标默认可用。 [Heroicons](https://v1.heroicons.com/) v1 轮廓图标开箱即用
### 如何添加自定义图标 ### 如何添加自己的图标
创建 `data/icons.yaml` 文件,然后按以下格式添加自定义的 SVG 图标: 创建 `data/icons.yaml` 文件,然后按以下格式添加您自己的 SVG 图标:
```yaml {filename="data/icons.yaml"} ```yaml {filename="data/icons.yaml"}
your-icon: <svg>your icon svg content</svg> your-icon: <svg>your icon svg content</svg>
``` ```
然后可以在短代码中这样使用: 然后可以在短代码中使用它,如下所示
``` ```
{{</* icon "your-icon" */>}} {{</* icon "your-icon" */>}}
@ -43,4 +43,4 @@ your-icon: <svg>your icon svg content</svg>
{{</* card icon="your-icon" */>}} {{</* card icon="your-icon" */>}}
``` ```
提示:[Iconify Design](https://iconify.design/) 是寻找网站 SVG 图标的好地方 提示:[Iconify Design](https://iconify.design/) 是为您的网站查找 SVG 图标的好地方

View File

@ -1,79 +0,0 @@
---
title: "Jupyter Notebook コンポーネント"
linktitle: "Jupyter Notebook"
math: true
sidebar:
exclude: true
---
{{< callout >}}Jupyter Notebook をショートコード経由で含める実験的な機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
[Jupyter Notebook](https://jupyter.org/) は、[Project Jupyter](https://jupyter.org/) の言語に依存しない HTML ノートブックアプリケーションです。これを使用すると、ライブコード、数式、視覚化、および説明文を含むドキュメントを作成して共有できます。
<!--more-->
## 使用方法
### ローカルノートブックを使用する
Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。
{{< filetree/container >}}
{{< filetree/folder name="assets" >}}
{{< filetree/file name="notebook.ipynb" >}}
{{< /filetree/folder >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" >}}
{{< filetree/file name="my-page.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
`jupyter` ショートコードを使用してページに Jupyter Notebook を含めます:
```markdown {filename="content/docs/my-page.md"}
---
title: My Page
math: true
---
{{%/* jupyter "notebook.ipynb" */%}}
```
あるいは、Hugo の [ページバンドル][page-bundles] 機能を利用して、Jupyter Notebook を Markdown ファイルと一緒に整理することもできます。
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" >}}
{{< filetree/folder name="my-page" >}}
{{< filetree/file name="index.md" >}}
{{< filetree/file name="notebook.ipynb" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
```markdown {filename="content/docs/my-page/index.md"}
---
title: My Page
math: true
---
{{%/* jupyter "notebook.ipynb" */%}}
```
### リモートノートブックを使用する
ノートブックファイルの URL を指定して、リモートノートブックを使用することもできます。たとえば、[What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) ノートブックをページに含めるには、次のショートコードを使用します:
```
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
```
## ノートブックの例
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれているノートブックファイルの例です。{{< /callout >}}
{{% jupyter "example.ipynb" %}}
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles

View File

@ -1,79 +0,0 @@
---
title: "Jupyter Notebook 组件"
linktitle: "Jupyter Notebook"
math: true
sidebar:
exclude: true
---
{{< callout >}}实验性功能:通过短代码嵌入 Jupyter Notebook。请注意并非所有单元格类型都受支持。{{< /callout >}}
[Jupyter Notebook](https://jupyter.org/) 是 [Project Jupyter](https://jupyter.org/) 的一个语言无关的 HTML 笔记本应用程序。它允许你创建和共享包含实时代码、方程、可视化和叙述性文本的文档。
<!--more-->
## 使用方法
### 使用本地笔记本
要使用 Jupyter Notebook 短代码,你需要在项目中有一个 Jupyter Notebook 文件。类似于如何[添加图片](../../organize-files#add-images)到项目中,你可以将 Jupyter Notebooks 添加到 `assets` 文件夹。
{{< filetree/container >}}
{{< filetree/folder name="assets" >}}
{{< filetree/file name="notebook.ipynb" >}}
{{< /filetree/folder >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" >}}
{{< filetree/file name="my-page.md" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
使用 `jupyter` 短代码将 Jupyter Notebook 包含在页面中:
```markdown {filename="content/docs/my-page.md"}
---
title: 我的页面
math: true
---
{{%/* jupyter "notebook.ipynb" */%}}
```
或者,你可以利用 Hugo 的[页面包][page-bundles]功能将 Jupyter Notebooks 与 Markdown 文件一起组织。
{{< filetree/container >}}
{{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" >}}
{{< filetree/folder name="my-page" >}}
{{< filetree/file name="index.md" >}}
{{< filetree/file name="notebook.ipynb" >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
```markdown {filename="content/docs/my-page/index.md"}
---
title: 我的页面
math: true
---
{{%/* jupyter "notebook.ipynb" */%}}
```
### 使用远程笔记本
你也可以通过提供笔记本文件的 URL 来使用远程笔记本。例如,要在页面中包含 [What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) 笔记本,你可以使用以下短代码:
```
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
```
## 示例笔记本
{{< callout type="info" >}}以下是包含在项目 assets 文件夹中的笔记本文件示例。{{< /callout >}}
{{% jupyter "example.ipynb" %}}
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles

View File

@ -1,77 +0,0 @@
---
title: その他のショートコード
linkTitle: その他
sidebar:
exclude: true
---
{{< callout emoji="" >}}
これらの一部はHugoの組み込みショートコードです。
これらのショートコードは安定性が低く、いつでも変更される可能性があります。
{{< /callout >}}
## バッジ
```
{{</* badge "バッジ" */>}}
```
結果:
{{< badge "バッジ" >}}
バリエーション:
```
{{</* badge content="info" type="info" */>}}
{{</* badge content="warning" type="warning" */>}}
{{</* badge content="error" type="error" */>}}
```
結果:
{{< badge content="info" type="info" >}} &nbsp;
{{< badge content="warning" type="warning" >}} &nbsp;
{{< badge content="error" type="error" >}}
リンクとアイコン付き:
```
{{</* badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
```
結果:
{{< badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" >}}
## YouTube
YouTube動画を埋め込みます。
```
{{</* youtube VIDEO_ID */>}}
```
結果:
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
詳細については、[HugoのYouTubeショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
## PDF
PDFショートコードを使用すると、コンテンツ内にPDFファイルを埋め込むことができます。
```
{{</* pdf "https://example.com/sample.pdf" */>}}
```
また、プロジェクトディレクトリ内にPDFファイルを配置し、相対パスを使用することもできます。
```
{{</* pdf "path/to/file.pdf" */>}}
```
例:
{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}

View File

@ -1,77 +0,0 @@
---
title: 其他短代码
linkTitle: 其他
sidebar:
exclude: true
---
{{< callout emoji="" >}}
其中一些是 Hugo 内置的短代码。
这些短代码被认为不太稳定,可能会随时更改。
{{< /callout >}}
## 徽章
```
{{</* badge "徽章" */>}}
```
结果:
{{< badge "徽章" >}}
变体:
```
{{</* badge content="信息" type="info" */>}}
{{</* badge content="警告" type="warning" */>}}
{{</* badge content="错误" type="error" */>}}
```
结果:
{{< badge content="信息" type="info" >}} &nbsp;
{{< badge content="警告" type="warning" >}} &nbsp;
{{< badge content="错误" type="error" >}}
带链接和图标:
```
{{</* badge content="发布" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
```
结果:
{{< badge content="发布" link="https://github.com/imfing/hextra/releases" icon="github" >}}
## YouTube
嵌入 YouTube 视频。
```
{{</* youtube 视频ID */>}}
```
结果:
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
更多信息,请参阅 [Hugo 的 YouTube 短代码](https://gohugo.io/content-management/shortcodes/#youtube)。
## PDF
使用 PDF 短代码,您可以在内容中嵌入 PDF 文件。
```
{{</* pdf "https://example.com/sample.pdf" */>}}
```
您也可以将 PDF 文件放在项目目录中并使用相对路径。
```
{{</* pdf "path/to/file.pdf" */>}}
```
示例:
{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}

View File

@ -1,46 +0,0 @@
---
title: ステップ
---
ステップのシリーズを表示するための組み込みコンポーネント。
## 例
{{% steps %}}
### ステップ 1
これは最初のステップです。
### ステップ 2
これは2番目のステップです。
### ステップ 3
これは3番目のステップです。
{{% /steps %}}
## 使い方
{{< callout emoji="" >}}
このショートコードは**Markdownコンテンツ専用**であることに注意してください。
HTMLコンテンツや他のショートコードをステップの内容として使用すると、期待通りにレンダリングされない場合があります。
{{< /callout >}}
`steps` ショートコード内にMarkdownのh3ヘッダーを配置します。
```
{{%/* steps */%}}
### ステップ 1
これは最初のステップです。
### ステップ 2
これは2番目のステップです。
{{%/* /steps */%}}
```

View File

@ -2,7 +2,7 @@
title: 步骤 title: 步骤
--- ---
一个内置组件,用于显示一系列步骤。 A built-in component to display a series of steps.
## 示例 ## 示例
@ -23,25 +23,20 @@ title: 步骤
{{% /steps %}} {{% /steps %}}
## 用 ## 使
{{< callout emoji="" >}} 将 Markdown h3 标题放入 `steps` 短代码中。
请注意,此短代码**仅适用于 Markdown 内容**。
如果将 HTML 内容或其他短代码作为步骤内容,可能无法按预期渲染。
{{< /callout >}}
`steps` 短代码中放置 Markdown 的 h3 标题。
``` ```
{{%/* steps */%}} {{%/* steps */%}}
### 第一步 ### Step 1
这是第一步。 This is the first step.
### 第二步 ### Step 2
这是第二步。 This is the second step.
{{%/* /steps */%}} {{%/* /steps */%}}
``` ```

View File

@ -1,93 +0,0 @@
---
title: タブ
next: /docs/guide/deploy-site
---
## 例
{{< tabs items="JSON,YAML,TOML" >}}
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
{{< /tabs >}}
## 使用方法
### デフォルト
```
{{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
{{</* /tabs */>}}
```
### 選択されたインデックスを指定
`defaultIndex` プロパティを使用して、選択されるタブを指定します。インデックスは 0 から始まります。
```
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
{{</* /tabs */>}}
```
`YAML` タブがデフォルトで選択されます。
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
{{< /tabs >}}
### Markdown を使用
コードブロックを含む Markdown 構文もサポートされています:
````
{{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}
```json
{ "hello": "world" }
```
{{</* /tab */>}}
... 他のタブも同様に追加
{{</* /tabs */>}}
````
{{< tabs items="JSON,YAML,TOML" >}}
{{< tab >}}
```json
{ "hello": "world" }
```
{{< /tab >}}
{{< tab >}}
```yaml
hello: world
```
{{< /tab >}}
{{< tab >}}
```toml
hello = "world"
```
{{< /tab >}}
{{< /tabs >}}

View File

@ -7,54 +7,54 @@ next: /docs/guide/deploy-site
{{< tabs items="JSON,YAML,TOML" >}} {{< tabs items="JSON,YAML,TOML" >}}
{{< tab >}}**JSON**: JavaScript 对象表示法JSON是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{< /tab >}} {{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
{{< tab >}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{< /tab >}} {{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
{{< tab >}}**TOML**: TOML 旨在成为一种最小化的配置文件格式,由于其明显的语义,易于阅读。{{< /tab >}} {{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
## 用 ## 使
### 默认 ### 默认情况下
``` ```
{{</* tabs items="JSON,YAML,TOML" */>}} {{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}**JSON**: JavaScript 对象表示法JSON是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{</* /tab */>}} {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{</* /tab */>}} {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML 旨在成为一种最小化的配置文件格式,由于其明显的语义,易于阅读。{{</* /tab */>}} {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```
### 指定选中索引 ### 指定索引
使用 `defaultIndex` 属性指定选中的标签页。索引从 0 开始。 使用 `defaultIndex` 属性指定选定的选项卡。索引从 0 开始。
``` ```
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}} {{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
{{</* tab */>}}**JSON**: JavaScript 对象表示法JSON是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{</* /tab */>}} {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{</* /tab */>}} {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML 旨在成为一种最小化的配置文件格式,由于其明显的语义,易于阅读。{{</* /tab */>}} {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```
默认情况下,`YAML` 标签页将被选中。 默认`YAML`
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}} {{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
{{< tab >}}**JSON**: JavaScript 对象表示法JSON是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{< /tab >}} {{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
{{< tab >}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{< /tab >}} {{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
{{< tab >}}**TOML**: TOML 旨在成为一种最小化的配置文件格式,由于其明显的语义,易于阅读。{{< /tab >}} {{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
### 使用 Markdown ### 使用 Markdown
Markdown 语法,包括代码块,也受支持 还支持包括代码块的 Markdown 语法:
```` ````
{{</* tabs items="JSON,YAML,TOML" */>}} {{</* tabs items="JSON,YAML,TOML" */>}}
@ -65,7 +65,7 @@ Markdown 语法,包括代码块,也受支持:
``` ```
{{</* /tab */>}} {{</* /tab */>}}
... 类似地添加其他标签页 ... add other tabs similarly
{{</* /tabs */>}} {{</* /tabs */>}}
```` ````
@ -90,4 +90,4 @@ Markdown 语法,包括代码块,也受支持:
``` ```
{{< /tab >}} {{< /tab >}}
{{< /tabs >}} {{< /tabs >}}

View File

@ -1,114 +0,0 @@
---
title: "シンタックスハイライト"
weight: 3
---
Hugoは、純粋なGoで書かれた汎用シンタックスハイライターである[Chroma](https://github.com/alecthomas/chroma)を使用してシンタックスハイライトを行います。
Markdownコンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば
<!--more-->
````markdown {filename="Markdown"}
```python
def say_hello():
print("Hello!")
```
````
は次のようにレンダリングされます:
```python
def say_hello():
print("Hello!")
```
## 機能
### ファイル名
コードブロックにファイル名やタイトルを追加するには、`filename`属性を設定します:
````markdown {filename="Markdown"}
```python {filename="hello.py"}
def say_hello():
print("Hello!")
```
````
```python {filename="hello.py"}
def say_hello():
print("Hello!")
```
### ファイルへのリンク
{{< new-feature version="v0.9.2" >}}
`base_url`属性を使用して、ファイル名と組み合わせてリンクを生成するベースURLを提供できます。
ファイル名には、ベースパス内のファイルの場所を指定する相対パスを含めることができます。
````markdown {filename="Markdown"}
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
go 1.20
```
````
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
go 1.20
```
### 行番号
行番号を設定するには、`linenos`属性を`table`に設定し、オプションで`linenostart`を開始行番号に設定します:
````markdown {filename="Markdown"}
```python {linenos=table,linenostart=42}
def say_hello():
print("Hello!")
```
````
```python {linenos=table,linenostart=42}
def say_hello():
print("Hello!")
```
### 行のハイライト
行をハイライトするには、`hl_lines`属性に行番号のリストを設定します:
````markdown {filename="Markdown"}
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
def say_hello():
print("Hello!")
def main():
say_hello()
```
````
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
def say_hello():
print("Hello!")
def main():
say_hello()
```
### コピーボタン
デフォルトでは、コードブロックにコピーボタンが有効になっています。その動作はサイト設定ファイルを変更することで変更できます:
```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
params:
highlight:
copy:
enable: true
# hover | always
display: hover
```
## サポートされている言語
サポートされている言語のリストについては、[Chromaのドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。

View File

@ -1,10 +1,10 @@
--- ---
title: "语法高亮" title: "代码高亮"
weight: 3 weight: 3
--- ---
Hugo 使用 [Chroma](https://github.com/alecthomas/chroma)这是一个用纯 Go 编写的通用语法高亮器,用于语法高亮 Hugo 使用 [Chroma](https://github.com/alecthomas/chroma)一种纯 Golang 实现的代码高亮渲染器
建议 Markdown 内容中使用反引号来标记代码块。例如: 建议 Markdown 内容中的代码块使用反引号例如:
<!--more--> <!--more-->
@ -15,18 +15,18 @@ def say_hello():
``` ```
```` ````
会渲染为: 呈现为:
```python ```python
def say_hello(): def say_hello():
print("Hello!") print("Hello!")
``` ```
## 功能 ## 特性
### 文件名 ### 文件名
代码块添加文件名或标题,请设置 `filename` 属性 代码块添加文件名或标题,请设置 `filename`
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {filename="hello.py"} ```python {filename="hello.py"}
@ -40,27 +40,9 @@ def say_hello():
print("Hello!") print("Hello!")
``` ```
### 文件链接
{{< new-feature version="v0.9.2" >}}
你可以使用 `base_url` 属性提供一个基础 URL它将与文件名结合生成一个链接。
如果文件名指定了文件在基础路径中的位置,则可以包含相对路径。
````markdown {filename="Markdown"}
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
go 1.20
```
````
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
go 1.20
```
### 行号 ### 行号
设置行号,将 `linenos` 属性设置为 `table`,并可选地设置 `linenostart` 为起始行号: 如需设置行号,将 `linenos` 设置为 `table`,并 `linenostart` 设置为起始行号:
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {linenos=table,linenostart=42} ```python {linenos=table,linenostart=42}
@ -76,7 +58,7 @@ def say_hello():
### 高亮行 ### 高亮行
要高亮特定行,请将 `hl_lines` 属性设置为行号列表 显示高亮行,设置 `hl_lines` 为行号:
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"} ```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
@ -96,19 +78,12 @@ def main():
say_hello() say_hello()
``` ```
### 复制按钮 ### 复制按钮
默认情况下,代码块启用了复制按钮。可以通过修改站点配置文件来更改其行为: 默认情况下,代码块复制按钮已自动启用
```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
params:
highlight:
copy:
enable: true
# hover | always
display: hover
```
## 支持的语言 ## 支持的编程语言
有关支持的语言列表,请参阅 [Chroma 文档](https://github.com/alecthomas/chroma#supported-languages)。 如需了解支持的编程语言,转至 [Chroma's documentation](https://github.com/alecthomas/chroma#supported-languages)。

View File

@ -12,13 +12,6 @@ Open source projects powered by Hextra
</p> </p>
{{< cards >}} {{< cards >}}
{{< card
link="https://github.com/regolith-linux/regolith-desktop.com"
title="Regolith Desktop"
image="https://github.com/user-attachments/assets/4bbedd7d-67ef-4363-91f1-acb4a0c5f8d0"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card {{< card
link="https://github.com/modelcontextprotocol/specification" link="https://github.com/modelcontextprotocol/specification"
title="Model Context Protocol Specification" title="Model Context Protocol Specification"

View File

@ -0,0 +1,49 @@
docs:
- title: Documentation
link: /docs/
- title: Getting Started
link: /docs/getting-started/
- title: Guide
link: /docs/guide/
open: false
items:
- title: Organize Files
link: /docs/guide/organize-files/
- title: Configuration
link: /docs/guide/configuration/
- title: Markdown
link: /docs/guide/markdown/
- title: Syntax Highlighting
link: /docs/guide/syntax-highlighting/
- title: LaTeX
link: /docs/guide/latex/
- title: Diagrams
link: /docs/guide/diagrams/
- title: Shortcodes
link: /docs/guide/shortcodes/
items:
- title: Callout
link: /docs/guide/shortcodes/callout/
- title: Cards
link: /docs/guide/shortcodes/cards/
- title: Details
link: /docs/guide/shortcodes/details/
- title: FileTree
link: /docs/guide/shortcodes/filetree/
- title: Icon
link: /docs/guide/shortcodes/icon/
- title: Steps
link: /docs/guide/shortcodes/steps/
- title: Tabs
link: /docs/guide/shortcodes/tabs/
- title: Deploy Site
link: /docs/guide/deploy-site/
- title: Advanced
link: /docs/advanced/
items:
- title: Multi-language
link: /docs/advanced/multi-language/
- title: Comments
link: /docs/advanced/comments/
- title: Customization
link: /docs/advanced/customization/

View File

@ -3,7 +3,6 @@ baseURL: "https://example.com/"
title: "Hextra" title: "Hextra"
enableRobotsTXT: true enableRobotsTXT: true
# Parse Git commit
enableGitInfo: true enableGitInfo: true
# enableEmoji: false # enableEmoji: false
hasCJKLanguage: true hasCJKLanguage: true
@ -23,44 +22,33 @@ languages:
languageName: English languageName: English
weight: 1 weight: 1
title: Hextra title: Hextra
zh-cn:
languageName: 简体中文
languageCode: zh-CN
weight: 2
title: Hextra
fa: fa:
languageName: فارسی languageName: فارسی
languageCode: fa languageCode: fa
languageDirection: rtl languageDirection: rtl
weight: 2
title: هگزترا
ja:
languageName: 日本語
languageCode: ja
weight: 3 weight: 3
title: Hextra title: هگزترا
zh-cn:
languageName: 简体中文
languageCode: zh-CN
weight: 4
title: Hextra
module: module:
hugoVersion: hugoVersion:
extended: true extended: true
min: "0.134.0" min: "0.112.0"
workspace: hugo.work workspace: hugo.work
imports: imports:
- path: github.com/imfing/hextra - path: github.com/imfing/hextra
markup: markup:
highlight:
noClasses: false
goldmark: goldmark:
renderer: renderer:
unsafe: true unsafe: true
extensions: highlight:
passthrough: noClasses: false
delimiters:
block: [['\[', '\]'], ['$$', '$$']]
inline: [['\(', '\)']]
enable: true
enableInlineShortcodes: true enableInlineShortcodes: true
@ -125,6 +113,10 @@ params:
# full (100%), wide (90rem), normal (1280px) # full (100%), wide (90rem), normal (1280px)
width: normal width: normal
# TODO: move one level up
sidebar:
source: data
theme: theme:
# light | dark | system # light | dark | system
default: system default: system
@ -136,7 +128,6 @@ params:
displayPoweredBy: true displayPoweredBy: true
width: normal width: normal
# Display the last modification date
displayUpdatedDate: true displayUpdatedDate: true
dateFormat: "January 2, 2006" dateFormat: "January 2, 2006"
@ -163,9 +154,6 @@ params:
# date | lastmod | publishDate | title | weight # date | lastmod | publishDate | title | weight
sortBy: date sortBy: date
sortOrder: desc # or "asc" sortOrder: desc # or "asc"
article:
displayPagination: true
highlight: highlight:
copy: copy:

View File

@ -69,46 +69,36 @@
"[hyphens:auto]", "[hyphens:auto]",
"[transition:background-color_1.5s_ease]", "[transition:background-color_1.5s_ease]",
"[word-break:break-word]", "[word-break:break-word]",
"active",
"active:hx-bg-gray-400/20", "active:hx-bg-gray-400/20",
"active:hx-opacity-50", "active:hx-opacity-50",
"active:hx-shadow-gray-200", "active:hx-shadow-gray-200",
"active:hx-shadow-sm", "active:hx-shadow-sm",
"before:hx-absolute", "before:hx-absolute",
"before:hx-bg-glass-gradient", "before:hx-bg-glass-gradient",
"before:hx-bg-gray-200",
"before:hx-content-[\"\"]",
"before:hx-content-['#']",
"before:hx-content-['']", "before:hx-content-['']",
"before:hx-inline-block", "before:hx-inline-block",
"before:hx-inset-0", "before:hx-inset-0",
"before:hx-inset-y-1",
"before:hx-mr-1", "before:hx-mr-1",
"before:hx-opacity-25",
"before:hx-pointer-events-none", "before:hx-pointer-events-none",
"before:hx-transition-transform", "before:hx-transition-transform",
"before:hx-w-px",
"chroma", "chroma",
"content", "content",
"contrast-more:dark:hover:hx-border-gray-50",
"contrast-more:dark:hx-border-current", "contrast-more:dark:hx-border-current",
"contrast-more:dark:hx-border-gray-50", "contrast-more:dark:hx-border-gray-50",
"contrast-more:dark:hx-border-neutral-400", "contrast-more:dark:hx-border-neutral-400",
"contrast-more:dark:hx-border-primary-500",
"contrast-more:dark:hx-shadow-[0_0_0_1px_#fff]", "contrast-more:dark:hx-shadow-[0_0_0_1px_#fff]",
"contrast-more:dark:hx-shadow-none", "contrast-more:dark:hx-shadow-none",
"contrast-more:dark:hx-text-current", "contrast-more:dark:hx-text-current",
"contrast-more:dark:hx-text-gray-100", "contrast-more:dark:hx-text-gray-100",
"contrast-more:dark:hx-text-gray-300", "contrast-more:dark:hx-text-gray-300",
"contrast-more:dark:hx-text-gray-50", "contrast-more:dark:hx-text-gray-50",
"contrast-more:hover:hx-border-gray-900",
"contrast-more:hx-border", "contrast-more:hx-border",
"contrast-more:hx-border-current", "contrast-more:hx-border-current",
"contrast-more:hx-border-gray-800", "contrast-more:hx-border-gray-800",
"contrast-more:hx-border-gray-900", "contrast-more:hx-border-gray-900",
"contrast-more:hx-border-neutral-400", "contrast-more:hx-border-neutral-400",
"contrast-more:hx-border-primary-500",
"contrast-more:hx-border-t", "contrast-more:hx-border-t",
"contrast-more:hx-border-transparent",
"contrast-more:hx-font-bold", "contrast-more:hx-font-bold",
"contrast-more:hx-shadow-[0_0_0_1px_#000]", "contrast-more:hx-shadow-[0_0_0_1px_#000]",
"contrast-more:hx-shadow-none", "contrast-more:hx-shadow-none",
@ -118,7 +108,6 @@
"contrast-more:hx-text-gray-900", "contrast-more:hx-text-gray-900",
"contrast-more:hx-underline", "contrast-more:hx-underline",
"copy-icon", "copy-icon",
"dark:before:hx-bg-neutral-800",
"dark:before:hx-invert", "dark:before:hx-invert",
"dark:contrast-more:hx-border-neutral-400", "dark:contrast-more:hx-border-neutral-400",
"dark:focus:hx-bg-dark", "dark:focus:hx-bg-dark",
@ -153,7 +142,6 @@
"dark:hx-bg-neutral-900", "dark:hx-bg-neutral-900",
"dark:hx-bg-orange-400/20", "dark:hx-bg-orange-400/20",
"dark:hx-bg-primary-300/10", "dark:hx-bg-primary-300/10",
"dark:hx-bg-primary-400/10",
"dark:hx-bg-primary-600", "dark:hx-bg-primary-600",
"dark:hx-bg-red-900/30", "dark:hx-bg-red-900/30",
"dark:hx-bg-yellow-700/30", "dark:hx-bg-yellow-700/30",
@ -187,9 +175,7 @@
"dark:hx-text-green-200", "dark:hx-text-green-200",
"dark:hx-text-indigo-200", "dark:hx-text-indigo-200",
"dark:hx-text-neutral-200", "dark:hx-text-neutral-200",
"dark:hx-text-neutral-400",
"dark:hx-text-orange-300", "dark:hx-text-orange-300",
"dark:hx-text-primary-600",
"dark:hx-text-red-200", "dark:hx-text-red-200",
"dark:hx-text-slate-100", "dark:hx-text-slate-100",
"dark:hx-text-yellow-200", "dark:hx-text-yellow-200",
@ -242,6 +228,10 @@
"hextra-pdf", "hextra-pdf",
"hextra-scrollbar", "hextra-scrollbar",
"hextra-sidebar-collapsible-button", "hextra-sidebar-collapsible-button",
"hextra-sidebar-container",
"hextra-sidebar-item",
"hextra-sidebar-item-link",
"hextra-sidebar-item-list",
"hextra-tabs-panel", "hextra-tabs-panel",
"hextra-tabs-toggle", "hextra-tabs-toggle",
"hextra-toc", "hextra-toc",
@ -283,7 +273,6 @@
"hx-bg-indigo-100", "hx-bg-indigo-100",
"hx-bg-neutral-50", "hx-bg-neutral-50",
"hx-bg-orange-50", "hx-bg-orange-50",
"hx-bg-primary-100",
"hx-bg-primary-400", "hx-bg-primary-400",
"hx-bg-primary-600", "hx-bg-primary-600",
"hx-bg-primary-700/5", "hx-bg-primary-700/5",
@ -333,7 +322,6 @@
"hx-gap-x-1.5", "hx-gap-x-1.5",
"hx-gap-y-2", "hx-gap-y-2",
"hx-grid", "hx-grid",
"hx-grid-cols-1",
"hx-group", "hx-group",
"hx-group/code", "hx-group/code",
"hx-group/copybtn", "hx-group/copybtn",
@ -356,7 +344,6 @@
"hx-inset-y-0", "hx-inset-y-0",
"hx-items-center", "hx-items-center",
"hx-items-start", "hx-items-start",
"hx-justify-between",
"hx-justify-center", "hx-justify-center",
"hx-justify-end", "hx-justify-end",
"hx-justify-items-start", "hx-justify-items-start",
@ -406,6 +393,7 @@
"hx-mt-6", "hx-mt-6",
"hx-mt-8", "hx-mt-8",
"hx-mx-1", "hx-mx-1",
"hx-mx-2",
"hx-mx-4", "hx-mx-4",
"hx-mx-auto", "hx-mx-auto",
"hx-my-1.5", "hx-my-1.5",
@ -504,7 +492,6 @@
"hx-text-left", "hx-text-left",
"hx-text-lg", "hx-text-lg",
"hx-text-orange-800", "hx-text-orange-800",
"hx-text-primary-800",
"hx-text-red-900", "hx-text-red-900",
"hx-text-slate-900", "hx-text-slate-900",
"hx-text-sm", "hx-text-sm",
@ -542,17 +529,15 @@
"hx-z-20", "hx-z-20",
"hx-z-[-1]", "hx-z-[-1]",
"icon", "icon",
"inactive",
"language-options", "language-options",
"language-switcher", "language-switcher",
"last-of-type:hx-mb-0", "last-of-type:hx-mb-0",
"lg:hx-grid-cols-3",
"lntable", "lntable",
"lntd", "lntd",
"ltr:before:hx-left-0",
"ltr:hx--mr-4", "ltr:hx--mr-4",
"ltr:hx-border-l", "ltr:hx-border-l",
"ltr:hx-ml-1", "ltr:hx-ml-1",
"ltr:hx-ml-3",
"ltr:hx-ml-auto", "ltr:hx-ml-auto",
"ltr:hx-mr-auto", "ltr:hx-mr-auto",
"ltr:hx-pl-12", "ltr:hx-pl-12",
@ -578,7 +563,6 @@
"max-sm:hx-grid-cols-1", "max-sm:hx-grid-cols-1",
"max-xl:hx-hidden", "max-xl:hx-hidden",
"md:hx-aspect-[1.1/1]", "md:hx-aspect-[1.1/1]",
"md:hx-grid-cols-2",
"md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]", "md:hx-h-[calc(100vh-var(--navbar-height)-var(--menu-height))]",
"md:hx-hidden", "md:hx-hidden",
"md:hx-inline-block", "md:hx-inline-block",
@ -605,7 +589,6 @@
"print:hx-bg-transparent", "print:hx-bg-transparent",
"print:hx-hidden", "print:hx-hidden",
"rtl:-hx-rotate-180", "rtl:-hx-rotate-180",
"rtl:before:hx-right-0",
"rtl:before:hx-rotate-180", "rtl:before:hx-rotate-180",
"rtl:hx--ml-4", "rtl:hx--ml-4",
"rtl:hx-border-r", "rtl:hx-border-r",
@ -613,7 +596,6 @@
"rtl:hx-left-3", "rtl:hx-left-3",
"rtl:hx-ml-auto", "rtl:hx-ml-auto",
"rtl:hx-mr-1", "rtl:hx-mr-1",
"rtl:hx-mr-3",
"rtl:hx-mr-auto", "rtl:hx-mr-auto",
"rtl:hx-pl-2", "rtl:hx-pl-2",
"rtl:hx-pl-4", "rtl:hx-pl-4",
@ -630,8 +612,6 @@
"search-input", "search-input",
"search-results", "search-results",
"search-wrapper", "search-wrapper",
"sidebar-active-item",
"sidebar-container",
"sm:hx-block", "sm:hx-block",
"sm:hx-flex", "sm:hx-flex",
"sm:hx-items-start", "sm:hx-items-start",
@ -642,8 +622,7 @@
"subheading-anchor", "subheading-anchor",
"success-icon", "success-icon",
"theme-toggle", "theme-toggle",
"xl:hx-block", "xl:hx-block"
"xl:hx-grid-cols-4"
], ],
"ids": null "ids": null
} }

View File

@ -1,6 +0,0 @@
documentation: "ドキュメント"
showcase: "展示"
blog: "ブログ"
about: "概要"
more: "もっと見る"
hugoDocs: "Hugo ドキュメント ↗"

View File

@ -2,7 +2,7 @@ backToTop: "Zpět nahoru"
changeLanguage: "Změnit jazyk" changeLanguage: "Změnit jazyk"
changeTheme: "Změnit vzhled" changeTheme: "Změnit vzhled"
copyCode: "Zkopírovat kód" copyCode: "Zkopírovat kód"
copyright: "© 2025 Hextra Project." copyright: "© 2024 Hextra Project."
dark: "Tmavý" dark: "Tmavý"
editThisPage: "Upravit tuto stránku na GitHubu →" editThisPage: "Upravit tuto stránku na GitHubu →"
lastUpdated: "Naposledy změněno" lastUpdated: "Naposledy změněno"

View File

@ -2,7 +2,7 @@ backToTop: "Nach oben"
changeLanguage: "Sprache ändern" changeLanguage: "Sprache ändern"
changeTheme: "Darstellung ändern" changeTheme: "Darstellung ändern"
copyCode: "Code kopieren" copyCode: "Code kopieren"
copyright: "© 2025 Hextra Project." copyright: "© 2024 Hextra Project."
dark: "Dunkel" dark: "Dunkel"
editThisPage: "Diese Seite auf GitHub bearbeiten →" editThisPage: "Diese Seite auf GitHub bearbeiten →"
lastUpdated: "Zuletzt aktualisiert am" lastUpdated: "Zuletzt aktualisiert am"

View File

@ -2,7 +2,7 @@ backToTop: "Scroll to top"
changeLanguage: "Change language" changeLanguage: "Change language"
changeTheme: "Change theme" changeTheme: "Change theme"
copyCode: "Copy code" copyCode: "Copy code"
copyright: "© 2025 Hextra Project." copyright: "© 2024 Hextra Project."
dark: "Dark" dark: "Dark"
editThisPage: "Edit this page on GitHub →" editThisPage: "Edit this page on GitHub →"
lastUpdated: "Last updated on" lastUpdated: "Last updated on"

View File

@ -1,7 +1,7 @@
backToTop: "Subir al inicio" backToTop: "Subir al inicio"
changeLanguage: "Cambiar idioma" changeLanguage: "Cambiar idioma"
changeTheme: "Cambiar tema" changeTheme: "Cambiar tema"
copyright: "© 2025 Proyecto Hextra." copyright: "© 2024 Proyecto Hextra."
dark: "Oscuro" dark: "Oscuro"
editThisPage: "Edita esta página en GitHub →" editThisPage: "Edita esta página en GitHub →"
lastUpdated: "Última actualización" lastUpdated: "Última actualización"

View File

@ -1,7 +1,7 @@
backToTop: "Revenir en haut" backToTop: "Revenir en haut"
changeLanguage: "Changer la langue" changeLanguage: "Changer la langue"
changeTheme: "Thème d'affichage" changeTheme: "Thème d'affichage"
copyright: "© 2025 Hextra Project." copyright: "© 2024 Hextra Project."
dark: "Sombre" dark: "Sombre"
editThisPage: "Modifier cette page sur GitHub →" editThisPage: "Modifier cette page sur GitHub →"
lastUpdated: "Dernière modification" lastUpdated: "Dernière modification"

View File

@ -2,7 +2,7 @@ backToTop: "גלול למעלה"
changeLanguage: "שנה שפה" changeLanguage: "שנה שפה"
changeTheme: "שנה ערכת צבעים" changeTheme: "שנה ערכת צבעים"
copyCode: "העתק קוד" copyCode: "העתק קוד"
copyright: "© 2025 פרוייקט Hextra" copyright: "© 2024 פרוייקט Hextra"
dark: "כהה" dark: "כהה"
editThisPage: "← ערוך עמוד זה בגיטהאב" editThisPage: "← ערוך עמוד זה בגיטהאב"
lastUpdated: "עודכן לאחרונה ב" lastUpdated: "עודכן לאחרונה ב"

View File

@ -1,7 +1,7 @@
backToTop: "トップにスクロール" backToTop: "トップにスクロール"
changeLanguage: "言語を変更" changeLanguage: "言語を変更"
changeTheme: "テーマを変更" changeTheme: "テーマを変更"
copyright: "© 2025 Hextra プロジェクト。" copyright: "© 2024 Hextra プロジェクト。"
dark: "ダーク" dark: "ダーク"
editThisPage: "このページをGitHubで編集 →" editThisPage: "このページをGitHubで編集 →"
lastUpdated: "最終更新日" lastUpdated: "最終更新日"

View File

@ -1,7 +1,7 @@
backToTop: "맨위로 스크롤" backToTop: "맨위로 스크롤"
changeLanguage: "언어변경" changeLanguage: "언어변경"
changeTheme: "테마변경" changeTheme: "테마변경"
copyright: "© 2025 Hextra Project." copyright: "© 2024 Hextra Project."
dark: "어두운 테마" dark: "어두운 테마"
editThisPage: "GitHub에서 편집하기 →" editThisPage: "GitHub에서 편집하기 →"
lastUpdated: "마지막 수정일자" lastUpdated: "마지막 수정일자"

View File

@ -1,7 +1,7 @@
backToTop: "Gå til toppen" backToTop: "Gå til toppen"
changeLanguage: "Endre språk" changeLanguage: "Endre språk"
changeTheme: "Endre tema" changeTheme: "Endre tema"
copyright: "© 2025 Hextra-prosjektet." copyright: "© 2024 Hextra-prosjektet."
dark: "Mørk" dark: "Mørk"
editThisPage: "Rediger denne siden på GitHub →" editThisPage: "Rediger denne siden på GitHub →"
lastUpdated: "Sist oppdatert" lastUpdated: "Sist oppdatert"

View File

@ -2,7 +2,7 @@ backToTop: "Terug naar boven"
changeLanguage: "Taal veranderen" changeLanguage: "Taal veranderen"
changeTheme: "Thema aanpassen" changeTheme: "Thema aanpassen"
copyCode: "Kopieer code" copyCode: "Kopieer code"
copyright: "© 2025 Hextra Project." copyright: "© 2024 Hextra Project."
dark: "Donker" dark: "Donker"
editThisPage: "Bewerk deze pagina op GitHub →" editThisPage: "Bewerk deze pagina op GitHub →"
lastUpdated: "Laatst bijgewerkt op" lastUpdated: "Laatst bijgewerkt op"

View File

@ -1,7 +1,7 @@
backToTop: "Gå til toppen" backToTop: "Gå til toppen"
changeLanguage: "Endre språk" changeLanguage: "Endre språk"
changeTheme: "Endre tema" changeTheme: "Endre tema"
copyright: "© 2025 Hextra-prosjektet." copyright: "© 2024 Hextra-prosjektet."
dark: "Mørk" dark: "Mørk"
editThisPage: "Rediger denne sida på GitHub →" editThisPage: "Rediger denne sida på GitHub →"
lastUpdated: "Sist oppdatert" lastUpdated: "Sist oppdatert"

View File

@ -1,7 +1,7 @@
backToTop: "Voltar ao topo" backToTop: "Voltar ao topo"
changeLanguage: "Mudar a língua" changeLanguage: "Mudar a língua"
changeTheme: "Mudar tema" changeTheme: "Mudar tema"
copyright: "© 2025 Projecto Hextra." copyright: "© 2024 Projecto Hextra."
dark: "Escuro" dark: "Escuro"
editThisPage: "Edita esta página no GitHub →" editThisPage: "Edita esta página no GitHub →"
lastUpdated: "Última modificação" lastUpdated: "Última modificação"

View File

@ -2,7 +2,7 @@ backToTop: "Înapoi sus"
changeLanguage: "Schimbă limba" changeLanguage: "Schimbă limba"
changeTheme: "Schimbă tema" changeTheme: "Schimbă tema"
copyCode: "Copiază codul" copyCode: "Copiază codul"
copyright: "© 2025 Hextra Project." copyright: "© 2024 Hextra Project."
dark: "Întuneric" dark: "Întuneric"
editThisPage: "Editați această pagină pe GitHub ←" editThisPage: "Editați această pagină pe GitHub ←"
lastUpdated: "Ultima actualizare la" lastUpdated: "Ultima actualizare la"
@ -11,4 +11,4 @@ noResultsFound: "Nici un rezultat găsit."
onThisPage: "Pe această pagină" onThisPage: "Pe această pagină"
poweredBy: "Susținut de Hextra" poweredBy: "Susținut de Hextra"
readMore: "Citește mai mult ←" readMore: "Citește mai mult ←"
searchPlaceholder: "Caută..." searchPlaceholder: "Caută..."

View File

@ -2,7 +2,7 @@ backToTop: 'Прокрутить к началу'
changeLanguage: 'Изменить язык' changeLanguage: 'Изменить язык'
changeTheme: 'Изменить тему' changeTheme: 'Изменить тему'
copyCode: 'Скопировать код' copyCode: 'Скопировать код'
copyright: '2025 Проект Hextra.' copyright: '2024 Проект Hextra.'
dark: 'Темная' dark: 'Темная'
editThisPage: 'Отредактировать страницу на GitHub →' editThisPage: 'Отредактировать страницу на GitHub →'
lastUpdated: 'Последнее обновление' lastUpdated: 'Последнее обновление'

View File

@ -1,11 +1,11 @@
backToTop: "Tembeza hadi juu" backToTop: "Tembeza hadi juu"
changeLanguage: "Badilisha lugha" changeLanguage: "Badilisha lugha"
changeTheme: "Badilisha mandhari" changeTheme: "Badilisha mandhari"
copyright: "© 2025 Hextra Project." copyright: "© 2024 Hextra Project."
dark: "Meusi" dark: "Meusi"
editThisPage: "Hariri ukurasa huu kwenye GitHub →" editThisPage: "Hariri ukurasa huu kwenye GitHub →"
lastUpdated: "Ilisasishwa mwisho" lastUpdated: "Ilisasishwa mwisho"
light: "Meupe" light: "Nuru"
noResultsFound: "Hakuna matokeo yalipopatikana." noResultsFound: "Hakuna matokeo yalipopatikana."
onThisPage: "Kwenye ukurasa huu" onThisPage: "Kwenye ukurasa huu"
poweredBy: "Inaendeshwa na Hextra" poweredBy: "Inaendeshwa na Hextra"

View File

@ -2,7 +2,7 @@ backToTop: "Прокрутити до початку"
changeLanguage: "Змінити мову" changeLanguage: "Змінити мову"
changeTheme: "Змінити тему" changeTheme: "Змінити тему"
copyCode: "Скопіювати код" copyCode: "Скопіювати код"
copyright: "2025 Проєкт Hextra." copyright: "2024 Проєкт Hextra."
dark: "Темна" dark: "Темна"
editThisPage: "Редагувати цю сторінку на GitHub →" editThisPage: "Редагувати цю сторінку на GitHub →"
lastUpdated: "Востаннє оновлено" lastUpdated: "Востаннє оновлено"

View File

@ -1,7 +1,7 @@
backToTop: "Lướt lên đầu trang" backToTop: "Lướt lên đầu trang"
changeLanguage: "Đổi ngôn ngữ" changeLanguage: "Đổi ngôn ngữ"
changeTheme: "Đổi chủ đề" changeTheme: "Đổi chủ đề"
copyright: "© 2025 Hextra Project." copyright: "© 2024 Hextra Project."
dark: "Tối" dark: "Tối"
editThisPage: "Sửa trang này trên GitHub →" editThisPage: "Sửa trang này trên GitHub →"
lastUpdated: "Lần cuối cập nhật lúc" lastUpdated: "Lần cuối cập nhật lúc"

View File

@ -1,7 +1,7 @@
backToTop: "返回顶部" backToTop: "返回顶部"
changeLanguage: "切换语言" changeLanguage: "切换语言"
changeTheme: "切换主题" changeTheme: "切换主题"
copyright: "© 2025 Hextra Project." copyright: "© 2024 Hextra Project."
dark: "深色" dark: "深色"
editThisPage: "在 GitHub 上编辑此页 →" editThisPage: "在 GitHub 上编辑此页 →"
lastUpdated: "最后更新于" lastUpdated: "最后更新于"

View File

@ -1,7 +1,7 @@
backToTop: "返回頂部" backToTop: "返回頂部"
changeLanguage: "切換語言" changeLanguage: "切換語言"
changeTheme: "切換主題" changeTheme: "切換主題"
copyright: "© 2025 Hextra Project." copyright: "© 2024 Hextra Project."
dark: "深色" dark: "深色"
editThisPage: "在 GitHub 上編輯此頁 →" editThisPage: "在 GitHub 上編輯此頁 →"
lastUpdated: "最後更新於" lastUpdated: "最後更新於"

View File

@ -1,39 +1,27 @@
<!DOCTYPE html> <div style='font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; height:100vh; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center'>
<html lang="en"> <div>
<style>
<body body {
style='font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; height:100vh; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center'> color: #000;
<div> background: #fff;
<style> margin: 0;
body { }
color: #000; .next-error-h1 {
background: #fff; border-right: 1px solid rgba(0, 0, 0, 0.3);
margin: 0; }
} @media (prefers-color-scheme: dark) {
body {
.next-error-h1 { color: #fff;
border-right: 1px solid rgba(0, 0, 0, 0.3); background: #000;
} }
.next-error-h1 {
@media (prefers-color-scheme: dark) { border-right: 1px solid rgba(255, 255, 255, 0.3);
body { }
color: #fff; }
background: #000; </style>
} <h1 class="next-error-h1" style='display: inline-block; margin: 0 20px 0 0; padding-right: 23px; font-size: 24px; font-weight: 500; vertical-align: top; line-height: 49px; font-feature-settings: "rlig" 1,"calt" 1,"ss01" 1,"ss06" 1 !important;'>404</h1>
<div style="display: inline-block; text-align: left">
.next-error-h1 { <h2 style="font-size: 14px; font-weight: 400; line-height: 49px; margin: 0">This page could not be found.</h2>
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
}
</style>
<h1 class="next-error-h1"
style='display: inline-block; margin: 0 20px 0 0; padding-right: 23px; font-size: 24px; font-weight: 500; vertical-align: top; line-height: 49px; font-feature-settings: "rlig" 1,"calt" 1,"ss01" 1,"ss06" 1 !important;'>
404</h1>
<div style="display: inline-block; text-align: left">
<h2 style="font-size: 14px; font-weight: 400; line-height: 49px; margin: 0">This page could not be found.
</h2>
</div>
</div> </div>
</body> </div>
</div>
</html>

View File

@ -1,6 +1,8 @@
{{ define "main" }} {{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'> <div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" .) }} {{- if not (in (slice "taxonomy" "term") .Kind) -}}
{{- partial "sidebar.html" (dict "context" .) -}}
{{- end -}}
{{ partial "toc.html" . }} {{ partial "toc.html" . }}
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]"> <article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12"> <main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">

View File

@ -1,30 +0,0 @@
{{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" (dict "Params" (dict "toc" false)) }}
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
<br class="hx-mt-1.5 hx-text-sm" />
{{ if .Title }}<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>{{ end }}
<div class="hx-mb-16"></div>
<div class="content">
{{ .Content }}
</div>
<div class="hx-grid hx-grid-cols-1 md:hx-grid-cols-2 lg:hx-grid-cols-3 xl:hx-grid-cols-4 hx-gap-4">
{{ range .Data.Terms }}
<div class="hx-w-full">
<a
href="{{ .Page.RelPermalink }}"
title="{{ .Page.LinkTitle }}"
class="hx-font-medium hover:hx-text-primary-600"
>
{{- .Page.LinkTitle -}}
<span class="hx-text-sm hx-text-gray-500">&nbsp;{{ .Count }}</span>
</a>
</div>
{{ end }}
</div>
</main>
</article>
</div>
{{ end }}

View File

@ -1,33 +0,0 @@
{{ define "main" }}
<div class='hx-mx-auto hx-flex {{ partial "utils/page-width" . }}'>
{{ partial "sidebar.html" (dict "context" . "disableSidebar" true "displayPlaceholder" true) }}
{{ partial "toc.html" (dict "Params" (dict "toc" false)) }}
<article class="hx-w-full hx-break-words hx-flex hx-min-h-[calc(100vh-var(--navbar-height))] hx-min-w-0 hx-justify-center hx-pb-8 hx-pr-[calc(env(safe-area-inset-right)-1.5rem)]">
<main class="hx-w-full hx-min-w-0 hx-max-w-6xl hx-px-6 hx-pt-4 md:hx-px-12">
<br class="hx-mt-1.5 hx-text-sm" />
{{ if .Title }}<h1 class="hx-text-center hx-mt-2 hx-text-4xl hx-font-bold hx-tracking-tight hx-text-slate-900 dark:hx-text-slate-100">{{ .Title }}</h1>{{ end }}
<div class="hx-mb-16"></div>
<div class="content">
{{ .Content }}
</div>
<div>
{{- range .Pages -}}
<div>
<h3>
<a
style="color: inherit; text-decoration: none;"
class="hx-block hx-font-semibold hx-mt-8 hx-text-2xl"
href="{{ .RelPermalink }}"
title="{{ .LinkTitle }}"
>
{{ .Title }}
</a>
</h3>
<p class="hx-opacity-50 hx-text-sm hx-leading-7">{{ partial "utils/format-date" .Date }}</p>
</div>
{{- end -}}
</div>
</main>
</article>
</div>
{{ end }}

View File

@ -38,13 +38,11 @@
<div class="content"> <div class="content">
{{ .Content }} {{ .Content }}
</div> </div>
{{- partial "components/last-updated.html" . -}} {{ partial "components/last-updated.html" . }}
{{- if (site.Params.blog.article.displayPagination | default true) -}} {{ .Scratch.Set "reversePagination" true }}
{{- .Scratch.Set "reversePagination" true -}} {{ partial "components/pager.html" . }}
{{- partial "components/pager.html" . -}} {{ partial "components/comments.html" . }}
{{ end }}
{{- partial "components/comments.html" . -}}
</main> </main>
</article> </article>
</div> </div>
{{ end }} {{ end }}

View File

@ -0,0 +1,12 @@
{{- range site.Menus.sidebar }}
{{- $name := or (T .Identifier) .Name }}
{{- if eq .Params.type "separator" }}
<li class="[word-break:break-word] hx-mt-5 hx-mb-2 hx-px-2 hx-py-1.5 hx-text-sm hx-font-semibold hx-text-gray-900 first:hx-mt-0 dark:hx-text-gray-100">
<span class="hx-cursor-default">{{ $name }}</span>
</li>
{{- else }}
<li>
{{- partial "components/sidebar/item-link" (dict "active" false "title" $name "link" (.URL | relLangURL)) -}}
</li>
{{- end }}
{{- end -}}

View File

@ -0,0 +1,5 @@
<span class="hextra-sidebar-collapsible-button">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="hx-h-[18px] hx-min-w-[18px] hx-rounded-sm hx-p-0.5 hover:hx-bg-gray-800/5 dark:hover:hx-bg-gray-100/5">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="hx-origin-center hx-transition-transform rtl:-hx-rotate-180"></path>
</svg>
</span>

View File

@ -0,0 +1,35 @@
{{/* Generate mobile navigation data based on main menu */}}
{{- $context := . -}}
{{- $data := slice -}}
{{- range .Site.Menus.main -}}
{{- if not (eq .Params.type "search") -}}
{{- $title := or (T .Identifier) .Name -}}
{{- $link := .URL -}}
{{- $external := strings.HasPrefix $link "http" -}}
{{- with .PageRef -}}
{{- if hasPrefix . "/" -}}
{{- $link = relLangURL (strings.TrimPrefix "/" .) -}}
{{- end -}}
{{- end -}}
{{- with .Page -}}
{{- $page := . -}}
{{- if and $page.IsSection (eq $page.Type "docs") -}}
{{- $page = (partial "utils/translated-page" (dict "page" $page "lang" site.Language.LanguageCode)) -}}
{{- $sectionData := (partial "components/sidebar/generate-section-data" $page) | unmarshal -}}
{{- $data = $data | append (dict "title" $title "link" $link "items" $sectionData) -}}
{{- else -}}
{{- $data = $data | append (dict "title" $title "link" $link) -}}
{{- end -}}
{{- else -}}
{{/* TODO: handle other cases like external links */}}
{{- $data = $data | append (dict "title" $title "link" $link) -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{- return ($data | jsonify (dict "noHTMLEscape" true)) -}}

View File

@ -0,0 +1,51 @@
{{- $context := . -}}
{{- $pages := union .RegularPages .Sections -}}
{{- $pages = where $pages "Params.sidebar.exclude" "!=" true -}}
{{- $data := slice -}}
{{- range $pages.ByWeight -}}
{{ $structure := (partial "sidebar/section-walk" .) | unmarshal -}}
{{ $data = $data | append $structure -}}
{{ end -}}
{{- define "partials/sidebar/section-walk" -}}
{{- with . -}}
{
"title": "{{ partial "utils/title" . }}",
"link": "{{ .RelPermalink }}",
"toc": {{ partial "sidebar/section-page-toc" . }},
"open": {{ .Params.sidebar.open | default false }}
{{- if .IsSection }},
"items": [
{{ $pages := union .RegularPages .Sections -}}
{{ $pages = where $pages "Params.sidebar.exclude" "!=" true -}}
{{ range $index, $page := $pages.ByWeight -}}
{{ partial "sidebar/section-walk" . }}{{ if not (ge $index (sub (len $pages) 1)) }},{{ end -}}
{{ end -}}
]
{{ end -}}
}
{{- end }}
{{- end -}}
{{- define "partials/sidebar/section-page-toc" -}}
{{/* Get level 2 headings list used mainly for mobile navigation */}}
[
{{- with .Fragments.Headings -}}
{{/* Loop over level 1 headings */}}
{{- range . }}
{{- with .Headings }}
{{ $headings := . }}
{{- range $index, $heading := $headings }}
{{ $heading.Title | jsonify (dict "noHTMLEscape" true) }}
{{- if not (ge $index (sub (len $headings) 1)) }},{{ end -}}
{{ end -}}
{{- end -}}
{{ end -}}
{{- end -}}
]
{{- end -}}
{{ return ($data | jsonify (dict "noHTMLEscape" true)) }}

View File

@ -0,0 +1,20 @@
{{/* Get section sidebar config from Hugo `data` directory
If the site is multilingual, the sidebar data is stored in a language-specific
directory. For example, the English sidebar data is stored in `data/en/sidebar.yaml`.
*/}}
{{ $data := "" }}
{{ $section := .Section | default "index" }}
{{ $filename := "sidebar" }}
{{ if hugo.IsMultilingual }}
{{ with (index site.Data site.Language.Lang $filename $section) }}
{{ $data = . }}
{{ end }}
{{ else }}
{{ with (index site.Data $filename $section) }}
{{ $data = . }}
{{ end }}
{{ end }}
{{ return $data }}

View File

@ -0,0 +1,18 @@
{{- $external := strings.HasPrefix .link "http" -}}
{{- $activeClass := cond (.active) "active" "inactive" -}}
<a
class="hextra-sidebar-item-link {{ $activeClass }} [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [word-break:break-word]"
href="{{ .link }}"
{{ if $external }}target="_blank" rel="noreferer"{{ end }}
>
{{- .title -}}
{{- with .context }}
{{- if or .RegularPages .Sections }}
{{- partialCached "components/sidebar/collapsible-button" . }}
{{- end }}
{{ end -}}
{{- with .items }}{{- partialCached "components/sidebar/collapsible-button" site.Home }}{{ end -}}
</a>

View File

@ -0,0 +1,16 @@
{{- $page := .page -}}
{{- $pageLink := $page.RelPermalink -}}
{{- $cached := .cached | default false }}
{{- range .data -}}
{{- $active := and (not $cached) (or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link)) -}}
{{- $containsPage := hasPrefix $pageLink .link -}}
{{- $shouldOpen := or (.open) $containsPage $active | default false -}}
<li class="hextra-sidebar-item {{ if $shouldOpen }}open{{ end }}">
{{- partial "components/sidebar/item-link" (dict "active" $active "title" .title "link" .link "items" .items) -}}
{{- if .items -}}
{{- partial "components/sidebar/render-items" (dict "items" .items "link" $pageLink "cached" $cached) -}}
{{- end -}}
</li>
{{ end }}

View File

@ -0,0 +1,21 @@
{{- $items := .items -}}
{{- $pageLink := .link -}}
{{- $cached := .cached | default false }}
<div class="ltr:hx-pr-0 hx-overflow-hidden">
<ul class="hextra-sidebar-item-list">
{{- range $items }}
{{- $active := and (not $cached) (or (eq $pageLink .link) (eq (strings.TrimSuffix "/" $pageLink) .link)) -}}
{{- $containsPage := hasPrefix $pageLink .link -}}
{{- $shouldOpen := or (.open) $containsPage $active | default false -}}
<li class="hextra-sidebar-item hx-flex hx-flex-col {{ if $shouldOpen }}open{{ end }}">
{{- partial "components/sidebar/item-link" (dict "active" $active "title" .title "link" .link "items" .items) -}}
{{- if .items -}}
{{- partial "components/sidebar/render-items" (dict "items" .items "link" $pageLink "cached" $cached) -}}
{{- end -}}
</li>
{{- end -}}
</ul>
</div>

View File

@ -19,11 +19,11 @@
<nav class="hx-mx-auto hx-flex hx-items-center hx-justify-end hx-gap-2 hx-h-16 hx-px-6 {{ $navWidth }}"> <nav class="hx-mx-auto hx-flex hx-items-center hx-justify-end hx-gap-2 hx-h-16 hx-px-6 {{ $navWidth }}">
<a class="hx-flex hx-items-center hover:hx-opacity-75 ltr:hx-mr-auto rtl:hx-ml-auto" href="{{ $logoLink }}"> <a class="hx-flex hx-items-center hover:hx-opacity-75 ltr:hx-mr-auto rtl:hx-ml-auto" href="{{ $logoLink }}">
{{- if (.Site.Params.navbar.displayLogo | default true) }} {{- if (.Site.Params.navbar.displayLogo | default true) }}
<img class="hx-mr-2 hx-block dark:hx-hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" /> <img class="hx-block dark:hx-hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
<img class="hx-mr-2 hx-hidden dark:hx-block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" /> <img class="hx-hidden dark:hx-block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
{{- end }} {{- end }}
{{- if (.Site.Params.navbar.displayTitle | default true) }} {{- if (.Site.Params.navbar.displayTitle | default true) }}
<span class="hx-mr-2 hx-font-extrabold hx-inline hx-select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span> <span class="hx-mx-2 hx-font-extrabold hx-inline hx-select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
{{- end }} {{- end }}
</a> </a>

View File

@ -1,16 +1,104 @@
{{/* Core scripts (theme, menu, tabs, etc.) */}} {{- $jsTheme := resources.Get "js/theme.js" | resources.ExecuteAsTemplate "theme.js" . -}}
{{- partial "scripts/core.html" . -}} {{- $jsMenu := resources.Get "js/menu.js" -}}
{{- $jsTabs := resources.Get "js/tabs.js" -}}
{{- $jsLang := resources.Get "js/lang.js" -}}
{{- $jsCodeCopy := resources.Get "js/code-copy.js" -}}
{{- $jsFileTree := resources.Get "js/filetree.js" -}}
{{- $jsSidebar := resources.Get "js/sidebar.js" | resources.ExecuteAsTemplate "sidebar.js" . -}}
{{- $jsBackToTop := resources.Get "js/back-to-top.js" -}}
{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}}
{{- if hugo.IsProduction -}}
{{- $scripts = $scripts | minify | fingerprint -}}
{{- end -}}
<script defer src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>
{{/* Search */}} {{/* Search */}}
{{- partial "scripts/search.html" . -}} {{- if (site.Params.search.enable | default true) -}}
{{- $searchType := site.Params.search.type | default "flexsearch" -}}
{{- if eq $searchType "flexsearch" -}}
{{- $jsSearchScript := printf "%s.search.js" .Language.Lang -}}
{{- $jsSearch := resources.Get "js/flexsearch.js" | resources.ExecuteAsTemplate $jsSearchScript . -}}
{{- if hugo.IsProduction -}}
{{- $jsSearch = $jsSearch | minify | fingerprint -}}
{{- end -}}
{{- $flexSearchJS := resources.Get "lib/flexsearch/flexsearch.bundle.min.js" | fingerprint -}}
<script defer src="{{ $flexSearchJS.RelPermalink }}" integrity="{{ $flexSearchJS.Data.Integrity }}"></script>
<script defer src="{{ $jsSearch.RelPermalink }}" integrity="{{ $jsSearch.Data.Integrity }}"></script>
{{- else -}}
{{- warnf `search type "%s" is not supported` $searchType -}}
{{- end -}}
{{- end -}}
{{/* Mermaid */}} {{/* Mermaid */}}
{{/* FIXME: need to investigate .Page.Store hasMermaid is set for homepage */}} {{/* FIXME: need to investigate .Page.Store hasMermaid is set for homepage */}}
{{- if and (.Page.Store.Get "hasMermaid") (not .Page.IsHome) -}} {{- if and (.Page.Store.Get "hasMermaid") (not .Page.IsHome) -}}
{{- partial "scripts/mermaid.html" . -}} {{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
<script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
// Store original mermaid code for each diagram
document.querySelectorAll(".mermaid").forEach(el => {
el.dataset.original = el.innerHTML;
});
const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
mermaid.initialize({ startOnLoad: true, theme: theme });
let timeout;
new MutationObserver(() => {
clearTimeout(timeout);
timeout = setTimeout(() => {
const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
document.querySelectorAll(".mermaid").forEach(el => {
// Reset to original content, preserving HTML
el.innerHTML = el.dataset.original;
el.removeAttribute("data-processed");
});
mermaid.initialize({ startOnLoad: true, theme: theme });
mermaid.init();
}, 150);
}).observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
});
</script>
{{- end -}} {{- end -}}
{{/* KaTex */}} {{/* KaTex */}}
{{- if .Page.Params.math -}} {{- if .Page.Params.math -}}
{{- partial "scripts/katex.html" . -}} {{- $katexCSS := resources.Get "lib/katex/katex.min.css" | fingerprint -}}
{{- end -}} {{- $katexJS := resources.Get "lib/katex/katex.min.js" | fingerprint -}}
{{- $mhchemJS := resources.Get "lib/katex/mhchem.min.js" | fingerprint -}}
{{- $katexAutoRenderJS := resources.Get "lib/katex/auto-render.min.js" | fingerprint -}}
<link type="text/css" rel="stylesheet" href="{{ $katexCSS.RelPermalink }}" integrity="{{ $katexCSS.Data.Integrity }}" />
<script defer src="{{ $katexJS.RelPermalink }}" integrity="{{ $katexJS.Data.Integrity }}"></script>
<script defer src="{{ $katexAutoRenderJS.RelPermalink }}" integrity="{{ $katexAutoRenderJS.Data.Integrity }}"></script>
<script defer src="{{ $mhchemJS.RelPermalink }}" integrity="{{ $mhchemJS.Data.Integrity }}"></script>
{{ $katexFonts := resources.Match "lib/katex/fonts/*" }}
{{- range $katexFonts -}}
{{ .Publish }}
{{- end -}}
<script>
// TODO: make render options configurable
// Reference: https://katex.org/docs/autorender#api
document.addEventListener("DOMContentLoaded", function () {
renderMathInElement(document.body, {
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "$", right: "$", display: false },
{ left: "\\(", right: "\\)", display: false },
{ left: "\\begin{equation}", right: "\\end{equation}", display: true },
{left: "\\begin{align}", right: "\\end{align}", display: true},
{left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
{left: "\\begin{gather}", right: "\\end{gather}", display: true},
{left: "\\begin{CD}", right: "\\end{CD}", display: true},
{ left: "\\[", right: "\\]", display: true },
],
throwOnError: false,
});
});
</script>
{{ end }}

View File

@ -1,14 +0,0 @@
{{- $jsTheme := resources.Get "js/theme.js" | resources.ExecuteAsTemplate "theme.js" . -}}
{{- $jsMenu := resources.Get "js/menu.js" -}}
{{- $jsTabs := resources.Get "js/tabs.js" -}}
{{- $jsLang := resources.Get "js/lang.js" -}}
{{- $jsCodeCopy := resources.Get "js/code-copy.js" -}}
{{- $jsFileTree := resources.Get "js/filetree.js" -}}
{{- $jsSidebar := resources.Get "js/sidebar.js" -}}
{{- $jsBackToTop := resources.Get "js/back-to-top.js" -}}
{{- $scripts := slice $jsTheme $jsMenu $jsCodeCopy $jsTabs $jsLang $jsFileTree $jsSidebar $jsBackToTop | resources.Concat "js/main.js" -}}
{{- if hugo.IsProduction -}}
{{- $scripts = $scripts | minify | fingerprint -}}
{{- end -}}
<script defer src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}"></script>

Some files were not shown because too many files have changed in this diff Show More