mirror of https://github.com/jpanther/congo.git
James Panther
commit
edbb9c0b74
|
|
@ -5,43 +5,57 @@ body:
|
|||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Thanks for taking the time to fill out this bug report! Before proceeding, please check that a similar issue has not already been reported. [View open issues](https://github.com/jpanther/congo/issues)
|
||||
Thanks for taking the time to fill out this bug report!
|
||||
|
||||
Before proceeding, please ensure the issue you're reporting is:
|
||||
- not caused by local customisations in your project
|
||||
- reproducible using the latest stable release of the theme
|
||||
- not already covered by an open issue ([check open issues](https://github.com/jpanther/congo/issues))
|
||||
- not a general question or feature request (use [GitHub Discussions](https://github.com/jpanther/congo/discussions) instead)
|
||||
|
||||
- type: textarea
|
||||
id: what-happened
|
||||
id: issue-description
|
||||
attributes:
|
||||
label: What happened?
|
||||
description: Describe the issue and how to reproduce it, including what you expected to happen.
|
||||
label: Issue description
|
||||
description: Describe the issue and how to reproduce it, including what you expected to happen. Be as detailed as possible, particularly if the issue only appears under a specific configuration.
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
id: theme-version
|
||||
attributes:
|
||||
label: Theme version
|
||||
description: What version of the theme are you using?
|
||||
placeholder: eg. v1.1.0
|
||||
description: What version of the theme are you using? If you have not tested this issue with the latest theme release, please do so before submitting a bug report.
|
||||
placeholder: eg. v2.6.0
|
||||
validations:
|
||||
required: true
|
||||
- type: input
|
||||
id: hugo-version
|
||||
attributes:
|
||||
label: Hugo version
|
||||
description: What version of Hugo are you using?
|
||||
placeholder: eg. v0.86.1
|
||||
description: What version of Hugo are you using? Please provide the output of the `hugo version` command.
|
||||
placeholder: eg. hugo v0.114.0+extended darwin/arm64
|
||||
validations:
|
||||
required: true
|
||||
- type: dropdown
|
||||
id: browsers
|
||||
attributes:
|
||||
label: What browsers are you seeing the problem on?
|
||||
label: Which browser rendering engines are you seeing the problem on?
|
||||
description: Select any that you have tested. This is particularly important for CSS issue reports.
|
||||
multiple: true
|
||||
options:
|
||||
- Firefox
|
||||
- Chrome
|
||||
- Safari
|
||||
- Microsoft Edge
|
||||
- Chromium (Google Chrome, Microsoft Edge, Brave, Vivaldi, Opera, etc.)
|
||||
- Firefox (Mozilla Firefox)
|
||||
- WebKit (Safari)
|
||||
- Other (Please include details in the issue description)
|
||||
- type: input
|
||||
id: sample-url
|
||||
attributes:
|
||||
label: URL to sample repository or website
|
||||
description: If you have a repository or deployed Hugo website that demonstrates this issue, please provide the URL.
|
||||
placeholder: https://github.com/jpanther/congo
|
||||
- type: textarea
|
||||
id: logs
|
||||
attributes:
|
||||
label: Relevant Hugo log output
|
||||
description: Please copy and paste any relevant Hugo log output. This will be automatically formatted into code, so no need for backticks.
|
||||
render: shell
|
||||
label: Hugo output or build error messages
|
||||
description: Please copy and paste any relevant log output from Hugo or your build system. This will be automatically formatted into code, so no need for backticks.
|
||||
render: bash
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ jobs:
|
|||
if: ${{ github.actor == 'dependabot[bot]' }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
ref: "${{ github.head_ref }}"
|
||||
- name: Install dependencies and Build Theme
|
||||
|
|
@ -16,28 +16,28 @@ jobs:
|
|||
- run: npm install
|
||||
- run: npm run assets
|
||||
- name: Commit and push Chart.js changes
|
||||
uses: stefanzweifel/git-auto-commit-action@v4
|
||||
uses: stefanzweifel/git-auto-commit-action@v5
|
||||
with:
|
||||
branch: "${{ github.head_ref }}"
|
||||
push_options: "--dry-run"
|
||||
file_pattern: "assets/lib/chart/*"
|
||||
commit_message: "📦 Update packaged ChartJS"
|
||||
- name: Commit Fuse changes
|
||||
uses: stefanzweifel/git-auto-commit-action@v4
|
||||
uses: stefanzweifel/git-auto-commit-action@v5
|
||||
with:
|
||||
branch: "${{ github.head_ref }}"
|
||||
push_options: "--dry-run"
|
||||
file_pattern: "assets/lib/fuse/*"
|
||||
commit_message: "📦 Update packaged FuseJS"
|
||||
- name: Commit KaTeX changes
|
||||
uses: stefanzweifel/git-auto-commit-action@v4
|
||||
uses: stefanzweifel/git-auto-commit-action@v5
|
||||
with:
|
||||
branch: "${{ github.head_ref }}"
|
||||
push_options: "--dry-run"
|
||||
file_pattern: "assets/lib/katex/*"
|
||||
commit_message: "📦 Update packaged KaTeX"
|
||||
- name: Commit Mermaid changes
|
||||
uses: stefanzweifel/git-auto-commit-action@v4
|
||||
uses: stefanzweifel/git-auto-commit-action@v5
|
||||
with:
|
||||
branch: "${{ github.head_ref }}"
|
||||
push_options: "--dry-run"
|
||||
|
|
@ -45,7 +45,7 @@ jobs:
|
|||
commit_message: "📦 Update packaged Mermaid"
|
||||
- run: npm run build
|
||||
- name: Commit CSS changes
|
||||
uses: stefanzweifel/git-auto-commit-action@v4
|
||||
uses: stefanzweifel/git-auto-commit-action@v5
|
||||
with:
|
||||
branch: "${{ github.head_ref }}"
|
||||
push_options: "--dry-run"
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ jobs:
|
|||
group: ${{ github.workflow }}-${{ github.ref }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
submodules: true
|
||||
fetch-depth: 0
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ jobs:
|
|||
steps:
|
||||
- uses: actions/stale@v8
|
||||
with:
|
||||
days-before-stale: 30
|
||||
days-before-close: 14
|
||||
days-before-stale: 120
|
||||
days-before-close: 30
|
||||
stale-issue-label: "stale"
|
||||
exempt-issue-labels: "wip"
|
||||
stale-pr-label: "stale"
|
||||
|
|
@ -23,10 +23,10 @@ jobs:
|
|||
|
||||
If you are still experiencing this issue, please review the issue history and add a reply with any requested and/or additional information in order to keep the issue open.
|
||||
|
||||
This issue will automactically close in 14 days if no further activity occurs.
|
||||
This issue will automatically close in 30 days if no further activity occurs.
|
||||
stale-pr-message: >
|
||||
This pull request has been automatically marked as stale because it has not had any recent activity.
|
||||
|
||||
Please review the PR history and add a reply with any requested information. If no information has been requested, it may be that this contribution does not fit with the project objectives, or does not adhere to the [contributing guidelines](https://github.com/jpanther/congo/blob/dev/CONTRIBUTING.md). If this is in error, please add a reply with further details.
|
||||
|
||||
This PR will automactically close in 14 days if no further activity occurs.
|
||||
This PR will automatically close in 30 days if no further activity occurs.
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ jobs:
|
|||
group: ${{ github.workflow }}-${{ github.ref }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
submodules: true
|
||||
fetch-depth: 0
|
||||
|
|
|
|||
49
CHANGELOG.md
49
CHANGELOG.md
|
|
@ -6,6 +6,48 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|||
|
||||
## [Unreleased]
|
||||
|
||||
## [2.7.0] - 2023-10-23
|
||||
|
||||
### Added
|
||||
|
||||
- New portable locale picker that can be placed in any menu using the `locale` action ([#583](https://github.com/jpanther/congo/issues/583))
|
||||
- New icons for `chevron-down`, `chevron-up`, `globe` and `translate`
|
||||
- Plausible Analytics support ([#584](https://github.com/jpanther/congo/pull/584))
|
||||
- Spanish translation of example site samples ([#606](https://github.com/jpanther/congo/pull/606))
|
||||
- Japanese translation of docs and example site ([#618](https://github.com/jpanther/congo/pull/618))
|
||||
- German translation of example site ([#631](https://github.com/jpanther/congo/pull/631))
|
||||
- New icons - `coffee` and `x-twitter` ([#669](https://github.com/jpanther/congo/pull/669))
|
||||
|
||||
### Changed
|
||||
|
||||
- ⚠️ Renamed the `params.rtl` language parameter to `languageDirection` as this is now supported by Hugo ([#583](https://github.com/jpanther/congo/issues/583))
|
||||
- Robots.txt file now allows all by default without concern for whether the environment is set to production ([#620](https://github.com/jpanther/congo/pull/620))
|
||||
- Refactored the `head.html` partial to improve perceived performance on page load
|
||||
- Upgrade to Mermaid v10.5.1 ([#577](https://github.com/jpanther/congo/pull/577), [#582](https://github.com/jpanther/congo/pull/582), [#626](https://github.com/jpanther/congo/pull/626), [#638](https://github.com/jpanther/congo/pull/638), [#663](https://github.com/jpanther/congo/pull/663), [#674](https://github.com/jpanther/congo/pull/674))
|
||||
- Upgrade to KaTeX v0.16.9 ([#590](https://github.com/jpanther/congo/pull/590), [#664](https://github.com/jpanther/congo/pull/664))
|
||||
- Upgrade to Tailwind v3.3.3 ([#602](https://github.com/jpanther/congo/pull/602))
|
||||
- Upgrade to ChartJS v4.3.3 ([#616](https://github.com/jpanther/congo/pull/616), [#627](https://github.com/jpanther/congo/pull/627), [#635](https://github.com/jpanther/congo/pull/635))
|
||||
- Upgrade to Typography v0.5.10 ([#641](https://github.com/jpanther/congo/pull/641))
|
||||
|
||||
### Fixed
|
||||
|
||||
- Prominent images in content and site layout are lazy loaded ([#591](https://github.com/jpanther/congo/issues/591))
|
||||
- TypeError is output to console when viewing leaf pages ([#596](https://github.com/jpanther/congo/issues/596))
|
||||
- URL to Congo project in footer used deprecated git.io short link ([#605](https://github.com/jpanther/congo/issues/605))
|
||||
- Various typos in the docs and example site ([#608](https://github.com/jpanther/congo/pull/608), [#609](https://github.com/jpanther/congo/pull/609), [#613](https://github.com/jpanther/congo/pull/613))
|
||||
- Incorrect `render` value is used in the 'external' archetype ([#630](https://github.com/jpanther/congo/pull/630))
|
||||
- Images are missing `width` and `height` attributes ([#645](https://github.com/jpanther/congo/pull/645))
|
||||
- Extended head partial does not include page context ([#658](https://github.com/jpanther/congo/pull/658))
|
||||
- Taxonomy tags aren't padded when wrapping onto a new line ([#671](https://github.com/jpanther/congo/pull/671))
|
||||
- Minor CSS improvements, mainly relating to RTL styling
|
||||
- Minor typos
|
||||
|
||||
### Removed
|
||||
|
||||
- Locales no longer appear next to the site name/logo as they are now part of the menu system ([#583](https://github.com/jpanther/congo/issues/583))
|
||||
- Language parameters `isoCode` and `displayName` are no longer supported ([#583](https://github.com/jpanther/congo/issues/583))
|
||||
- Meta `content-language` tag as it was not conveying the intended data (which is already included via the HTML `lang` attribute)
|
||||
|
||||
## [2.6.1] - 2023-06-04
|
||||
|
||||
### Changed
|
||||
|
|
@ -267,7 +309,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|||
|
||||
### Added
|
||||
|
||||
- Breadcrumb display can now be can now be specificed in front matter for articles and list pages
|
||||
- Breadcrumb display can now be can now be specified in front matter for articles and list pages
|
||||
- Italian translation ([#209](https://github.com/jpanther/congo/pull/209))
|
||||
|
||||
### Changed
|
||||
|
|
@ -567,7 +609,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|||
- Dark mode toggle with new theme parameters for managing light/dark appearance
|
||||
- French translation ([#18](https://github.com/jpanther/congo/pull/18))
|
||||
- Author bio in article footer
|
||||
- Grouping by year can now be specificed in front matter on list pages
|
||||
- Grouping by year can now be specified in front matter on list pages
|
||||
|
||||
### Changed
|
||||
|
||||
|
|
@ -703,7 +745,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|||
- Advanced customisation using simple Tailwind colour definitions and styles
|
||||
- Fully documented
|
||||
|
||||
[Unreleased]: https://github.com/jpanther/congo/compare/v2.6.1...HEAD
|
||||
[Unreleased]: https://github.com/jpanther/congo/compare/v2.7.0...HEAD
|
||||
[2.7.0]: https://github.com/jpanther/congo/compare/v2.6.1...v2.7.0
|
||||
[2.6.1]: https://github.com/jpanther/congo/compare/v2.6.0...v2.6.1
|
||||
[2.6.0]: https://github.com/jpanther/congo/compare/v2.5.4...v2.6.0
|
||||
[2.5.4]: https://github.com/jpanther/congo/compare/v2.5.3...v2.5.4
|
||||
|
|
|
|||
|
|
@ -35,9 +35,9 @@
|
|||
- Indent using 2 spaces (soft tabs).
|
||||
- Put spaces between list items (ie. `[1, 2, 3]`, not `[1,2,3]`), around operators (ie. `1 + 1`, not `1+1`) and inside go templating tags (ie. `{{< alert >}}`, not `{{<alert>}}`).
|
||||
- Avoid code reuse in templates by extracting components into partials.
|
||||
- Layout code in a logical manner that prioritises readibility.
|
||||
- Layout code in a logical manner that prioritises readability.
|
||||
- Add comments when the intent of the code isn't immediately apparent or to break up large blocks of logic.
|
||||
- Use relative paths to assets without including the preceeding slash but, when referring to a folder, including a trailing slash (ie. `static/img/`, not `/static/img/` or `/static/img`).
|
||||
- Use relative paths to assets without including the preceding slash but, when referring to a folder, including a trailing slash (ie. `static/img/`, not `/static/img/` or `/static/img`).
|
||||
- Any static text must be referenced using the `i18n` methods and included in the localisation assets.
|
||||
- Commit often, preferring incremental changes rather than bundling everything into a single, large commit.
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ Congo is designed to be a powerful, lightweight theme for [Hugo](https://gohugo.
|
|||
- Highly customisable configuration
|
||||
- Multiple homepage layouts
|
||||
- Flexible with any content types, taxonomies and menus
|
||||
- Multilingual content support inlcuding support for RTL languages
|
||||
- Multilingual content support including support for RTL languages
|
||||
- Ability to link to posts on third-party websites
|
||||
- Client-side site search powered by Fuse.js
|
||||
- Diagrams and visualisations using Mermaid
|
||||
|
|
|
|||
|
|
@ -5,6 +5,5 @@ externalUrl: ""
|
|||
summary: ""
|
||||
showReadingTime: false
|
||||
_build:
|
||||
render: "false"
|
||||
list: "local"
|
||||
render: "never"
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*! Congo v2.6.1 | MIT License | https://github.com/jpanther/congo */
|
||||
/*! Congo v2.7.0 | MIT License | https://github.com/jpanther/congo */
|
||||
|
||||
/*! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com */
|
||||
/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */
|
||||
|
||||
/*
|
||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
||||
|
|
@ -191,6 +191,10 @@ select,
|
|||
textarea {
|
||||
font-family: inherit;
|
||||
/* 1 */
|
||||
font-feature-settings: inherit;
|
||||
/* 1 */
|
||||
font-variation-settings: inherit;
|
||||
/* 1 */
|
||||
font-size: 100%;
|
||||
/* 1 */
|
||||
font-weight: inherit;
|
||||
|
|
@ -341,6 +345,14 @@ menu {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Reset default styling for dialogs.
|
||||
*/
|
||||
|
||||
dialog {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent resizing textareas horizontally by default.
|
||||
*/
|
||||
|
|
@ -527,12 +539,12 @@ video {
|
|||
max-width: 65ch;
|
||||
}
|
||||
|
||||
.prose :where(p):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-lead);
|
||||
font-size: 1.25em;
|
||||
line-height: 1.6;
|
||||
|
|
@ -540,104 +552,110 @@ video {
|
|||
margin-bottom: 1.2em;
|
||||
}
|
||||
|
||||
.prose :where(a):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-links);
|
||||
text-decoration: underline;
|
||||
font-weight: 500;
|
||||
text-decoration-color: rgba(var(--color-primary-300), 1);
|
||||
}
|
||||
|
||||
.prose :where(a):not(:where([class~="not-prose"] *)):hover {
|
||||
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)):hover {
|
||||
color: rgba(var(--color-neutral), 1);
|
||||
text-decoration: none;
|
||||
background-color: rgba(var(--color-primary-600), 1);
|
||||
border-radius: 0.09rem;
|
||||
}
|
||||
|
||||
.prose :where(strong):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-bold);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.prose :where(a strong):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.prose :where(thead th strong):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.prose :where(ol):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: decimal;
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
padding-left: 1.625em;
|
||||
}
|
||||
|
||||
.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: upper-alpha;
|
||||
}
|
||||
|
||||
.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: upper-alpha;
|
||||
}
|
||||
|
||||
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
|
||||
.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: upper-roman;
|
||||
}
|
||||
|
||||
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.prose :where(ul):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
list-style-type: disc;
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
padding-left: 1.625em;
|
||||
}
|
||||
|
||||
.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
|
||||
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
|
||||
font-weight: 400;
|
||||
color: var(--tw-prose-counters);
|
||||
}
|
||||
|
||||
.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
|
||||
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
|
||||
color: var(--tw-prose-bullets);
|
||||
}
|
||||
|
||||
.prose :where(hr):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 600;
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
|
||||
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
border-color: var(--tw-prose-hr);
|
||||
border-top-width: 1px;
|
||||
margin-top: 3em;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
color: var(--tw-prose-quotes);
|
||||
|
|
@ -649,15 +667,15 @@ video {
|
|||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
|
||||
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
|
||||
content: open-quote;
|
||||
}
|
||||
|
||||
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after {
|
||||
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
|
||||
content: close-quote;
|
||||
}
|
||||
|
||||
.prose :where(h1):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 800;
|
||||
font-size: 2.25em;
|
||||
|
|
@ -666,12 +684,12 @@ video {
|
|||
line-height: 1.1111111;
|
||||
}
|
||||
|
||||
.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
font-weight: 900;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.prose :where(h2):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 700;
|
||||
font-size: 1.5em;
|
||||
|
|
@ -680,12 +698,12 @@ video {
|
|||
line-height: 1.3333333;
|
||||
}
|
||||
|
||||
.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
font-weight: 800;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.prose :where(h3):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 600;
|
||||
font-size: 1.25em;
|
||||
|
|
@ -694,12 +712,12 @@ video {
|
|||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
font-weight: 700;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.prose :where(h4):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 600;
|
||||
margin-top: 1.5em;
|
||||
|
|
@ -707,73 +725,82 @@ video {
|
|||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
font-weight: 700;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.prose :where(img):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
display: block;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-captions);
|
||||
font-size: 0.875em;
|
||||
line-height: 1.4285714;
|
||||
margin-top: 0.8571429em;
|
||||
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
color: var(--tw-prose-kbd);
|
||||
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
|
||||
font-size: 0.9rem;
|
||||
border-radius: 0.25rem;
|
||||
padding-top: 0.1875em;
|
||||
padding-right: 0.375em;
|
||||
padding-bottom: 0.1875em;
|
||||
padding-left: 0.375em;
|
||||
background-color: rgba(var(--color-neutral-200), 1);
|
||||
padding: 0.1rem 0.4rem;
|
||||
}
|
||||
|
||||
.prose :where(code):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-code);
|
||||
font-weight: 600;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.prose :where(code):not(:where([class~="not-prose"] *))::before {
|
||||
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
|
||||
content: "`";
|
||||
}
|
||||
|
||||
.prose :where(code):not(:where([class~="not-prose"] *))::after {
|
||||
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
|
||||
content: "`";
|
||||
}
|
||||
|
||||
.prose :where(a code):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-code);
|
||||
}
|
||||
|
||||
.prose :where(h1 code):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.prose :where(h4 code):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.prose :where(blockquote code):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.prose :where(thead th code):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.prose :where(pre):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-pre-code);
|
||||
background-color: var(--tw-prose-pre-bg);
|
||||
overflow-x: auto;
|
||||
|
|
@ -789,7 +816,7 @@ video {
|
|||
padding-left: 1.1428571em;
|
||||
}
|
||||
|
||||
.prose :where(pre code):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
background-color: transparent;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
|
|
@ -801,15 +828,15 @@ video {
|
|||
line-height: inherit;
|
||||
}
|
||||
|
||||
.prose :where(pre code):not(:where([class~="not-prose"] *))::before {
|
||||
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.prose :where(pre code):not(:where([class~="not-prose"] *))::after {
|
||||
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.prose :where(table):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
text-align: left;
|
||||
|
|
@ -819,12 +846,12 @@ video {
|
|||
line-height: 1.7142857;
|
||||
}
|
||||
|
||||
.prose :where(thead):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--tw-prose-th-borders);
|
||||
}
|
||||
|
||||
.prose :where(thead th):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 600;
|
||||
vertical-align: bottom;
|
||||
|
|
@ -833,28 +860,40 @@ video {
|
|||
padding-left: 0.5714286em;
|
||||
}
|
||||
|
||||
.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: var(--tw-prose-td-borders);
|
||||
}
|
||||
|
||||
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.prose :where(tfoot):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
border-top-width: 1px;
|
||||
border-top-color: var(--tw-prose-th-borders);
|
||||
}
|
||||
|
||||
.prose :where(tfoot td):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-captions);
|
||||
font-size: 0.875em;
|
||||
line-height: 1.4285714;
|
||||
margin-top: 0.8571429em;
|
||||
}
|
||||
|
||||
.prose {
|
||||
--tw-prose-body: rgba(var(--color-neutral-700), 1);
|
||||
--tw-prose-headings: rgba(var(--color-neutral-800), 1);
|
||||
|
|
@ -867,6 +906,8 @@ video {
|
|||
--tw-prose-quotes: rgba(var(--color-neutral-700), 1);
|
||||
--tw-prose-quote-borders: rgba(var(--color-primary-200), 1);
|
||||
--tw-prose-captions: rgba(var(--color-neutral-500), 1);
|
||||
--tw-prose-kbd: #111827;
|
||||
--tw-prose-kbd-shadows: 17 24 39;
|
||||
--tw-prose-code: rgba(var(--color-secondary-700), 1);
|
||||
--tw-prose-pre-code: rgba(var(--color-neutral-700), 1);
|
||||
--tw-prose-pre-bg: rgba(var(--color-neutral-50), 1);
|
||||
|
|
@ -883,6 +924,8 @@ video {
|
|||
--tw-prose-invert-quotes: rgba(var(--color-neutral-200), 1);
|
||||
--tw-prose-invert-quote-borders: rgba(var(--color-primary-900), 1);
|
||||
--tw-prose-invert-captions: rgba(var(--color-neutral-400), 1);
|
||||
--tw-prose-invert-kbd: #fff;
|
||||
--tw-prose-invert-kbd-shadows: 255 255 255;
|
||||
--tw-prose-invert-code: rgba(var(--color-secondary-400), 1);
|
||||
--tw-prose-invert-pre-code: rgba(var(--color-neutral-200), 1);
|
||||
--tw-prose-invert-pre-bg: rgba(var(--color-neutral-700), 1);
|
||||
|
|
@ -892,111 +935,118 @@ video {
|
|||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.prose :where(video):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.prose :where(figure):not(:where([class~="not-prose"] *)) {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.prose :where(li):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.prose :where(ol > li):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-left: 0.375em;
|
||||
}
|
||||
|
||||
.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-left: 0.375em;
|
||||
}
|
||||
|
||||
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
|
||||
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
|
||||
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
.prose :where(hr + *):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 1.25em;
|
||||
margin-bottom: 1.25em;
|
||||
}
|
||||
|
||||
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0.5em;
|
||||
padding-left: 1.625em;
|
||||
}
|
||||
|
||||
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.prose :where(h2 + *):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.prose :where(h3 + *):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.prose :where(h4 + *):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-top: 0.5714286em;
|
||||
padding-right: 0.5714286em;
|
||||
padding-bottom: 0.5714286em;
|
||||
padding-left: 0.5714286em;
|
||||
}
|
||||
|
||||
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose :where(kbd):not(:where([class~="not-prose"] *)) {
|
||||
background-color: rgba(var(--color-neutral-200), 1);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.prose :where(mark):not(:where([class~="not-prose"] *)) {
|
||||
.prose :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: rgba(var(--color-neutral-800), 1);
|
||||
background-color: rgba(var(--color-secondary-200), 1);
|
||||
padding: 0.1rem 0.2rem;
|
||||
|
|
@ -1695,6 +1745,10 @@ body:has(#menu-controller:checked) {
|
|||
bottom: 0px;
|
||||
}
|
||||
|
||||
.bottom-7 {
|
||||
bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.end-0 {
|
||||
inset-inline-end: 0px;
|
||||
}
|
||||
|
|
@ -1707,6 +1761,10 @@ body:has(#menu-controller:checked) {
|
|||
top: 5rem;
|
||||
}
|
||||
|
||||
.top-8 {
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.top-\[100vh\] {
|
||||
top: 100vh;
|
||||
}
|
||||
|
|
@ -1911,6 +1969,10 @@ body:has(#menu-controller:checked) {
|
|||
height: 3rem;
|
||||
}
|
||||
|
||||
.h-2 {
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
.h-24 {
|
||||
height: 6rem;
|
||||
}
|
||||
|
|
@ -2015,6 +2077,10 @@ body:has(#menu-controller:checked) {
|
|||
flex: none;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -2062,6 +2128,10 @@ body:has(#menu-controller:checked) {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -2094,6 +2164,10 @@ body:has(#menu-controller:checked) {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.\!rounded-md {
|
||||
border-radius: 0.375rem !important;
|
||||
}
|
||||
|
|
@ -2288,6 +2362,11 @@ body:has(#menu-controller:checked) {
|
|||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pe-10 {
|
||||
-webkit-padding-end: 2.5rem;
|
||||
padding-inline-end: 2.5rem;
|
||||
}
|
||||
|
||||
.pe-2 {
|
||||
-webkit-padding-end: 0.5rem;
|
||||
padding-inline-end: 0.5rem;
|
||||
|
|
@ -2338,6 +2417,14 @@ body:has(#menu-controller:checked) {
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
.text-start {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.text-end {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.align-top {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -2495,6 +2582,12 @@ body:has(#menu-controller:checked) {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
||||
|
|
@ -2543,6 +2636,8 @@ body:has(#menu-controller:checked) {
|
|||
--tw-prose-quotes: var(--tw-prose-invert-quotes);
|
||||
--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
|
||||
--tw-prose-captions: var(--tw-prose-invert-captions);
|
||||
--tw-prose-kbd: var(--tw-prose-invert-kbd);
|
||||
--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
|
||||
--tw-prose-code: var(--tw-prose-invert-code);
|
||||
--tw-prose-pre-code: var(--tw-prose-invert-pre-code);
|
||||
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
|
||||
|
|
@ -2550,16 +2645,16 @@ body:has(#menu-controller:checked) {
|
|||
--tw-prose-td-borders: var(--tw-prose-invert-td-borders);
|
||||
}
|
||||
|
||||
:is(.dark .dark\:prose-invert) :where(a):not(:where([class~="not-prose"] *)) {
|
||||
:is(.dark .dark\:prose-invert) :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
text-decoration-color: rgba(var(--color-neutral-600), 1);
|
||||
}
|
||||
|
||||
:is(.dark .dark\:prose-invert) :where(kbd):not(:where([class~="not-prose"] *)) {
|
||||
:is(.dark .dark\:prose-invert) :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
color: rgba(var(--color-neutral-200), 1);
|
||||
background-color: rgba(var(--color-neutral-700), 1);
|
||||
}
|
||||
|
||||
:is(.dark .dark\:prose-invert) :where(mark):not(:where([class~="not-prose"] *)) {
|
||||
:is(.dark .dark\:prose-invert) :where(mark):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
|
||||
background-color: rgba(var(--color-secondary-400), 1);
|
||||
}
|
||||
|
||||
|
|
@ -2656,6 +2751,10 @@ body:has(#menu-controller:checked) {
|
|||
outline-color: transparent;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:visible {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:-translate-x-\[2px\] {
|
||||
--tw-translate-x: -2px;
|
||||
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));
|
||||
|
|
@ -2691,6 +2790,10 @@ body:has(#menu-controller:checked) {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
:is([dir="ltr"] .ltr\:right-0) {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
:is([dir="ltr"] .ltr\:block) {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -2703,8 +2806,8 @@ body:has(#menu-controller:checked) {
|
|||
display: none;
|
||||
}
|
||||
|
||||
:is([dir="ltr"] .ltr\:text-right) {
|
||||
text-align: right;
|
||||
:is([dir="rtl"] .rtl\:left-0) {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
:is([dir="rtl"] .rtl\:block) {
|
||||
|
|
@ -2719,10 +2822,6 @@ body:has(#menu-controller:checked) {
|
|||
display: none;
|
||||
}
|
||||
|
||||
:is([dir="rtl"] .rtl\:text-left) {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:is(.dark .dark\:inline) {
|
||||
display: inline;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/*! Congo v2.6.1 | MIT License | https://github.com/jpanther/congo */
|
||||
/*! Congo v2.7.0 | MIT License | https://github.com/jpanther/congo */
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
|
||||
|
After Width: | Height: | Size: 269 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"/></svg>
|
||||
|
After Width: | Height: | Size: 269 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="0.89em" viewBox="0 0 512 512"><path fill="currentColor" d="M88 0C74.7 0 64 10.7 64 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C120.5 112.3 128 119.9 128 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C119.5 47.7 112 40.1 112 24c0-13.3-10.7-24-24-24zM32 192c-17.7 0-32 14.3-32 32V416c0 53 43 96 96 96H288c53 0 96-43 96-96h16c61.9 0 112-50.1 112-112s-50.1-112-112-112H352 32zm352 64h16c26.5 0 48 21.5 48 48s-21.5 48-48 48H384V256zM224 24c0-13.3-10.7-24-24-24s-24 10.7-24 24c0 38.9 23.4 59.4 39.1 73.1l1.1 1C232.5 112.3 240 119.9 240 136c0 13.3 10.7 24 24 24s24-10.7 24-24c0-38.9-23.4-59.4-39.1-73.1l-1.1-1C231.5 47.7 224 40.1 224 24z"/></svg>
|
||||
|
After Width: | Height: | Size: 706 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path fill="currentColor" d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"/>
|
||||
<path fill="currentColor" d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 0 1-.415-.492 1.988 1.988 0 0 1-.94.31z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 775 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 257 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,15 +1,12 @@
|
|||
languageCode = "en"
|
||||
languageName = "English"
|
||||
languageDirection = "ltr"
|
||||
weight = 1
|
||||
|
||||
title = "Congo"
|
||||
# copyright = "Copy, _right?_ :thinking_face:"
|
||||
|
||||
[params]
|
||||
isoCode = "en"
|
||||
displayName = "EN"
|
||||
rtl = false
|
||||
|
||||
dateFormat = "2 January 2006"
|
||||
|
||||
# mainSections = ["section1", "section2"]
|
||||
|
|
|
|||
|
|
@ -31,6 +31,12 @@
|
|||
[main.params]
|
||||
action = "search"
|
||||
|
||||
[[main]]
|
||||
identifier = "locale"
|
||||
weight = 100
|
||||
[main.params]
|
||||
action = "locale"
|
||||
|
||||
# -- Footer Menu --
|
||||
# The footer menu is displayed at the bottom of the page, just before
|
||||
# the copyright notice. Configure as per the main menu above.
|
||||
|
|
|
|||
|
|
@ -70,6 +70,11 @@ fingerprintAlgorithm = "sha256"
|
|||
# site = "ABC12345"
|
||||
# domain = "llama.yoursite.com"
|
||||
|
||||
[plausibleAnalytics]
|
||||
# domain = "blog.yoursite.com"
|
||||
# event = ""
|
||||
# script = ""
|
||||
|
||||
[verification]
|
||||
# google = ""
|
||||
# bing = ""
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
languageCode = "de-DE"
|
||||
languageName = "Deutsch (Deutschland)"
|
||||
languageDirection = "ltr"
|
||||
weight = 4
|
||||
|
||||
title = "Congo"
|
||||
copyright = "© 2023 Congo contributors"
|
||||
|
||||
[params]
|
||||
dateFormat = "2. January 2006"
|
||||
|
||||
mainSections = ["samples"]
|
||||
description = "Ein leistungsstarkes, leichtgewichtiges Theme für Hugo, das mit Tailwind CSS erstellt wurde."
|
||||
|
||||
[author]
|
||||
name = "Congo"
|
||||
image = "img/author.jpg"
|
||||
headline = "Nicht dein Durschnitts-Theme!"
|
||||
bio = "Dies ist ein Beispiel für eine Autorenbiografie, und obwohl hier ein Stockfoto eines Hundes zu sehen ist, wurde dieser Artikel tatsächlich von einem Menschen verfasst. :dog:"
|
||||
links = [
|
||||
{ twitter = "https://twitter.com/" },
|
||||
{ facebook = "https://facebook.com/" },
|
||||
{ linkedin = "https://linkedin.com/" },
|
||||
{ youtube = "https://youtube.com/" },
|
||||
]
|
||||
|
|
@ -1,15 +1,12 @@
|
|||
languageCode = "en-au"
|
||||
languageCode = "en-AU"
|
||||
languageName = "English (Australia)"
|
||||
languageDirection = "ltr"
|
||||
weight = 1
|
||||
|
||||
title = "Congo"
|
||||
copyright = "© 2023 Congo contributors"
|
||||
|
||||
[params]
|
||||
isoCode = "en-AU"
|
||||
displayName = ":flag-au:"
|
||||
rtl = false
|
||||
|
||||
dateFormat = "2 January 2006"
|
||||
|
||||
mainSections = ["samples"]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
languageCode = "es-MX"
|
||||
languageName = "Español (México)"
|
||||
languageDirection = "ltr"
|
||||
weight = 2
|
||||
|
||||
title = "Congo"
|
||||
copyright = "© 2023 Congo contributors"
|
||||
|
||||
[params]
|
||||
dateFormat = "2 January 2006"
|
||||
|
||||
mainSections = ["samples"]
|
||||
description = "Un tema poderoso y liviano para Hugo creado con Tailwind CSS."
|
||||
|
||||
[author]
|
||||
name = "Congo"
|
||||
image = "img/author.jpg"
|
||||
headline = "¡No es tu tema ordinario!"
|
||||
bio = "Esta es una biografía de autor de ejemplo, y aunque aquí hay una foto de un perro, este artículo en realidad fue creado por un ser humano. :dog:"
|
||||
links = [
|
||||
{ twitter = "https://twitter.com/" },
|
||||
{ facebook = "https://facebook.com/" },
|
||||
{ linkedin = "https://linkedin.com/" },
|
||||
{ youtube = "https://youtube.com/" },
|
||||
]
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
languageCode = "ja"
|
||||
languageName = "日本語"
|
||||
languageDirection = "ltr"
|
||||
weight = 2
|
||||
|
||||
title = "Congo"
|
||||
copyright = "© 2023 Congo contributors"
|
||||
|
||||
[params]
|
||||
dateFormat = "2006年1月2日"
|
||||
|
||||
mainSections = ["samples"]
|
||||
description = "Tailwind CSSをベースに開発された強力で軽量なHugo向けテーマ"
|
||||
|
||||
[author]
|
||||
name = "Congo"
|
||||
image = "img/author.jpg"
|
||||
headline = "ただならぬテーマ!"
|
||||
bio = "これは著者の経歴の例で、ここには犬の画像があるが、実際には人間が作成したものである。 :dog:"
|
||||
links = [
|
||||
{ twitter = "https://twitter.com/" },
|
||||
{ facebook = "https://facebook.com/" },
|
||||
{ linkedin = "https://linkedin.com/" },
|
||||
{ youtube = "https://youtube.com/" },
|
||||
]
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
# -- Main Menu --
|
||||
# The main menu is displayed in the header at the top of the page.
|
||||
# Acceptable parameters are name, pageRef, page, url, title, weight.
|
||||
#
|
||||
# The simplest menu configuration is to provide:
|
||||
# name = The name to be displayed for this menu link
|
||||
# pageRef = The identifier of the page or section to link to
|
||||
#
|
||||
# By default the menu is ordered alphabetically. This can be
|
||||
# overridden by providing a weight value. The menu will then be
|
||||
# ordered by weight from lowest to highest.
|
||||
|
||||
[[main]]
|
||||
name = "Dokumentation"
|
||||
pageRef = "docs"
|
||||
weight = 10
|
||||
|
||||
[[main]]
|
||||
name = "Beispiele"
|
||||
pageRef = "samples"
|
||||
weight = 20
|
||||
|
||||
[[main]]
|
||||
name = "Genutzt von"
|
||||
pageRef = "users"
|
||||
weight = 30
|
||||
|
||||
[[main]]
|
||||
name = "GitHub"
|
||||
url = "https://github.com/jpanther/congo"
|
||||
weight = 40
|
||||
[main.params]
|
||||
icon = "github"
|
||||
showName = false
|
||||
target = "_blank"
|
||||
|
||||
[[main]]
|
||||
identifier = "search"
|
||||
weight = 99
|
||||
[main.params]
|
||||
action = "search"
|
||||
|
||||
[[main]]
|
||||
identifier = "locale"
|
||||
weight = 100
|
||||
[main.params]
|
||||
action = "locale"
|
||||
|
||||
# -- Footer Menu --
|
||||
# The footer menu is displayed at the bottom of the page, just before
|
||||
# the copyright notice. Configure as per the main menu above.
|
||||
|
||||
# [[footer]]
|
||||
# name = "Tags"
|
||||
# pageRef = "tags"
|
||||
# weight = 10
|
||||
|
|
@ -40,6 +40,12 @@
|
|||
[main.params]
|
||||
action = "search"
|
||||
|
||||
[[main]]
|
||||
identifier = "locale"
|
||||
weight = 100
|
||||
[main.params]
|
||||
action = "locale"
|
||||
|
||||
# -- Footer Menu --
|
||||
# The footer menu is displayed at the bottom of the page, just before
|
||||
# the copyright notice. Configure as per the main menu above.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
# -- Main Menu --
|
||||
# The main menu is displayed in the header at the top of the page.
|
||||
# Acceptable parameters are name, pageRef, page, url, title, weight.
|
||||
#
|
||||
# The simplest menu configuration is to provide:
|
||||
# name = The name to be displayed for this menu link
|
||||
# pageRef = The identifier of the page or section to link to
|
||||
#
|
||||
# By default the menu is ordered alphabetically. This can be
|
||||
# overridden by providing a weight value. The menu will then be
|
||||
# ordered by weight from lowest to highest.
|
||||
|
||||
[[main]]
|
||||
name = "Docs"
|
||||
url = "/docs"
|
||||
weight = 10
|
||||
|
||||
[[main]]
|
||||
name = "Ejemplos"
|
||||
pageRef = "samples"
|
||||
weight = 20
|
||||
|
||||
[[main]]
|
||||
name = "Usuarios"
|
||||
pageRef = "users"
|
||||
weight = 30
|
||||
|
||||
[[main]]
|
||||
name = "GitHub"
|
||||
url = "https://github.com/jpanther/congo"
|
||||
weight = 40
|
||||
[main.params]
|
||||
icon = "github"
|
||||
showName = false
|
||||
target = "_blank"
|
||||
|
||||
[[main]]
|
||||
identifier = "search"
|
||||
weight = 99
|
||||
[main.params]
|
||||
action = "search"
|
||||
|
||||
[[main]]
|
||||
identifier = "locale"
|
||||
weight = 100
|
||||
[main.params]
|
||||
action = "locale"
|
||||
|
||||
# -- Footer Menu --
|
||||
# The footer menu is displayed at the bottom of the page, just before
|
||||
# the copyright notice. Configure as per the main menu above.
|
||||
|
||||
# [[footer]]
|
||||
# name = "Tags"
|
||||
# pageRef = "tags"
|
||||
# weight = 10
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
# -- Main Menu --
|
||||
# The main menu is displayed in the header at the top of the page.
|
||||
# Acceptable parameters are name, pageRef, page, url, title, weight.
|
||||
#
|
||||
# The simplest menu configuration is to provide:
|
||||
# name = The name to be displayed for this menu link
|
||||
# pageRef = The identifier of the page or section to link to
|
||||
#
|
||||
# By default the menu is ordered alphabetically. This can be
|
||||
# overridden by providing a weight value. The menu will then be
|
||||
# ordered by weight from lowest to highest.
|
||||
|
||||
[[main]]
|
||||
name = "ドキュメント"
|
||||
pageRef = "docs"
|
||||
weight = 10
|
||||
|
||||
[[main]]
|
||||
name = "サンプル"
|
||||
pageRef = "samples"
|
||||
weight = 20
|
||||
|
||||
[[main]]
|
||||
name = "利用例"
|
||||
pageRef = "users"
|
||||
weight = 30
|
||||
|
||||
[[main]]
|
||||
name = "GitHub"
|
||||
url = "https://github.com/jpanther/congo"
|
||||
weight = 40
|
||||
[main.params]
|
||||
icon = "github"
|
||||
showName = false
|
||||
target = "_blank"
|
||||
|
||||
[[main]]
|
||||
identifier = "検索"
|
||||
weight = 99
|
||||
[main.params]
|
||||
action = "search"
|
||||
|
||||
[[main]]
|
||||
identifier = "locale"
|
||||
weight = 100
|
||||
[main.params]
|
||||
action = "locale"
|
||||
|
||||
# -- Footer Menu --
|
||||
# The footer menu is displayed at the bottom of the page, just before
|
||||
# the copyright notice. Configure as per the main menu above.
|
||||
|
||||
# [[footer]]
|
||||
# name = "Tags"
|
||||
# pageRef = "tags"
|
||||
# weight = 10
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
title: "Willkommen bei Congo! :tada:"
|
||||
description: "Dies ist eine Demo des Congo-Themes für Hugo."
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Ein mächtiges und gleichzeitig leichtes Theme für Hugo, das mit Tailwind CSS erstellt wurde.
|
||||
{{< /lead >}}
|
||||
|
||||
Dies ist eine Demo-Site, die vollständig mit Congo erstellt wurde. Sie enthält auch eine vollständige [Theme-Dokumentation]({{< ref path="docs" lang="en" >}}). Congo ist flexibel und eignet sich sowohl für statische seitenbasierte Inhalte (wie diese Demo) als auch für einen traditionellen Blog mit einem Feed der letzten Beiträge.
|
||||
|
||||
<div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
|
||||
<span class="flex items-center pe-3 text-primary-400">
|
||||
{{< icon "triangle-exclamation" >}}
|
||||
</span>
|
||||
<span class="flex items-center justify-between grow dark:text-neutral-300">
|
||||
<span class="prose dark:prose-invert">Dies ist eine Demo des <code id="layout">page</code>-Layouts.</span>
|
||||
<button
|
||||
id="switch-layout-button"
|
||||
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
|
||||
>
|
||||
Layout ändern ↻
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{< figure src="festivities.svg" class="m-auto mt-6 max-w-prose" >}}
|
||||
|
||||
Schau dir die [Beispielseiten]({{< ref "samples" >}}) an, um ein Gefühl für die Möglichkeiten von Congo zu bekommen. Wenn dir gefällt, was du siehst, dann schau dir sich das Projekt auf [Github](https://github.com/jpanther/congo) an oder lies die [Installationsanleitung]({{< ref path="docs/installation" lang="en">}}), um loszulegen.
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
---
|
||||
title: "¡Bienvenido a Congo! :tada:"
|
||||
description: "Esta es una demostración del tema Congo para Hugo."
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Un tema poderoso y liviano para Hugo creado con Tailwind CSS.
|
||||
{{< /lead >}}
|
||||
|
||||
Este es un sitio de demostración creado completamente con Congo. También contiene un conjunto completo de artículos con [documentación del tema]({{< ref path="docs" lang="en" >}}). Congo es flexible y es excelente tanto para contenido estático basado en páginas (como es el caso de esta demostración) como para un blog tradicional con un feed de publicaciones recientes.
|
||||
|
||||
<div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
|
||||
<span class="flex items-center pe-3 text-primary-400">
|
||||
{{< icon "triangle-exclamation" >}}
|
||||
</span>
|
||||
<span class="flex items-center justify-between grow dark:text-neutral-300">
|
||||
<span class="prose dark:prose-invert">Esta es la demostración en formato <code id="layout">page</code></span>
|
||||
<button
|
||||
id="switch-layout-button"
|
||||
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
|
||||
>
|
||||
Cambiar el diseño ↻
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{< figure src="festivities.svg" class="m-auto mt-6 max-w-prose" >}}
|
||||
|
||||
Explora las [páginas de ejemplo]({{< ref "samples" >}}) para tener una idea de lo que Congo puede hacer. Si te gusta lo que ves, consulta el proyecto en [Github](https://github.com/jpanther/congo) o lee la [Guía de instalación]({{< ref path="docs/installation" lang="en" >}}) para comenzar.
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
---
|
||||
title: "Congoへようこそ! :tada:"
|
||||
description: "これはHugo向けテーマ、Congoのデモです"
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Tailwind CSSをベースに開発された強力で軽量なHugo向けテーマ。
|
||||
{{< /lead >}}
|
||||
|
||||
これはCongoを使って構築されたデモサイトです。
|
||||
[Congoに関するドキュメント]({{< ref "docs" >}})も含まれています。
|
||||
Congoは柔軟性に富み、静的なコンテンツ配信にも、投稿フィード機能を持つようなBlogにも適しています。
|
||||
|
||||
<div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
|
||||
<span class="flex items-center pe-3 text-primary-400">
|
||||
{{< icon "triangle-exclamation" >}}
|
||||
</span>
|
||||
<span class="flex items-center justify-between grow dark:text-neutral-300">
|
||||
<span class="prose dark:prose-invert">これは<code id="layout">page</code>レイアウトのデモです。</span>
|
||||
<button
|
||||
id="switch-layout-button"
|
||||
class="px-4 !text-neutral !no-underline rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
|
||||
>
|
||||
レイアウトを切り替える ↻
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{< figure src="festivities.svg" class="m-auto mt-6 max-w-prose" >}}
|
||||
|
||||
[例]({{< ref "samples" >}})を見て、Congoの実力を実感してください。気に入ったら[GitHub](https://github.com/jpanther/congo)をチェックするか、[インストール]({{< ref "docs/installation" >}})を読んで実際に使い始めてほしい。
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
title: "ドキュメント"
|
||||
description: "Congoの特徴とその使い方について"
|
||||
|
||||
cascade:
|
||||
showDate: false
|
||||
showAuthor: false
|
||||
showSummary: true
|
||||
invertPagination: true
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
シンプルでパワフル。Congoの使い方と特徴をご紹介します。
|
||||
{{< /lead >}}
|
||||
|
||||
|
||||
|
||||
このセクションにはCongoの知るべきすべてが含まれています。もしあなたがCongoに触れるのが初めてならば、[インストール]({{< ref "docs/installation" >}})ガイドを読むか、[例]({{< ref "samples" >}})を見て、Congoは何ができるか確認してください。
|
||||
|
||||
_このドキュメントに素晴らしいイラストを提供してくれた[Katerina Limpitsouni](https://ninalimpi.com)に感謝します。_
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
---
|
||||
title: "高度なカスタマイズ"
|
||||
date: 2020-08-08
|
||||
draft: false
|
||||
description: "Congoを手動で構築する方法"
|
||||
summary: "Congoは、基本的なTailwind設定の変更、手動でのテーマ構築、カスタムCSSの提供など、高度なカスタマイズをサポートしています。"
|
||||
slug: "advanced-customisation"
|
||||
tags: ["advanced", "css", "docs"]
|
||||
---
|
||||
|
||||
Congoに高度な変更を加える方法はたくさんあります。カスタマイズできる内容や、ご希望の結果を得るための最良の方法については、以下をお読みください。
|
||||
|
||||
さらにアドバイスが必要な場合は[GitHub Discussions](https://github.com/jpanther/congo/discussions)に質問を投稿してください。
|
||||
|
||||
## Hugoプロジェクトの構造
|
||||
|
||||
これらの作業に入る前に、[Hugoプロジェクトの構造](https://gohugo.io/getting-started/directory-structure/)とコンテンツやテーマを管理するためのベストプラクティスについて説明します。
|
||||
|
||||
{{< alert >}}
|
||||
**要約:** テーマファイルを直接編集するのではなく、Hugoプロジェクトのサブディレクトリでカスタマイズを行なってください。
|
||||
{{< /alert >}}
|
||||
|
||||
Congoは、Hugoの標準的なプラクティスをすべて活用できるように作られています。コアのテーマファイルを変更することなく、テーマのすべての側面をカスタマイズしたり上書きしたりできるように設計されています。これにより、ウェブサイトのルック＆フィールを完全にコントロールしながら、シームレスなアップグレードが可能になります。
|
||||
|
||||
そのためには、テーマファイルを手動で直接調整してはいけません。Hugo モジュールを使ってインストールする場合でも、git サブモジュールとしてインストールする場合でも、手動でテーマを `themes/` ディレクトリにインクルードする場合でも、これらのファイルは常にそのままにしておくべきです。
|
||||
|
||||
テーマの動作を調整する正しい方法は、Hugoの強力な[file lookup order](https://gohugo.io/templates/lookup-order/)を使ってファイルを上書きすることです。そうすることで、あなたがプロジェクトディレクトリにインクルードしたファイルが自動的にテーマファイルよりも優先されることを保証します。
|
||||
|
||||
例えば、Congoのメイン記事テンプレートをオーバーライドしたい場合、独自の `layouts/_default/single.html` ファイルを作成し、プロジェクトのルートに置くだけです。このファイルはテーマを変更することなく、テーマの `single.html` を上書きします。これは、HTMLテンプレート、パーシャル、ショートコード、設定ファイル、データ、アセットなど、どんなテーマファイルにも使えます。
|
||||
|
||||
このシンプルな慣習に従う限り、あなたのカスタマイズを失うことなく、常にテーマをアップデート（または異なるテーマのバージョンをテスト）することができます。
|
||||
|
||||
## カラースキーム
|
||||
|
||||
Congoにはいくつかのカラースキームが同梱されています。配色を変更するには、 `colorScheme` テーマパラメーターを設定します。組み込みの配色について詳しくは[はじめに]({{< ref "getting-started" >}})セクションを参照してください。
|
||||
|
||||
デフォルトの配色に加えて、独自のスキームを作成し、ウェブサイト全体を好みのスタイルに変更することもできます。スキームは `assets/css/schemes/` ディレクトリに `<scheme-name>.css` ファイルを置くことで作成できます。ファイルを作成したら、テーマ設定の中でその名前を参照するだけです。
|
||||
|
||||
Congoは3色のパレットを定義してテーマ全体に使用しています。この3色は「ニュートラル」、「プライマリー」、「セカンダリー」として定義され、それぞれ10色の濃淡があります。
|
||||
|
||||
Tailwind CSS 3.0が不透明度を用いてカラー値を計算するため、使用するカラーは[特定のフォーマットに準拠](https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo)して指定するする必要があります。
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-primary-500: 139, 92, 246;
|
||||
}
|
||||
```
|
||||
|
||||
この例では、 `primary-500` をCSS変数として `Red: 139, Green: 92, Blue: 246` に定義しています。
|
||||
|
||||
既存のテーマスタイルシートのいずれかをテンプレートとして使用してください。独自の色を定義するのは自由ですが、インスピレーションを得るために、公式の[Tailwind color palette reference](https://tailwindcss.com/docs/customizing-colors#color-palette-reference)もチェックしてみてください。
|
||||
|
||||
## スタイルのオーバーライド
|
||||
|
||||
独自のHTML要素にスタイルを設定するために、カスタムスタイルを追加する場合があります。Congoでは、独自のCSSスタイルシートでデフォルトのスタイルをオーバーライドすることができます。プロジェクトの `assets/css/` ディレクトリに `custom.css` ファイルを作成するだけです。
|
||||
|
||||
`custom.css` ファイルはHugoによってminifyされ、他のテーマスタイルの後に自動的に読み込まれます。
|
||||
|
||||
### フォントサイズの変更
|
||||
|
||||
`custom.css` を用いてフォントサイズをオーバーライドする例です。Congoでは、ベースとなるHTMLフォントサイズに由来するフォントサイズをテーマ全体で使用するため、フォントサイズの変更は簡単です。デフォルトでは、Tailwindはデフォルトサイズを`12pt`に設定していますが、お好きな値に変更することができます。
|
||||
|
||||
`assets/css/custom.css` を用意して下記のように記述してください:
|
||||
|
||||
```css
|
||||
/* Increase the default font size */
|
||||
html {
|
||||
font-size: 13pt;
|
||||
}
|
||||
```
|
||||
|
||||
この1つの値を変更するだけで、ウェブサイト上のすべてのフォントサイズが新しいサイズに合わせて調整されます。したがって、全体のフォントサイズを大きくするには、値を `12pt` より大きくします。同様に、フォントサイズを小さくするには、値を `12pt` より小さくします。
|
||||
|
||||
## ソースコードから再構築
|
||||
|
||||
大きな変更を加えたい場合は、Tailwind CSSのJITコンパイラを利用し、テーマCSS全体をゼロから再構築することができます。これは、Tailwindの設定を調整したり、メインのスタイルシートに追加のTailwindクラスを追加したい場合に便利です。
|
||||
|
||||
{{< alert >}}
|
||||
**注記:** 手動でテーマを再構築するのは上級者向けです。
|
||||
{{< /alert >}}
|
||||
|
||||
それでは、Tailwind CSSの構築方法を順を追って説明しましょう。
|
||||
|
||||
### Tailwindの設定
|
||||
|
||||
実際に使用されているTailwindのクラスのみを含むCSSファイルを生成するために、JITコンパイラはすべてのHTMLテンプレートとMarkdownファイルをスキャンして、どのスタイルが存在するかをチェックします。コンパイラは、テーマディレクトリのルートに含まれる `tailwind.config.js` ファイルを参照します:
|
||||
|
||||
```js
|
||||
// themes/congo/tailwind.config.js
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
"./layouts/**/*.html",
|
||||
"./content/**/*.{html,md}",
|
||||
"./themes/congo/layouts/**/*.html",
|
||||
"./themes/congo/content/**/*.{html,md}",
|
||||
],
|
||||
|
||||
// and more...
|
||||
};
|
||||
```
|
||||
|
||||
デフォルトでは、特定のプロジェクト構造に従っていれば、修正することなく簡単に独自のCSSファイルを生成できるようにコンテンツパスが設定されています。つまり、**Congo を `themes/congo/` のサブディレクトリとしてプロジェクトに含める必要があります。**
|
||||
よって、Hugoモジュールを使って簡単にテーマをインストールすることはできず、 Gitサブモジュール（推奨）か手動インストールのどちらかの方法を取らなければなりません。[インストール]({{< ref "installation" >}})では、これらの方法のいずれかを使ってテーマをインストールする方法を説明しています。
|
||||
|
||||
### プロジェクトの構造
|
||||
|
||||
デフォルト設定の恩恵を授かるには、プロジェクトは下記のような構造になっているべきです。
|
||||
|
||||
```shell
|
||||
.
|
||||
├── assets
|
||||
│ └── css
|
||||
│ └── compiled
|
||||
│ └── main.css # this is the file we will generate
|
||||
├── config # site config
|
||||
│ └── _default
|
||||
├── content # site content
|
||||
│ ├── _index.md
|
||||
│ ├── projects
|
||||
│ │ └── _index.md
|
||||
│ └── blog
|
||||
│ └── _index.md
|
||||
├── layouts # custom layouts for your site
|
||||
│ ├── partials
|
||||
│ │ └── extend-article-link.html
|
||||
│ ├── projects
|
||||
│ │ └── list.html
|
||||
│ └── shortcodes
|
||||
│ └── disclaimer.html
|
||||
└── themes
|
||||
└── congo # git submodule or manual theme install
|
||||
```
|
||||
|
||||
この構造例では、独自のカスタムレイアウトを持つ新しい `projects` コンテンツタイプを、カスタムショートコードと拡張パーシャルとともに追加します。プロジェクトがこの構造に従っていれば、必要なのは `main.css` ファイルを再コンパイルすることだけです。
|
||||
|
||||
### 依存関係のインストール
|
||||
|
||||
上記を動作させるには、 `themes/congo/` ディレクトリにて、プロジェクトの依存関係をインストールする必要がある。このステップには[npm](https://docs.npmjs.com/cli/v7/configuring-npm/install)が必要です。
|
||||
|
||||
```shell
|
||||
cd themes/congo
|
||||
npm install
|
||||
```
|
||||
|
||||
### Tailwindコンパイラの実行
|
||||
|
||||
依存関係のインストールが完了したら、あとは[Tailwind CLI](https://v2.tailwindcss.com/docs/installation#using-tailwind-cli)を使ってJITコンパイラを起動するだけです。Hugoプロジェクトのルートに戻り、以下のコマンドを実行してください:
|
||||
|
||||
```shell
|
||||
cd ../..
|
||||
./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit
|
||||
```
|
||||
|
||||
このコマンドはパス指定の関係で少し醜いですが、基本的にはTailwind CLIを呼び出し、Tailwindの設定ファイル、 `main.css` の場所、そしてコンパイルされたCSSファイルを置く場所（ `assets/css/compiled/` ）を渡しています。
|
||||
|
||||
Tailwindの設定ファイルによって、プロジェクト内のすべてのコンテンツとレイアウト、およびテーマ内のすべてのコンテンツを自動的に走査し、ウェブサイトに必要なすべてのCSSを含む新しいCSSファイルを作成します。Hugoはプロジェクト内のファイルを自動的にテーマに付属するもので上書きします。
|
||||
|
||||
レイアウトを変更して新しいTailwind CSSスタイルが必要になるたびに、コマンドを再実行するだけで、新しいCSSファイルを生成することができます。コマンドの最後に `-w` を追加すると、JITコンパイラをウォッチモードで実行することもできます。
|
||||
|
||||
### buildスクリプトの準備
|
||||
|
||||
私がやっているように、必要なコマンドを含む `package.json` をプロジェクトのルートに追加して、再構築プロセスを簡単にすることもできます。
|
||||
|
||||
```js
|
||||
// package.json
|
||||
|
||||
{
|
||||
"name": "my-website",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"scripts": {
|
||||
"server": "hugo server -b http://localhost -p 8000",
|
||||
"dev": "NODE_ENV=development ./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
|
||||
"build": "NODE_ENV=production ./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit"
|
||||
},
|
||||
// and more...
|
||||
}
|
||||
```
|
||||
|
||||
これで、デザインに取りかかりたいときに `npm run dev` を実行すればコンパイラがウォッチモードで実行されます。デプロイする準備ができたら、 `npm run build` を実行すれば、通常のTailwind CSSビルドが実行されます。
|
||||
|
||||
🙋♀️ ヘルプが必要な場合は、遠慮なく[GitHub Discussions](https://github.com/jpanther/congo/discussions)に質問を投稿してください。
|
||||
|
|
@ -20,7 +20,7 @@ Before leaping into it, first a quick note about [Hugo project structure](https:
|
|||
**In summary:** Never directly edit the theme files. Only make customisations in your Hugo project's sub-directories, not in the themes directory itself.
|
||||
{{< /alert >}}
|
||||
|
||||
Congo is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overriden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.
|
||||
Congo is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overridden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.
|
||||
|
||||
In order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your `themes/` directory, you should always leave these files intact.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,181 @@
|
|||
---
|
||||
title: "基本設定"
|
||||
date: 2020-08-14
|
||||
draft: false
|
||||
description: "Congoで利用可能なすべての設定"
|
||||
summary: "Congoで利用可能なすべてのサイト、言語、テーマ設定と、それらを使用してプロジェクトをカスタマイズする方法をご覧ください。"
|
||||
slug: "configuration"
|
||||
tags: ["config", "docs"]
|
||||
---
|
||||
|
||||
Congoは高度にカスタマイズ可能なテーマで、最新のHugoの機能のいくつかを使用して、設定方法を簡素化しています。
|
||||
|
||||
このテーマには、基本的なブログまたは静的ウェブサイトを立ち上げて実行できるようにするデフォルト設定が同梱されています。
|
||||
|
||||
> 同梱されている設定ファイルはTOMLフォーマットで提供されています。設定ファイルをYAMLやJSONに変換したい場合はご自由にどうぞ。
|
||||
|
||||
デフォルトのテーマ設定は各ファイルに文書化されているので、ニーズに合わせて自由に設定を調整することができます。
|
||||
|
||||
{{< alert >}}
|
||||
[インストール手順]({{< ref "/docs/installation#set-up-theme-configuration-files" >}})で説明されているように、Hugoプロジェクトの `config/_default/` にあるファイルを修正し、プロジェクトルートにある `config.toml` ファイルを削除することで、テーマの設定を調整します。
|
||||
{{< /alert >}}
|
||||
|
||||
## サイト設定
|
||||
|
||||
Hugoの標準的な設定変数はテーマ全体を通して尊重されますが、最良のエクスペリエンスのために設定すべき特別なものもあります。
|
||||
|
||||
サイトの設定は `config/_default/config.toml` ファイルで管理されます。下の表はCongoが利用するすべての設定の概要です。
|
||||
|
||||
この表で提供される変数名は、TOML構造を簡略化するためにドット記法を使用していることに注意してください（つまり、 `outputs.home` は `[outputs] home` を指します）。
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|Name|Default|Description|
|
||||
|---|---|---|
|
||||
|`theme`|`"congo"`|Hugo Modulesを使用する場合、この設定値は削除してください。他のすべてのインストールタイプでは、テーマを機能させるために `congo` に設定する必要があります。|
|
||||
|`baseURL`|_Not set_|ウェブサイトのルートへのURL。|
|
||||
|`defaultContentLanguage`|`"en"`|この値はテーマコンポーネントとコンテンツのデフォルト言語を決定します。サポートされる言語コードについては、下記の[言語と国際化](#言語と国際化)セクションを参照してください。|
|
||||
|`enableRobotsTXT`|`true`|有効にすると、サイトルートに `robots.txt` ファイルが作成され、検索エンジンがサイト全体をクロールできるようになります。あらかじめ用意されている `robots.txt` を利用したい場合は、`false` に設定して `static` ディレクトリにファイルを置いてください。完全にコントロールしたい場合は、[カスタムレイアウト]({{< ref "content-examples" >}})を指定してこのファイルを生成することができます。|
|
||||
|`paginate`|`10`|記事一覧の各ページに掲載される記事の数。|
|
||||
|`summaryLength`|`0`|記事の要約が[フロントマター]({{< ref "front-matter" >}})で提供されていない場合に、記事の要約を生成するために使われる単語の数。デフォルト値 `0` は最初の文章を使用します。この値は要約が非表示の場合には影響しません。|
|
||||
|`outputs.home`|`["HTML", "RSS", "JSON"]`|生成される出力フォーマット。Congoでは、すべてのテーマコンポーネントが正しく動作するために、HTML、RSS、JSONが必要です。|
|
||||
|`permalinks`|_Not set_|パーマリンクの設定は[Hugo docs](https://gohugo.io/content-management/urls/#permalinks)を参照してください。|
|
||||
|`taxonomies`|_Not set_|Taxonomiesについては、[コンテンツの整理]({{< ref "getting-started" >}})セクションを参照してください。|
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## 言語と国際化
|
||||
|
||||
Congoは完全な多言語ウェブサイト用に最適化されており、テーマのアセットはすぐに複数の言語に翻訳されます。言語設定により、複数バージョンのコンテンツを生成し、訪問者の母国語でカスタマイズされたエクスペリエンスを提供することができます。
|
||||
|
||||
Congoは現在、以下の言語に対応しています:
|
||||
|
||||
| Language | Code |
|
||||
| --------------------------------------- | ------- |
|
||||
| :gb: **English (default)** | `en` |
|
||||
| :egypt: Arabic | `ar` |
|
||||
| :bangladesh: Bengali | `bn` |
|
||||
| :cn: Chinese - Simplified (China) | `zh-cn` |
|
||||
| :taiwan: Chinese - Traditional (Taiwan) | `zh-tw` |
|
||||
| :flag-cz: Czech | `cs` |
|
||||
| :netherlands: Dutch | `nl` |
|
||||
| :finland: Finnish | `fi` |
|
||||
| :fr: French | `fr` |
|
||||
| :de: German | `de` |
|
||||
| :israel: Hebrew | `he` |
|
||||
| :hungary: Hungarian | `hu` |
|
||||
| :indonesia: Indonesian | `id` |
|
||||
| :it: Italian | `it` |
|
||||
| :jp: Japanese | `ja` |
|
||||
| :poland: Polish | `pl` |
|
||||
| :brazil: Portuguese (Brazil) | `pt-br` |
|
||||
| :portugal: Portuguese (Portugal) | `pt-pt` |
|
||||
| :romania: Romanian | `ro` |
|
||||
| :ru: Russian | `ru` |
|
||||
| :slovakia: Slovak | `sk` |
|
||||
| :es: Spanish (Spain) | `es` |
|
||||
| :tr: Turkish | `tr` |
|
||||
|
||||
翻訳文字列を含むカスタムファイルを `i18n/[code].yaml` に作成することでデフォルトの翻訳をオーバーライドできます。このメソッドを使って新しい言語を追加することもできます。新しい翻訳をコミュニティと共有したい場合、[Pull Request](https://github.com/jpanther/congo/pulls)を作ってください。
|
||||
|
||||
### 設定
|
||||
|
||||
可能な限り柔軟に対応するために、ウェブサイトの言語ごとに言語設定ファイルを作成する必要があります。デフォルトでは、Congoは `config/_default/languages.en.toml` に英語の言語設定を含んでいます。
|
||||
|
||||
英語以外の言語でウェブサイトを作成したい場合は、デフォルトのファイルをテンプレートとして使用したり、ファイル名を変更したりすることができます。ファイル名は `languages.[language-code].toml` という形式にしてください。
|
||||
|
||||
{{< alert >}}
|
||||
**注記:** [サイト設定](#サイト設定)の `defaultContentLanguage` パラメーターが、言語設定ファイル名の `[language-code]` と一致していることを確認してください。
|
||||
{{< /alert >}}
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|Name|Default|Description|
|
||||
|---|---|---|
|
||||
|`languageCode`|`"en"`|このファイルの言語コード。トップレベル言語 (例 `en`)またはサブ変数 (例 `en-AU`)で、ファイル名の `[language-code]` と一致する必要があります。|
|
||||
|`languageName`|`"English"`|言語名。|
|
||||
|`languageDirection`|`"ltr"`|RTL言語かどうか。 `"rtl"` に設定すると、コンテンツを右から左にリフローする。CongoはRTL言語とLTR言語の同時使用を完全にサポートしており、動的に両方の言語に調整します。|
|
||||
|`weight`|`1`|多言語サイトを構築する際の優先順序。|
|
||||
|`title`|`"Congo"`|ウェブサイトのタイトル。サイトのヘッダーとフッターに表示されます。|
|
||||
|`copyright`|_Not set_|サイトのフッターに表示する著作権メッセージを含むMarkdown文字列。何も指定されない場合、Congoは `title` を使って自動的にコピーライト文字列を生成します。|
|
||||
|`params.dateFormat`|`"2 January 2006"`|日付の書式。許容される書式については、[Hugo docs](https://gohugo.io/functions/format/#gos-layout-string)を参照してください。|
|
||||
|`params.mainSections`|_Not set_|最近の記事リストに表示するセクション。指定されていない場合は、記事の数が最も多いセクションが使われます。|
|
||||
|`params.description`|_Not set_|ウェブサイトの説明。これはサイトのメタデータに使用されます。|
|
||||
|`author.name`|_Not set_|著者の名前。これは記事のフッターと、プロフィールレイアウトが使用されている場合にホームページに表示されます。|
|
||||
|`author.image`|_Not set_|著者の画像ファイルへのパス。画像は縦横比1:1で、 `assets/` に置くこと。|
|
||||
|`author.headline`|_Not set_|著者の見出しを含むMarkdown文字列。プロフィールのトップページで著者の名前の下に表示されます。|
|
||||
|`author.bio`|_Not set_|著者の経歴を含むMarkdown文字列。記事のフッターに表示されます。|
|
||||
|`author.links`|_Not set_|著者の詳細とともに表示するリンク。設定ファイルにはリンクの例が含まれており、コメントを外すだけで有効にすることができます。リンクが表示される順番は、配列に表示される順番によって決まります。 `assets/icons/` に対応するSVGアイコンを用意することで、カスタムリンクを追加することもできます。|
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### メニュー
|
||||
|
||||
Congoは言語別メニュー設定もサポートしている。メニュー設定ファイルは、言語ファイルと同じ命名形式に従っています。ファイル名に言語コードを指定するだけで、そのファイルがどの言語に関連するかをHugoに伝えることができます。
|
||||
|
||||
メニュー設定ファイルは `menus.[language-code].toml` という形式で命名されます。 `[language-code]` が設定と一致していることを常に確認してください。
|
||||
|
||||
[はじめに]({{< ref "getting-started#メニュー" >}})セクションで、このファイルの構造について詳しく説明しています。また、[Hugo menu docs](https://gohugo.io/content-management/menus/)にも設定例があります。
|
||||
|
||||
## テーマパラメーター
|
||||
|
||||
Congoはテーマの機能を制御する多数の設定パラメーターを提供します。下の表は `config/_default/params.toml` ファイルで利用可能なパラメーターの概要です。
|
||||
|
||||
パラメーターの多くは、フロントマターで指定することで、記事ごとに上書きすることができます。詳しくは、[フロントマター]({{< ref "front-matter" >}})セクションを参照してください。
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|Name|Default|Description|
|
||||
|---|---|---|
|
||||
|`colorScheme`|`"congo"`|使用する配色。有効な値は `congo` (デフォルト), `avocado`, `cherry`, `fire`, `ocean`, `sapphire`, `slate` です。詳しくは [カラースキーム]({{< ref "getting-started#カラースキーム" >}})セクションを参照してください。|
|
||||
|`defaultAppearance`|`"light"`|デフォルトのテーマ外観、 `light` または `dark` のいずれか。|
|
||||
|`autoSwitchAppearance`|`true`|テーマの外観を訪問者のオペレーティングシステムの設定に基づいて自動的に切り替えるかどうか。常に `defaultAppearance` を使うようにするには `false` を設定します。|
|
||||
|`enableSearch`|`false`|サイト内検索を有効にするかどうか。検索機能を有効にするには `true` を設定します。検索機能は、[サイト設定](#サイト設定)の `outputs.home` が正しく設定されているかどうかに依存することに注意してください。|
|
||||
|`enableCodeCopy`|`false`|`<code>` ブロックに対してクリップボードへのコピーボタンを有効にするかどうか。 `highlight.noClasses` が `false` に設定されていなければ、コードコピーは正しく機能しません。[その他の設定ファイル](#その他の設定ファイル)については以下を参照してください。|
|
||||
|`enableImageLazyLoading`|`true`|ブラウザが遅延ロードするように画像をマークするかどうか。|
|
||||
|`robots`|_Not set_|ロボットがあなたのサイトをどのように扱うべきかを示す文字列。設定された場合、 `<head>` に出力されます。有効な値については[Googleのドキュメント](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives)を参照してください。|
|
||||
|`fingerprintAlgorithm`|`"sha256"`|`assets` にフィンガープリントを行う際のハッシュアルゴリズム。有効なオプションは `md5`、`sha256`、`sha384` および `sha512` です。|
|
||||
|`header.layout`|`"basic"`|ヘッダーとメニューのレイアウト。有効な値は `basic`、`hamburger`、`hybrid`または`custom`です。 `custom` に設定した場合は、 `/layouts/partials/header/custom.html` ファイルを作成して独自のレイアウトを指定する必要があります。|
|
||||
|`header.logo`|_Not set_|`assets/` 内のロゴファイルへの相対パス。ロゴファイルは2倍の解像度で提供され、任意の画像サイズに対応している必要があります。|
|
||||
|`header.logoDark`|_Not set_|`dark` モード時に使用されるロゴファイルへの相対パス。|
|
||||
|`header.showTitle`|`true`|サイトのタイトルをヘッダーに表示するかどうか。|
|
||||
|`footer.showCopyright`|`true`|サイトフッターにコピーライト文字列を表示するかどうか。[言語と国際化](#言語と国際化)の `copyright` パラメーターを使って文字列自体をカスタマイズできます。|
|
||||
|`footer.showThemeAttribution`|`true`|"Powered by Hugo & Congo" といった帰属表示をフッターに表示するかどうか。この表示を無効にする場合は、サイト上の他の場所（例えば、アバウトページなど）でテーマの帰属を表示することを検討してください。|
|
||||
|`footer.showAppearanceSwitcher`|`false`|フッターに外観スイッチャーを表示するかどうか。訪問者の設定を保持するためにブラウザのローカルストレージが使用されます。|
|
||||
|`footer.showScrollToTop`|`true`|`true` に設定すると、最上部にスクロールする矢印が表示されます。|
|
||||
|`homepage.layout`|`"page"`|ホームページのレイアウト。有効な値は `page`, `profile` または `custom` です。 `custom` に設定した場合は、 `/layouts/partials/home/custom.html` ファイルを作成して、独自のレイアウトを指定する必要があります。詳しくは[ホームページレイアウト]({{< ref "homepage-layout" >}})セクションを参照してください。|
|
||||
|`homepage.showRecent`|`false`|ホームページに最近の記事リストを表示するかどうか。|
|
||||
|`homepage.recentLimit`|`5`|`homepage.showRecent` が `true` の場合に表示する最近の記事の最大数。|
|
||||
|`article.showDate`|`true`|記事が作成された日付を表示するかどうか。|
|
||||
|`article.showDateUpdated`|`false`|記事が更新された日付を表示するかどうか。|
|
||||
|`article.showAuthor`|`true`|記事フッターに著者欄を表示するかどうか。|
|
||||
|`article.showBreadcrumbs`|`false`|記事のヘッダーにパンくずリストを表示するかどうか。|
|
||||
|`article.showDraftLabel`|`true`|`--buildDrafts` でビルドしたときに、記事の横に下書きインジケータを表示するかどうか。|
|
||||
|`article.showEdit`|`false`|記事の内容を編集するためのリンクを表示するかどうか。|
|
||||
|`article.editURL`|_Not set_|`article.showEdit` がアクティブな場合の編集リンクのURL。|
|
||||
|`article.editAppendPath`|`true`|`article.editURL`で設定されたURLに現在の記事へのパスを追加するかどうか。|
|
||||
|`article.showHeadingAnchors`|`true`|見出しアンカーリンクを記事内の見出しと一緒に表示するかどうか。|
|
||||
|`article.showPagination`|`true`|記事のフッターに次/前の記事リンクを表示するかどうか。|
|
||||
|`article.invertPagination`|`false`|次の記事/前の記事リンクの向きを反転させるかどうか。|
|
||||
|`article.showReadingTime`|`true`|記事の予想読了時間を表示するかどうか。|
|
||||
|`article.showTableOfContents`|`false`|記事に目次を表示するかどうか。|
|
||||
|`article.showTaxonomies`|`false`|この記事に関連するTaxonomiesを表示するかどうか。|
|
||||
|`article.showWordCount`|`false`|記事の単語数を表示するかどうか。|
|
||||
|`article.showComments`|`false`|[コメント]({{< ref "partials#コメント" >}})を記事フッターの後に含めるかどうか。|
|
||||
|`article.sharingLinks`|_Not set_|各記事の最後に共有リンクを表示するかどうか。 `false` にすると共有リンクは表示されません。|
|
||||
|`list.showBreadcrumbs`|`false`|リストページのヘッダーにパンくずリストを表示するかどうか。|
|
||||
|`list.showTableOfContents`|`false`|リストページに目次を表示するかどうか。|
|
||||
|`list.showTaxonomies`|`false`|リストページに関連するTaxonomiesを表示するかどうか。|
|
||||
|`list.showSummary`|`false`|リストページに記事の要約を表示するかどうか。もし[フロントマター]({{< ref "front-matter" >}})で要約が提供されていない場合、[サイト設定](#サイト設定)の `summaryLength` パラメーターを使って要約が自動生成されます。|
|
||||
|`list.groupByYear`|`true`|リストページで記事を年ごとにグループ化するかどうか。|
|
||||
|`list.paginationWidth`|`1`|リストページを切り詰める際に、現在のページの両側にいくつのページネーションリンクを出力するか。 `1` の場合、現在のページの両側に1つのリンクを出力します。 _最初のページ_ と _最後のページ_ へのリンクは常に表示され、この値に追加されます。|
|
||||
|`sitemap.excludedKinds`|`["taxonomy", "term"]`|生成される `/sitemap.xml` から除外されるべきコンテンツの種類。許容される値については[Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds)を参照してください。|
|
||||
|`taxonomy.showTermCount`|`true`|TaxonomiesのリストにTermごとの記事数を表示するかどうか。|
|
||||
|`fathomAnalytics.site`|_Not set_|Fathom Analyticsによって生成されたウェブサイトのサイトコード。詳細は[アナリティクス]({{< ref "partials#アナリティクス" >}})を参照してください。|
|
||||
|`fathomAnalytics.domain`|_Not set_|Fathom Analyticsでカスタムドメインを使用している場合、カスタムドメインから`script.js`を提供するためにここに指定します。|
|
||||
|`verification.google`|_Not set_|サイトのメタデータに含めるGoogleが提供するサイト検証文字列。|
|
||||
|`verification.bing`|_Not set_|サイトのメタデータに含めるBingが提供するサイト検証文字列。|
|
||||
|`verification.pinterest`|_Not set_|サイトのメタデータに含めるPinterestが提供するサイト検証文字列。|
|
||||
|`verification.yandex`|_Not set_|サイトのメタデータに含めるYandexが提供するサイト検証文字列。|
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## その他の設定ファイル
|
||||
|
||||
このテーマには `markup.toml` 設定ファイルも含まれています。このファイルにはいくつかの重要なパラメータが含まれており、Congoで構築されたサイトを生成するためにHugoが正しく設定されるようにします。
|
||||
|
||||
このファイルがconfigディレクトリに存在し、必要な値が設定されていることを常に確認してください。これを行わないと、特定の機能が正しく動作しなかったり、意図しない動作になったりする可能性があります。
|
||||
|
|
@ -89,14 +89,12 @@ The default file can be used as a template to create additional languages, or re
|
|||
<!-- prettier-ignore-start -->
|
||||
|Name|Default|Description|
|
||||
|---|---|---|
|
||||
|`languageCode`|`"en"`|The Hugo language code for this file. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-au`) and should match the language code in the filename. Hugo expects this value to always be in lowercase. For proper HTML compliance, set the `params.isoCode` parameter which is case-sensitive.|
|
||||
|`languageCode`|`"en"`|The Hugo language code for this file. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`) and should match the language code in the filename.|
|
||||
|`languageName`|`"English"`|The name of the language.|
|
||||
|`languageDirection`|`"ltr"`|Whether or not this is an RTL language. Set to `"rtl"` to reflow content from right-to-left. Congo fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.|
|
||||
|`weight`|`1`|The weight determines the order of languages when building multilingual sites.|
|
||||
|`title`|`"Congo"`|The title of the website. This will be displayed in the site header and footer.|
|
||||
|`copyright`|_Not set_|A Markdown string containing the copyright message to be displayed in the site footer. If none is provided, Congo will automatically generate a copyright string using the site `title`.|
|
||||
|`params.isoCode`|`"en"`|The ISO language code for HTML metadata purposes. It can be a top-level language (ie. `en`) or a sub-variant (ie. `en-AU`).|
|
||||
|`params.displayName`|`"EN"`|The name used when the language appears on the website.|
|
||||
|`params.rtl`|`false`|Whether or not this is a RTL language. Set to `true` to reflow content from right-to-left. Congo fully supports using RTL and LTR languages at the same time and will dynamically adjust to both.|
|
||||
|`params.dateFormat`|`"2 January 2006"`|How dates are formatted in this language. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.|
|
||||
|`params.mainSections`|_Not set_|The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.|
|
||||
|`params.description`|_Not set_|The website description. This will be used in the site metadata.|
|
||||
|
|
@ -129,7 +127,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
|
|||
|`autoSwitchAppearance`|`true`|Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.|
|
||||
|`enableSearch`|`false`|Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.|
|
||||
|`enableCodeCopy`|`false`|Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below.|
|
||||
|`enableImageLazyLoading`|`true`|Whether images should be marked for lazy loading by the broswer.|
|
||||
|`enableImageLazyLoading`|`true`|Whether images should be marked for lazy loading by the browser.|
|
||||
|`robots`|_Not set_|String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.|
|
||||
|`fingerprintAlgorithm`|`"sha256"`|String that indicates which hashing algorithm is used when fingerprinting assets. Valid options include `md5`, `sha256`, `sha384` and `sha512`.|
|
||||
|`header.layout`|`"basic"`|The layout of the page header and menu. Valid values are `basic`, `hamburger`, `hybrid` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/header/custom.html` file.|
|
||||
|
|
@ -170,6 +168,9 @@ Many of the article defaults here can be overridden on a per article basis by sp
|
|||
|`taxonomy.showTermCount`|`true`|Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.|
|
||||
|`fathomAnalytics.site`|_Not set_|The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details.|
|
||||
|`fathomAnalytics.domain`|_Not set_|If using a custom domain with Fathom Analytics, provide it here to serve `script.js` from the custom domain.|
|
||||
|`plausibleAnalytics.domain`|_Not set_|Enter the domain of the website you want to track. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details.|
|
||||
|`plausibleAnalytics.event`|_Not set_|Plausible api event proxied URL. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details.|
|
||||
|`plausibleAnalytics.script`|_Not set_|Plausible analysis script proxied URL. Refer to the [Analytics docs]({{< ref "partials#analytics" >}}) for more details.|
|
||||
|`verification.google`|_Not set_|The site verification string provided by Google to be included in the site metadata.|
|
||||
|`verification.bing`|_Not set_|The site verification string provided by Bing to be included in the site metadata.|
|
||||
|`verification.pinterest`|_Not set_|The site verification string provided by Pinterest to be included in the site metadata.|
|
||||
|
|
@ -180,4 +181,4 @@ Many of the article defaults here can be overridden on a per article basis by sp
|
|||
|
||||
The theme also includes a `markup.toml` configuration file. This file contains some important parameters that ensure that Hugo is correctly configured to generate sites built with Congo.
|
||||
|
||||
Always ensure this file is present in the config directory and that the required values are set. Failure to do so may cause certain features to fucntion incorrectly and could result in unintended behaviour.
|
||||
Always ensure this file is present in the config directory and that the required values are set. Failure to do so may cause certain features to function incorrectly and could result in unintended behaviour.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,317 @@
|
|||
---
|
||||
title: "コンテンツの例"
|
||||
date: 2020-08-09
|
||||
draft: false
|
||||
description: "コンテンツがどのように作成され、構成されるべきかを示すいくつかの例"
|
||||
summary: "コンテンツがどのように構成されるべきかを示すいくつかの例です。"
|
||||
slug: "content-examples"
|
||||
tags: ["content", "example"]
|
||||
---
|
||||
|
||||
ドキュメントを順番に読んできたのなら、Congoで利用可能な機能と設定についてはすべて知っているはずです。このページでは、それらをまとめて、あなたがHugoプロジェクトで使いたくなるような例をいくつか紹介します。
|
||||
|
||||
{{< alert >}}
|
||||
**ヒント:** もしあなたがHugoに慣れていないのであれば、[Hugo docs](https://gohugo.io/content-management/page-bundles/)をチェックし、ページバンドルとリソースの概念について学んでください。
|
||||
{{< /alert >}}
|
||||
|
||||
このページで紹介する例はさまざまなシナリオに適用できますが、個々のプロジェクトで特定のコンテンツ項目をフォーマットする方法について、いくつかのアイデアが得られることを願っています。
|
||||
|
||||
## ブランチページ
|
||||
|
||||
Hugoのブランチページバンドルは、ホームページ、セクションリスト、Taxonomyページのような項目をカバーしています。ブランチバンドルについて覚えておくべき重要なことは、このコンテンツタイプのファイル名は **_index.md`** であるということです。
|
||||
|
||||
Congoはブランチページで指定されたフロントマターを尊重し、デフォルト設定を上書きします。例えば、ブランチページで `title` パラメーターを設定すると、ページタイトルを上書きすることができます。
|
||||
|
||||
### ホームページ
|
||||
|
||||
| | |
|
||||
| ------------ | -------------------- |
|
||||
| **Layout:** | `layouts/index.html` |
|
||||
| **Content:** | `content/_index.md` |
|
||||
|
||||
Congoのホームページは、ホームページレイアウト設定パラメーターによって包括的なデザインが制御されるという点で特別です。これについては[ホームページレイアウト]({{< ref "homepage-layout" >}})セクションで詳しく説明しています。
|
||||
|
||||
このページにカスタムコンテンツを追加したい場合は、 `content/_index.md` ファイルを作成するだけです。このファイルにあるものはすべてホームページに含まれます。
|
||||
|
||||
**例:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Congoへようこそ！"
|
||||
description: "これはホームページにコンテンツを追加するデモです"
|
||||
---
|
||||
私のウェブサイトへようこそ！立ち寄ってくれて本当に嬉しいです。
|
||||
```
|
||||
|
||||
_この例では、カスタムタイトルを設定し、ページ本文にいくつかの追加テキストを追加します。ショートコード、画像、リンクを含め、どのようなMarkdownフォーマットのテキストでも構いません。_
|
||||
|
||||
### リストページ
|
||||
|
||||
| | |
|
||||
| ------------ | ---------------------------- |
|
||||
| **Layout:** | `layouts/_default/list.html` |
|
||||
| **Content:** | `content/../_index.md` |
|
||||
|
||||
リストページは、セクション内のすべてのページをグループ化し、訪問者が各ページに到達するための方法を提供します。ブログやポートフォリオは、記事やプロジェクトをグループ化したリストページの例です。
|
||||
|
||||
リストページの作成は、 `content` 内にサブディレクトリを作成するのと同じくらい簡単です。例えば、"Projects"セクションを作成するには、 `content/projects/` を作成します。そして、プロジェクトごとにMarkdownファイルを作成します。
|
||||
|
||||
デフォルトではリストページが生成されますが、コンテンツをカスタマイズするために、この新しいディレクトリに`_index.md`ページも作成してください。
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── projects
|
||||
├── _index.md # /projects
|
||||
├── first-project.md # /projects/first-project
|
||||
└── another-project
|
||||
├── index.md # /projects/another-project
|
||||
└── project.jpg
|
||||
```
|
||||
|
||||
Hugoは、 `content/projects` 内のページのURLを適宜生成します。
|
||||
|
||||
ホームページと同じように、 `_index.md` ファイルのコンテンツは生成されたリストインデックスに出力されます。Congoはこのセクションのすべてのページをリストします。
|
||||
|
||||
**例:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Projects"
|
||||
description: "私のプロジェクトについて"
|
||||
cascade:
|
||||
showReadingTime: false
|
||||
---
|
||||
このセクションには、私が現在取り組んでいるすべてのプロジェクトが含まれています。
|
||||
```
|
||||
|
||||
_この例では、特別な `cascade` パラメーターを使って、このセクション内のサブページの読書時間を非表示にしています。こうすることで、どのプロジェクトページでも読書時間が表示されなくなります。これは、個々のページにデフォルトのテーマパラメーターを含めなくても、セクション全体のデフォルトのテーマパラメーターを上書きすることができる素晴らしい方法です。_
|
||||
|
||||
このサイトの[サンプル]({{< ref "samples" >}})はリストページの一例です。
|
||||
|
||||
### Taxonomyページ
|
||||
|
||||
| | |
|
||||
| ---------------- | -------------------------------- |
|
||||
| **List layout:** | `layouts/_default/taxonomy.html` |
|
||||
| **Term layout:** | `layouts/_default/term.html` |
|
||||
| **Content:** | `content/../_index.md` |
|
||||
|
||||
Taxonomyページには、TaxonomyのリストとTaxonomyのTermという2つの形式があります。リストはTaxonomy内の各Termのリストを表示し、Termは指定されたTermに関連するページのリストを表示します。
|
||||
|
||||
Termは少し混乱しやすいので、`animals` というTaxonomyを使って例を探ってみましょう。
|
||||
|
||||
まず、HugoでTaxonomyを使うには設定が必要です。 `config/_default/taxonomies.toml` に設定ファイルを作成し、Taxonomyの名前を定義します。
|
||||
|
||||
```toml
|
||||
# config/_default/taxonomies.toml
|
||||
|
||||
animal = "animals"
|
||||
```
|
||||
|
||||
HugoはTaxonomyを単数形と複数形でリストすることを想定しているので、単数形の `animal` と複数形の `animals` を追加して、例のTaxonomyを作成します。
|
||||
|
||||
これで `animals` Taxonomyが存在することになったので、個々のコンテンツに追加する必要があります。フロントマターに挿入するだけです:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "ライオンの巣へ"
|
||||
description: "今週はライオンについて学びます"
|
||||
animals: ["lion", "cat"]
|
||||
---
|
||||
```
|
||||
|
||||
これで `animals` Taxonomyの中に `lion` と `cat` というTermができたことになります。
|
||||
|
||||
この時点では明らかではありませんが、Hugoはこの新しいTaxonomyリストとTermのページを生成します。デフォルトでは、リストは `/animals/` に、Termページは `/animals/lion/` と `/animals/cat/` になります。
|
||||
|
||||
リストページはTaxonomyに含まれるすべてのTermをリストアップします。この例では、 `/animals/` に移動すると、 `lion` と `cat` のリンクがあるページが表示され、訪問者はそれぞれのTermページに移動できます。
|
||||
|
||||
TermページはそのTermが含まれるすべてのページをリストアップします。これらのTermリストは基本的に通常の[リストページ](#リストページ)とほとんど同じように動作します。
|
||||
|
||||
Taxonomyページにカスタムコンテンツを追加するには、Taxonomy名をサブディレクトリとして、 `content` 内に `_index.md` ファイルを作成するだけです。
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── animals
|
||||
├── _index.md # /animals
|
||||
└── lion
|
||||
└── _index.md # /animals/lion
|
||||
```
|
||||
|
||||
これらのコンテンツファイルにあるものは生成されたTaxonomyページに配置されます。他のコンテンツと同じように、フロントマターはデフォルトを上書きするために使うことができます。このように、 `lion` という名前のタグがあっても、 `title` を"Lion"に上書きすることができます。
|
||||
|
||||
これが実際にどのように見えるかは、このサイトの[Tags]({{< ref "tags" >}})をチェックしてください。
|
||||
|
||||
## リーフページ
|
||||
|
||||
| | |
|
||||
| ------------------------- | ------------------------------- |
|
||||
| **Layout:** | `layouts/_default/single.html` |
|
||||
| **Content (standalone):** | `content/../page-name.md` |
|
||||
| **Content (bundled):** | `content/../page-name/index.md` |
|
||||
|
||||
Hugoのリーフページは基本的に標準的なコンテンツページです。サブページを含まないページとして定義されます。例えば、アバウトページや、ウェブサイトのブログセクションにある個々のブログ記事などです。
|
||||
|
||||
リーフページについて覚えておくべき最も重要なことは、ブランチページとは異なり、リーフページはアンダースコアなしで `index.md` と名前をつけるべきということです。リーフページはまた、セクションのトップレベルにまとめて一意な名前をつけることができるという点で特別です。
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── blog
|
||||
├── first-post.md # /blog/first-post
|
||||
├── second-post.md # /blog/second-post
|
||||
└── third-post
|
||||
├── index.md # /blog/third-post
|
||||
└── image.jpg
|
||||
```
|
||||
|
||||
画像などをページに含める場合、ページバンドルを使用する必要があります。ページバンドルは `index.md` ファイルを含むサブディレクトリを使って作成します。ショートコードやその他のテーマロジックの多くは、リソースがページと一緒にバンドルされていることを前提としているので、コンテンツと一緒に独自のディレクトリにグループ化することが重要です。
|
||||
|
||||
**例:**
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "初めてのブログ投稿"
|
||||
date: 2022-01-25
|
||||
description: "私のブログへようこそ！"
|
||||
summary: "私について、そして私がなぜこのブログを始めたのか、もっと知ってください。"
|
||||
tags: ["welcome", "new", "about", "first"]
|
||||
---
|
||||
_これ_ が私のブログ記事の内容です。
|
||||
```
|
||||
|
||||
リーフページには様々な[フロントマター]({{< ref "front-matter" >}})パラメーターがあり、それらを使って表示方法をカスタマイズすることができます。
|
||||
|
||||
### 外部リンク
|
||||
|
||||
Congoには、外部ページへのリンクを記事リストに表示できる特別な機能があります。これは、Mediumのようなサードパーティのウェブサイトや研究論文にコンテンツがあり、Hugoのサイトにコンテンツを複製することなくリンクを張りたい場合に便利です。
|
||||
|
||||
外部リンク記事を作成するには、特別なフロントマターを設定する必要があります:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "私のMediumの記事"
|
||||
date: 2022-01-25
|
||||
externalUrl: "https://medium.com/"
|
||||
summary: "私はMediumに記事を書きました。"
|
||||
showReadingTime: false
|
||||
_build:
|
||||
render: "false"
|
||||
list: "local"
|
||||
---
|
||||
```
|
||||
|
||||
`title` や `summary` のような通常のフロントマターパラメーターとともに、 `externalUrl` パラメーターはこの記事が普通の記事ではないことを伝えるために使われます。ここで指定されたURLは、訪問者がこの記事を選択したときに誘導される場所になります。
|
||||
|
||||
さらに、このコンテンツの通常のページが生成されないように（外部URLにリンクしているので、ページを生成する意味がありません！）、Hugoの特別なフロントマターパラメーターである `_build` を使用しています。
|
||||
|
||||
テーマには、このような外部リンク記事を簡単に生成するためのアーキタイプが含まれています。新しいコンテンツを作るときに `-k external` を指定するだけです。
|
||||
|
||||
```shell
|
||||
hugo new -k external posts/my-post.md
|
||||
```
|
||||
|
||||
### シンプルページ
|
||||
|
||||
| | |
|
||||
| ----------------- | ------------------------------ |
|
||||
| **Layout:** | `layouts/_default/simple.html` |
|
||||
| **Front Matter:** | `layout: "simple"` |
|
||||
|
||||
Congoにはシンプルなページのための特別なレイアウトも含まれています。シンプル・レイアウトは全幅のテンプレートで、特別なテーマ機能なしにMarkdownコンテンツをページに配置するだけです。
|
||||
|
||||
シンプルレイアウトで利用できる唯一の機能はパンくずリストと共有リンクです。これらの動作は通常のページと同様に[フロントマター]({{< ref "front-matter" >}})パラメーターを使って制御することができます。
|
||||
|
||||
特定のページでシンプルレイアウトを有効にするには、 `layout` フロントマター変数に `"simple"` という値を追加します:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "ランディングページ"
|
||||
date: 2022-03-08
|
||||
layout: "simple"
|
||||
---
|
||||
このページのコンテンツは全幅になりました。
|
||||
```
|
||||
|
||||
## カスタムレイアウト
|
||||
|
||||
Hugoの利点のひとつは、サイト全体や個々のセクション、ページのカスタムレイアウトを簡単に作成できることです。
|
||||
|
||||
レイアウトは通常のHugoのテンプレート規則に従います。詳細は[Hugo公式ドキュメント](https://gohugo.io/templates/introduction/)をご覧ください。
|
||||
|
||||
### デフォルトレイアウトのオーバーライド
|
||||
|
||||
上で説明した各コンテンツタイプには、各タイプのページを生成するために使用されるレイアウトファイルが記載されています。このファイルをローカルプロジェクトに作成すると、テーマテンプレートを上書きするので、ウェブサイトのデフォルトスタイルをカスタマイズするために使用することができます。
|
||||
|
||||
例えば、 `layouts/_default/single.html` ファイルを作成すれば、リーフページのレイアウトを完全にカスタマイズすることができます。
|
||||
|
||||
### カスタムセクションレイアウト
|
||||
|
||||
また、個々のコンテンツセクションのカスタムレイアウトを作成するのも簡単です。これは、特定のコンテンツを特定のスタイルで一覧表示するセクションを作りたい場合に便利です。
|
||||
|
||||
特殊なレイアウトでプロジェクトを一覧表示するカスタム「Projects」ページを作成する例を見てみましょう。
|
||||
|
||||
これを行うには、通常のHugoコンテンツルールを使用してコンテンツを構成し、プロジェクト用のセクションを作成します。さらに、コンテンツと同じディレクトリ名を使い、 `list.html` ファイルを追加して、プロジェクトセクション用の新しいレイアウトを作成します。
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
│ └── projects
|
||||
│ ├── _index.md
|
||||
│ ├── first-project.md
|
||||
│ └── second-project.md
|
||||
└── layouts
|
||||
└── projects
|
||||
└── list.html
|
||||
```
|
||||
|
||||
この `list.html` ファイルはデフォルトのリストテンプレートをオーバーライドします。このファイルを見る前に、まず個々のプロジェクトファイルを見てみましょう。
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Congo"
|
||||
date: 2021-08-11
|
||||
icon: "github"
|
||||
description: "Tailwind CSSで作られたHugoのテーマ"
|
||||
topics: ["Hugo", "Web", "Tailwind"]
|
||||
externalUrl: "https://github.com/jpanther/congo/"
|
||||
---
|
||||
```
|
||||
|
||||
_この例では、各プロジェクトにメタデータを割り当て、リストテンプレートで使用できるようにしています。ページのコンテンツはありませんが、それを含めることを妨げるものも何もありません。あなたのカスタムテンプレートなのですから！_
|
||||
|
||||
プロジェクトが定義されたので、各プロジェクトの詳細を出力するリストテンプレートを作成することができます。
|
||||
|
||||
```go
|
||||
{{ define "main" }}
|
||||
<section class="mt-8">
|
||||
{{ range .Pages }}
|
||||
<article class="pb-6">
|
||||
<a class="flex" href="{{ .Params.externalUrl }}">
|
||||
<div class="mr-3 text-3xl text-neutral-300">
|
||||
<span class="relative inline-block align-text-bottom">
|
||||
{{ partial "icon.html" .Params.icon }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="flex text-xl font-semibold">
|
||||
{{ .Title }}
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-400">
|
||||
{{ .Description }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
{{ end }}
|
||||
</section>
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
これは非常にわかりやすい例ですが、このセクションの各ページ（つまり各プロジェクト）を順に見ていき、各プロジェクトへのHTMLリンクをアイコンと一緒に出力していることがわかります。各プロジェクトのフロントマターのメタデータは、どの情報を表示するかを決定するために使われます。
|
||||
|
||||
関連するスタイルとクラスが利用可能であることを確認する必要があり、Tailwind CSSを再コンパイルする必要があるかもしれないことを覚えておいてください。これについては、[高度なカスタマイズ]({{< ref "advanced-customisation" >}})セクションで詳しく説明します。
|
||||
|
||||
このようなカスタムテンプレートを作成する場合、デフォルトのCongoテンプレートがどのように動作するかを見て、それをガイドとして使用するのが最も簡単です。[Hugo docs](https://gohugo.io/templates/introduction/)はテンプレートの作成についてもっと学ぶための素晴らしいリソースです。
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
title: "フロントマター"
|
||||
date: 2020-08-12
|
||||
draft: false
|
||||
description: "Congoにおけるフロントマターの設定について"
|
||||
summary: "CongoはほとんどのHugoのデフォルト設定をサポートしつつ、個々の記事の表示をカスタマイズするための多くのフロントマターを追加しています。"
|
||||
slug: "front-matter"
|
||||
tags: ["front matter", "config", "docs"]
|
||||
---
|
||||
|
||||
[Hugoのフロントマターパラメーター](https://gohugo.io/content-management/front-matter/#front-matter-variables)に加えて、Congoは個々の記事の表示をカスタマイズするためのオプションを追加しています。利用可能なフロントマターのパラメーターを以下に示します。
|
||||
|
||||
フロントマターパラメーターのデフォルト値はテーマの[基本設定]({{< ref "configuration" >}})から継承されるので、デフォルトを上書きしたい場合にのみフロントマターでこれらのパラメーターを指定する必要があります。
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|Name|Default|Description|
|
||||
|---|---|---|
|
||||
|`title`|_Not set_|記事の名前。|
|
||||
|`description`|_Not set_|記事の説明文。HTMLメタデータで使用されます。|
|
||||
|`feature`|`"*feature*"`|この記事の `feature` 画像のファイル名にマッチするテキストパターン。|
|
||||
|`featureAlt`|`""`|`feature` 画像の代替テキスト説明。|
|
||||
|`cover`|`"*cover*"`|この記事の `cover` 画像のファイル名にマッチするテキストパターン。|
|
||||
|`coverAlt`|`featureAlt`|`cover` 画像の代替テキスト説明。|
|
||||
|`coverCaption`|_Not set_|`cover` 画像の下に表示されるキャプションテキスト。|
|
||||
|`thumbnail`|`"*thumb*"`_|この記事の `thumb` 画像のファイル名にマッチするテキストパターン。|
|
||||
|`thumbnailAlt`|`featureAlt`|`thumb` 画像の代替テキスト説明。|
|
||||
|`externalUrl`|_Not set_|この記事が第三者のウェブサイトで公開されている場合のURL。URLを提供することで、コンテンツページが生成されるのを防ぎ、この記事への参照はすべて第三者のウェブサイトに直接リンクされます。|
|
||||
|`editURL`|`article.editURL`|`showEdit` がアクティブな場合の編集リンクのURL。|
|
||||
|`editAppendPath`|`article.editAppendPath`|`editURL`で設定されたURLに現在の記事へのパスを追加するかどうか。|
|
||||
|`groupByYear`|`list.groupByYear`|一覧ページで記事を年ごとにグループ化するかどうか。|
|
||||
|`keywords`|_Not set_|記事のメタデータに含めるべきキーワード。|
|
||||
|`menu`|_Not set_|値が指定されると、指定されたメニューにこの記事へのリンクが表示されます。有効な値は `main` または `footer` です。|
|
||||
|`robots`|_Not set_|ロボットがこの記事をどのように扱うべきかを示す文字列。設定された場合、 `<head>` に出力されます。有効な値については[Googleのドキュメント](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives)を参照してください。|
|
||||
|`sharingLinks`|`article.sharingLinks`|この記事の最後にどの共有リンクを表示するか。 `false` に設定すると共有リンクは表示されません。|
|
||||
|`showAuthor`|`article.showAuthor`|記事フッターに著者欄を表示するかどうか。|
|
||||
|`showBreadcrumbs`|`article.showBreadcrumbs` or `list.showBreadcrumbs`|パンくずリストを記事のヘッダーに表示するか、リストのヘッダーに表示するか。|
|
||||
|`showDate`|`article.showDate`|記事が作成された日付を表示するかどうか。日付は `date` パラメーターで設定します。|
|
||||
|`showDateUpdated`|`article.showDateUpdated`|記事が更新された日付を表示するかどうか。日付は `lastmod` パラメーターで設定します。|
|
||||
|`showEdit`|`article.showEdit`|記事の内容を編集するためのリンクを表示するかどうか。|
|
||||
|`showHeadingAnchors`|`article.showHeadingAnchors`|見出しアンカーリンクを記事内の見出しと一緒に表示するかどうか。|
|
||||
|`showPagination`|`article.showPagination`|記事のフッターに次/前の記事リンクを表示するかどうか。|
|
||||
|`invertPagination`|`article.invertPagination`|次の記事/前の記事リンクの向きを反転させるかどうか。|
|
||||
|`showReadingTime`|`article.showReadingTime`|記事の予想読了時間を表示するかどうか。|
|
||||
|`showTaxonomies`|`article.showTaxonomies`|この記事に関連するTaxonomiesを表示するかどうか。|
|
||||
|`showTableOfContents`|`article.showTableOfContents`|この記事に目次を表示するかどうか。|
|
||||
|`showWordCount`|`article.showWordCount`|記事の単語数を表示するかどうか。|
|
||||
|`showComments`|`article.showComments`|[コメント]({{< ref "partials#コメント" >}})を記事フッターの後に含めるかどうか。|
|
||||
|`showSummary`|`list.showSummary`|リストページに記事の要約を表示するかどうか。|
|
||||
|`summary`|Auto generated using `summaryLength` (see [site configuration]({{< ref "configuration#site-configuration" >}}))|`showSummary` が有効な場合、この記事の要約として使用されるMarkdown文字列。|
|
||||
|`xml`|`true` unless excluded by `sitemap.excludedKinds`|この記事が `/sitemap.xml` ファイルに含まれるかどうか。|
|
||||
<!-- prettier-ignore-end -->
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
---
|
||||
title: "はじめに"
|
||||
date: 2020-08-15
|
||||
draft: false
|
||||
description: "Congoを使い始める方法"
|
||||
summary: "このセクションでは、すでにCongoをインストールし、カラースキーム、メニュー、コンテンツ構造の選択など基本的な設定作業を行う準備ができていることを前提としています。"
|
||||
slug: "getting-started"
|
||||
tags: ["installation", "docs"]
|
||||
---
|
||||
|
||||
{{< alert >}}
|
||||
このセクションはあなたが既に[インストール]({{< ref "docs/installation" >}})を終えていることを前提としています。
|
||||
{{< /alert >}}
|
||||
|
||||
Congoに同梱されている設定ファイルには、テーマが認識できるすべての設定が含まれおり、デフォルトでは多くはコメントアウトされていますが、特定の機能を有効にしたり変更したりするには、コメントアウトを解除するだけです。
|
||||
|
||||
## 基本設定
|
||||
|
||||
コンテンツを作成する前に、新規インストール用に設定すべきことがいくつかあります。まず `config.toml` ファイルで、`baseURL` と `languageCode` パラメーターを設定し、 `languageCode` には、コンテンツの作成に使用するメインの言語を設定しましょう。
|
||||
|
||||
```toml
|
||||
# config/_default/config.toml
|
||||
|
||||
baseURL = "https://your_domain.com/"
|
||||
languageCode = "en"
|
||||
```
|
||||
|
||||
次のステップは言語設定です。Congoは多言語をサポートしていますが、今はメインの言語だけを設定してください。
|
||||
|
||||
`config/_default` の中にある `languages.en.toml` ファイルを探してください。メイン言語が英語の場合は、このファイルをそのまま使うことができます。そうでない場合は、ファイル名に正しい言語コードが含まれるようにファイル名を変更してください。例えばフランス語の場合は、 `languages.fr.toml` にファイル名を変更します。
|
||||
|
||||
{{< alert >}}
|
||||
言語設定ファイル名の言語コードは、 `config.toml` の `languageCode` 設定と一致している必要があります。
|
||||
{{< /alert >}}
|
||||
|
||||
```toml
|
||||
# config/_default/languages.en.toml
|
||||
|
||||
title = "My awesome website"
|
||||
|
||||
[author]
|
||||
name = "My name"
|
||||
image = "img/author.jpg"
|
||||
headline = "A generally awesome human"
|
||||
bio = "A little bit about me"
|
||||
links = [
|
||||
{ twitter = "https://twitter.com/username" }
|
||||
]
|
||||
```
|
||||
|
||||
`[author]` はウェブサイト上でどのように著者情報を表示するかを決定します。画像はサイトの `assets/` に置きましょう。リンクはリストの記述順に沿って表示されます。
|
||||
|
||||
各設定に関する詳細情報は、[設定]({{< ref "configuration" >}})セクションで説明されています。
|
||||
|
||||
## カラースキーム
|
||||
|
||||
Congoにはいくつかのカラースキームが同梱されています。配色を変更するには、`colorScheme` パラメーターを設定するだけです。有効なオプションは `congo` （デフォルト）、 `avocado` 、 `cherry` 、 `fire` 、 `ocean` 、 `sapphire` 、 `slate` です。
|
||||
|
||||
{{< alert >}}
|
||||
`colourScheme` の値は小文字で指定します。
|
||||
{{< /alert >}}
|
||||
|
||||
```toml
|
||||
# config/_default/params.toml
|
||||
|
||||
colorScheme = "congo"
|
||||
```
|
||||
|
||||
Congoは、テーマ全体で使用される3色のパレットを定義しています。それぞれのメインカラーには、[Tailwind](https://tailwindcss.com/docs/customizing-colors#color-palette-reference)に含まれる10色の濃淡が含まれています。
|
||||
|
||||
#### Congo (default)
|
||||
|
||||
{{< swatches "#71717a" "#8b5cf6" "#d946ef" >}}
|
||||
|
||||
#### Avocado
|
||||
|
||||
{{< swatches "#78716c" "#84cc16" "#10b981" >}}
|
||||
|
||||
#### Cherry
|
||||
|
||||
{{< swatches "#737373" "#f43f5e" "#22c55e" >}}
|
||||
|
||||
#### Fire
|
||||
|
||||
{{< swatches "#78716c" "#f97316" "#f43f5e" >}}
|
||||
|
||||
#### Ocean
|
||||
|
||||
{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}
|
||||
|
||||
#### Sapphire
|
||||
|
||||
{{< swatches "#64748b" "#6366f1" "#ec4899" >}}
|
||||
|
||||
#### Slate
|
||||
|
||||
{{< swatches "#6B7280" "#64748b" "#6B7280" >}}
|
||||
|
||||
独自の配色を作成することもできます。詳しくは [高度な設定]({{< ref "advanced-customisation#colour-schemes" >}})セクションを参照してください。
|
||||
|
||||
## コンテンツの整理
|
||||
|
||||
Congoは特定のコンテンツタイプを強制しません。そのため、自由にコンテンツを定義することができます。静的なサイトには_pages_、ブログには_posts_、ポートフォリオには_projects_がいいかもしれません。
|
||||
|
||||
### ディレクトリ構造
|
||||
|
||||
基本的なCongoプロジェクトの概要を説明します。すべてのコンテンツは `content` に置かれます:
|
||||
|
||||
```shell
|
||||
.
|
||||
├── assets
|
||||
│ └── img
|
||||
│ └── author.jpg
|
||||
├── config
|
||||
│ └── _default
|
||||
├── content
|
||||
│ ├── _index.md
|
||||
│ ├── about.md
|
||||
│ └── posts
|
||||
│ ├── _index.md
|
||||
│ ├── first-post.md
|
||||
│ └── another-post
|
||||
│ ├── aardvark.jpg
|
||||
│ └── index.md
|
||||
└── themes
|
||||
└── congo
|
||||
```
|
||||
|
||||
{{< alert >}}
|
||||
ここで注意しなければならないのは、コンテンツディレクトリの中で、通常の記事ページは `index.md` という名前になり、リストページは `_index.md` という名前になるということです。記事に付随するアセットはインデックスファイルと一緒にサブディレクトリに置く必要があります。
|
||||
{{< /alert >}}
|
||||
|
||||
このテーマはHugoのページバンドルを最大限に活用するように設計されているため、Hugoがどのようにコンテンツを整理することを想定しているかをしっかりと把握することが重要です。詳しくは[Hugo公式ドキュメント](https://gohugo.io/content-management/organization/)を読んでください。
|
||||
|
||||
### feature、cover、そしてthumb(nail)
|
||||
|
||||
Congoは、記事リストと個々の記事ページの上部に画像を表示できます。サポートされている画像には3つのタイプがあり、それぞれに使用例があります: `feature` 、 `cover` 、 `thumb` です。
|
||||
|
||||
以下の例では、 `first-post` の記事に `cover` と `thumb` を用意しています:
|
||||
|
||||
```shell
|
||||
.
|
||||
└── content
|
||||
└── posts
|
||||
├── _index.md
|
||||
└── first-post
|
||||
├── cover.jpg
|
||||
├── index.md
|
||||
└── thumb.jpg
|
||||
```
|
||||
|
||||
`thumb` 画像は記事のサムネイルとして記事リストで表示され、 `cover` 画像は個々の記事ページで記事内容の上部に表示されます。
|
||||
|
||||
|
||||
|
||||
{{< alert >}}
|
||||
パフォーマンスの観点から、 `thumb` 画像は自動的に4:3の比率にトリミング・リサイズされます。 `cover` 画像は内容に合わせて自動的にリサイズされますが、比率は問いません。
|
||||
{{< /alert >}}
|
||||
|
||||
The `feature` image is a special type, and when present, it will be used in place of _both_ the `thumb` and `cover` images. Feature images are also present in the article metadata, which is included when content is shared to third-party networks like Facebook and Twitter.
|
||||
`feature` 画像は特別で、存在する場合には `thumb` 画像と `cover` 画像の両方の代わりに使用されます。 `feature` 画像は記事のメタデータとして、FacebookやTwitterのようなサードパーティのネットワークにコンテンツが共有される場合にも含まれます。
|
||||
|
||||
Congoは記事画像をインテリジェントに検出し、自動的にあなたのサイトに追加します。フロントマターでそれらを指定する必要はなく、ページリソース内に適切な名前のファイルを配置するだけです。画像ファイル名のどこかに `feature` 、 `cover` 、 `thumb` という単語があれば、それがその目的で使用されます。
|
||||
|
||||
[例]({{< ref "samples" >}})には、これらの画像の例が多数掲載されています（また、[ソースコード](https://github.com/jpanther/congo/tree/dev/exampleSite/content/samples)を参照してファイル構造を確認することもできます）。
|
||||
|
||||
### Taxonomies
|
||||
|
||||
CongoはTaxonomiesに関しても柔軟です。 `tags` や `categories` を使ってコンテンツをグループ化したい人もいれば、 `topics` を使いたい人もいるでしょう。
|
||||
|
||||
Hugoはデフォルトで `posts` 、 `tags` 、 `categories` を使用するようになっています。しかし、これをカスタマイズしたい場合は、 `taxonomies.toml` 設定ファイルを作成することでカスタマイズできます:
|
||||
|
||||
```toml
|
||||
# config/_default/taxonomies.toml
|
||||
|
||||
topic = "topics"
|
||||
```
|
||||
|
||||
上記の例はデフォルトの _tags_ と _categories_ を _topics_ に置き換えます。詳細は、[Hugo Taxonomy docs](https://gohugo.io/content-management/taxonomies/)を参照してください。
|
||||
|
||||
When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below.
|
||||
|
||||
## メニュー
|
||||
|
||||
Congoには2つのメニューがあり、サイトの内容やレイアウトに合わせてカスタマイズすることができます。 `main` メニューはサイトのヘッダーに表示され、 `footer` メニューはページの一番下、著作権表示のすぐ上に表示されます。
|
||||
|
||||
Both menus are configured in the `menus.en.toml` file. Similarly to the languages config file, if you wish to use another language, rename this file and replace `en` with the language code you wish to use. Menu links will be sorted from lowest to highest `weight`, and then alphabetically by `name`.
|
||||
どちらのメニューも `menus.en.toml` ファイルで設定すします。 `menus.en.toml` ファイルは言語設定ファイルと同様に、他の言語を使いたい場合はファイル名を変更して使いたい言語コードに置き換えてください。メニューのリンクは `weight` の低いものから高いものへとソートされ、次にアルファベット順に `name` でソートされます。
|
||||
|
||||
```toml
|
||||
# config/_default/menus.en.toml
|
||||
|
||||
[[main]]
|
||||
name = "Blog"
|
||||
pageRef = "posts"
|
||||
weight = 10
|
||||
|
||||
[[main]]
|
||||
name = "Topics"
|
||||
pageRef = "topics"
|
||||
weight = 20
|
||||
|
||||
[[main]]
|
||||
name = "GitHub"
|
||||
url = "https://github.com/jpanther/congo"
|
||||
weight = 30
|
||||
[main.params]
|
||||
icon = "github"
|
||||
showName = false
|
||||
target = "_blank"
|
||||
|
||||
[[main]]
|
||||
identifier = "search"
|
||||
weight = 99
|
||||
[main.params]
|
||||
action = "search"
|
||||
icon = "search"
|
||||
|
||||
[[footer]]
|
||||
name = "Privacy"
|
||||
pageRef = "privacy"
|
||||
```
|
||||
|
||||
### 基本のリンク
|
||||
|
||||
`name` パラメーターはメニューリンクで使用するテキストを指定します。また、オプションでリンクのHTMLタイトル属性となる `title` を指定することもできます。
|
||||
|
||||
`pageRef` パラメーターを使うと、HugoのコンテンツページやTaxonomyを簡単に参照することができます。Hugoのコンテンツアイテムを参照するだけで、自動的に正しいリンクが作成されるので、メニューを設定する最も簡単な方法です。外部URLへのリンクには `url` パラメーターを使用します。
|
||||
|
||||
リンク内に `params` を指定することで、さらなるカスタマイズが可能です。 `icon` を追加したり、 `showName` でリンクテキストを切り替えたり、URLに `target` を設定したりすることができます。上記の例では、GitHubリンクはアイコンのみで表示され、リンクは新しいウィンドウで開きます。
|
||||
|
||||
### アクションリンク
|
||||
|
||||
There is a special case for creating menu items for links that take theme actions. These are denoted using the `action` parameter, and a value of the action the link should perform. Action links allow for all the same custom parameters as other links and can be styled with an icon or text name.
|
||||
特別なケースとして、アクションを実行するリンク項目を作成する場合があります。これらは `action` パラメーターと実行するアクションの値を使って指定します。アクションリンクでは基本のリンクと同じカスタムパラメーターを使用することができ、アイコンやテキスト名でスタイルを設定することもできます。
|
||||
|
||||
有効なテーマ・アクションは2つあります:
|
||||
|
||||
- `appearance` は外観を切り替えるリンクを作成します
|
||||
- `search` はサイト内検索を行うリンクを作成します
|
||||
|
||||
どちらのメニューも完全にオプションであり、必要なければコメントアウトすることができます。デフォルトとして提供されているテンプレートも参考にしてください。
|
||||
|
||||
## 詳細な設定
|
||||
|
||||
上記の手順は最低限の設定です。これで `hugo server` を実行すると、空白のCongoウェブサイトが表示されます。詳細な設定については、[設定]({{< ref "configuration" >}})セクションを参照してください。
|
||||
|
|
@ -231,9 +231,10 @@ Further customisation can be achieved through the use of special theme parameter
|
|||
|
||||
There is a special case for creating menu items for links that take theme actions. These are denoted using the `action` parameter, and a value of the action the link should perform. Action links allow for all the same custom parameters as other links and can be styled with an icon or text name.
|
||||
|
||||
There are two valid theme actions:
|
||||
There are three valid theme actions:
|
||||
|
||||
- `appearance` will create a link to the appearance switcher
|
||||
- `locale` will create a drop down picker to access translated content
|
||||
- `search` will create a link to the site search
|
||||
|
||||
Both menus are completely optional and can be commented out if not required. Use the template provided in the default file as a guide.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
title: "ホームページレイアウト"
|
||||
date: 2020-08-13
|
||||
draft: false
|
||||
description: "Congoにおけるホームページレイアウトの設定について"
|
||||
summary: "Congoは、組み込みテンプレートと独自のテンプレートを提供する機能によって、柔軟なホームページレイアウトを提供します。"
|
||||
slug: "homepage-layout"
|
||||
tags: ["homepage", "layouts", "docs"]
|
||||
---
|
||||
|
||||
Congoは柔軟なホームページレイアウトを提供します。2つのメインテンプレートから選択でき、追加設定でデザインを調整できます。また、独自のテンプレートを用意して、ホームページの内容を完全にコントロールすることもできます。
|
||||
|
||||
ホームページのレイアウトは `params.toml` 設定ファイルの `homepage.layout` 設定によって制御されます。さらに、すべてのレイアウトには[最近の記事](#最近の記事)を表示するオプションがあります。
|
||||
|
||||
## ページレイアウト
|
||||
|
||||
デフォルトのレイアウトはページレイアウトです。これはシンプルにMarkdownコンテンツを表示します。静的なウェブサイトには最適で、多くの柔軟性を提供します。
|
||||
|
||||
|
||||
|
||||
ページレイアウトを有効にするには、 `params.toml` 設定ファイルで `homepage.layout = "page"` を設定します。
|
||||
|
||||
## プロフィールレイアウト
|
||||
|
||||
プロフィールレイアウトは、個人のウェブサイトやブログに最適です。画像とソーシャル・プロフィールへのリンクを提供することで、著者の詳細を前面に押し出します。
|
||||
|
||||
|
||||
|
||||
著者情報は `languages` 設定ファイルで提供されます。パラメーターの詳細については、[はじめに]({{< ref "getting-started" >}})と[言語と国際化]({{< ref "configuration#言語と国際化" >}})セクションを参照してください。
|
||||
|
||||
さらに、ホームページのコンテンツで提供されるすべてのMarkdownコンテンツは、著者プロフィールの下に配置されます。これにより、ショートコードを使用した著者の略歴やその他のカスタムコンテンツを表示するための柔軟性が増します。
|
||||
|
||||
プロフィールレイアウトを有効にするには、 `params.toml` 設定ファイルで `homepage.layout = "profile"` を設定します。
|
||||
|
||||
## カスタムレイアウト
|
||||
|
||||
組み込みのホームページレイアウトがあなたのニーズに十分でない場合は、独自のカスタムレイアウトを提供するオプションがあります。これにより、ページの内容を完全にコントロールすることができ、白紙の状態から作成することができます。
|
||||
|
||||
カスタムレイアウトを有効にするには、 `params.toml` 設定ファイルで `homepage.layout = "custom"` を設定します。
|
||||
|
||||
設定値が設定された状態で、新しい `custom.html` ファイルを作成し、 `layouts/partials/home/custom.html` に配置してください。これで、 `custom.html` ファイルにあるものは何でも、サイトのホームページのコンテンツエリアに配置されるようになります。レイアウトの定義には、HTML、Tailwind、Hugoのテンプレート関数など、お好きなものをお使いください。
|
||||
|
||||
カスタムレイアウトに[最近の記事](#最近の記事)を含めるには、 `recent-articles.html` パーシャルを使います。
|
||||
|
||||
例として、このサイトの[ホームページ]({{< ref "/" >}})では、カスタムレイアウトを使ってページとプロフィールのレイアウトを切り替えられるようにしています。[GitHub repo](https://github.com/jpanther/congo/blob/dev/exampleSite/layouts/partials/home/custom.html)を訪問して、どのように動作するか見てみましょう。
|
||||
|
||||
## 最近の記事
|
||||
|
||||
すべてのホームページレイアウトには、メインページコンテンツの下に最近の記事を表示するオプションがあります。これを有効にするには、 `params.toml` 設定ファイルの `homepage.showRecent` 設定を `true` にするだけです。
|
||||
|
||||
|
||||
|
||||
このセクションにリストされる記事は、 `mainSections` 設定から派生したもので、あなたのウェブサイトで使用しているコンテンツタイプに対応します。例えば、 _posts_ と _projects_ のコンテンツセクションがある場合、この設定を `["posts", "projects"]` に設定することで、これら2つのセクションにあるすべての記事が最近の記事リストに出力されます。Congoはこの設定が配列であることを想定しているので、すべてのコンテンツに1つのセクションしか使用しない場合は、この設定を適宜変更してください: `["blog"]`
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
|
|
@ -0,0 +1,146 @@
|
|||
---
|
||||
title: "ホスティングとデプロイ"
|
||||
date: 2020-08-07
|
||||
draft: false
|
||||
description: "Congoサイトのデプロイについて"
|
||||
summary: "Congoは、ほとんどすべてのデプロイシナリオに柔軟に対応できるように設計されています。プロジェクトを一般的なホスティングプラットフォームにデプロイする方法については、こちらをご覧ください。"
|
||||
slug: "hosting-deployment"
|
||||
tags: ["hosting", "deployment", "docs", "github", "netlify", "render"]
|
||||
---
|
||||
|
||||
Congoで構築したHugoウェブサイトを展開する方法はたくさんあります。このテーマは、ほとんどすべてのデプロイシナリオに柔軟に対応できるように設計されています。
|
||||
|
||||
Congoはテーマ全体で相対URLを使って構築されています。これにより、サイトをサブディレクトリやGitHub Pagesのようなホストに簡単に配置することができます。通常、 `config.toml` ファイルで `baseURL` パラメーターが設定されていれば、特別な設定は必要ありません。
|
||||
|
||||
Hugo公式ドキュメントの[Hosting and Deployment](https://gohugo.io/hosting-and-deployment/)は、あなたのサイトをデプロイする方法を学ぶのに最適な場所です。以下のセクションには、特定のプラットフォームで役立つ、特定のテーマ設定の詳細が含まれています。
|
||||
|
||||
**デプロイ先を選んでください:**
|
||||
|
||||
- [GitHub Pages](#github-pages)
|
||||
- [Netlify](#netlify)
|
||||
- [Render](#render)
|
||||
- [Cloudflare Pages](#cloudflare-pages)
|
||||
- [共有ホスティング、VPS、または自身のWebサーバー](#共有ホスティングvpsまたは自身のwebサーバー)
|
||||
|
||||
---
|
||||
|
||||
## GitHub Pages
|
||||
|
||||
GitHubでは、Actionsを使って[GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages)上でホスティングすることができます。この機能を有効にするには、リポジトリでPagesを有効にし、新しいActionsワークフローを作成してサイトをビルド、デプロイします。
|
||||
|
||||
ファイルはYAML形式で、GitHubリポジトリの `.github/workflows/` ディレクトリに置き、拡張子を `.yml` とします。
|
||||
|
||||
{{< alert >}}
|
||||
**重要:** `branches` とデプロイステップの `if` パラメーターにプロジェクトで使用しているブランチ名を正しく設定してください。
|
||||
{{< /alert >}}
|
||||
|
||||
```yaml
|
||||
# .github/workflows/gh-pages.yml
|
||||
|
||||
name: GitHub Pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
build-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
concurrency:
|
||||
group: ${{ github.workflow }}-${{ github.ref }}
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
submodules: true
|
||||
fetch-depth: 0
|
||||
|
||||
- name: Setup Hugo
|
||||
uses: peaceiris/actions-hugo@v2
|
||||
with:
|
||||
hugo-version: "latest"
|
||||
|
||||
- name: Build
|
||||
run: hugo --minify
|
||||
|
||||
- name: Deploy
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
if: ${{ github.ref == 'refs/heads/main' }}
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_branch: gh-pages
|
||||
publish_dir: ./public
|
||||
```
|
||||
|
||||
設定ファイルをGitHubにプッシュすると、アクションが自動的に実行されるはずです。初回は失敗するかもしれないので、GitHubリポジトリの **Settings > Pages** にアクセスして、ソースが正しいか確認してください。 `gh-pages` ブランチを使うように設定されているべきです。
|
||||
|
||||
{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source" >}}
|
||||
|
||||
設定が完了したら、アクションを再実行し、サイトを正しくビルドしてデプロイします。すべてが正常にデプロイされたことを確認するためにアクションログを参照することができます。
|
||||
|
||||
## Netlify
|
||||
|
||||
[Netlify](https://www.netlify.com)にデプロイするには、Netlify側に新しいデプロイサイトを作成し、ソースコードとリンクします。Netlify UIでは、ビルド設定は空白のまま、使用するドメインだけを設定する必要があります。
|
||||
|
||||
{{< screenshot src="netlify-build-settings.jpg" alt="Screen capture of Netlify build settings" >}}
|
||||
|
||||
次に、サイト・リポジトリのルートに `netlify.toml` ファイルを作成します:
|
||||
|
||||
```toml
|
||||
# netlify.toml
|
||||
|
||||
[build]
|
||||
command = "hugo mod get -u && hugo --gc --minify -b $URL"
|
||||
publish = "public"
|
||||
|
||||
[build.environment]
|
||||
HUGO_VERSION = "0.118.2"
|
||||
NODE_ENV = "production"
|
||||
GO_VERSION = "1.20"
|
||||
TZ = "UTC" # Set to preferred timezone
|
||||
|
||||
[context.production.environment]
|
||||
HUGO_ENV = "production"
|
||||
```
|
||||
|
||||
上の例は、CongoをHugoモジュールとしてデプロイすることを想定しています。別の方法でテーマをインストールした場合は、ビルドコマンドを `hugo --gc --minify -b $URL` に変更してください。
|
||||
|
||||
設定ファイルをリポジトリにプッシュすると、Netlifyは自動的にサイトをデプロイします。Netlify UIでデプロイのログを確認し、エラーがないかチェックすることができます。
|
||||
|
||||
## Render
|
||||
|
||||
[Render](https://render.com)へのデプロイは非常に簡単で、すべての設定はRender UIを介して行います。
|
||||
|
||||
新しい**静的サイト**を作成し、プロジェクトのコード・リポジトリにリンクします。そして、ビルドコマンドを `hugo --gc --minify` に、公開ディレクトリを `public` に設定するだけです。
|
||||
|
||||
{{< screenshot src="render-settings.jpg" alt="Screen capture of Render settings" >}}
|
||||
|
||||
あなたが変更をリポジトリにプッシュするたびに、自動的にビルドとデプロイを行います。
|
||||
|
||||
## Cloudflare Pages
|
||||
|
||||
CloudflareはHugoサイトをホストできる[Pages](https://pages.cloudflare.com/)サービスを提供しています。Gitリポジトリからサイトを構築し、CloudflareのCDNでホスティングします。[Hugoデプロイメントガイド](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site)に従って始めてください。
|
||||
|
||||
The Rocket Loader™ feature offered by Cloudflare tries to speed up rendering of web pages with JavaScript, but it breaks the appearance switcher in the theme. It can also cause an annoying light/dark screen flash when browsing your site due to scripts loading in the wrong order.
|
||||
|
||||
Cloudflareが提供するRocket Loader™は、JavaScriptを使用したウェブページのレンダリングを高速化するものですが、テーマの外観スイッチャーを壊してしまいます。また、スクリプトのロード順序が正しくないため、サイトを閲覧する際に煩わしい画面の明暗が点滅することがあります。
|
||||
|
||||
これらの問題は下記を無効にすることで解決できます:
|
||||
|
||||
- [Cloudflare dashboard](https://dash.cloudflare.com)にアクセスする
|
||||
- あなたのドメイン名をクリックする
|
||||
- _Speed_ セクションの中にある _Optimization_ をクリックする
|
||||
- _Rocket Loader™_ までスクロールし、これを無効にする
|
||||
|
||||
Congoで構築されたサイトは、この機能を無効にしても十分に読み込みが速いです。
|
||||
|
||||
## 共有ホスティング、VPS、または自身のWebサーバー
|
||||
|
||||
従来のウェブホスティングを使用する場合や自分のサーバーにデプロイする場合は、Hugoサイトを構築してファイルをホストに転送するだけです。
|
||||
|
||||
`config.toml` の `baseURL` パラメーターに、あなたのウェブサイトのルートへの完全なURLが設定されていることを確認してください。
|
||||
|
||||
それから `hugo` コマンドを使ってサイトを構築し、出力ディレクトリの内容をウェブサーバのルートにコピーすれば準備完了です。デフォルトでは、出力ディレクトリは `public` という名前になっています。
|
||||
|
||||
_ホスティングプロバイダーが必要な場合は、[Vultr](https://www.vultr.com/?ref=8957394-8H)または[DigitalOcean](https://m.do.co/c/36841235e565)をチェックしてください。これらのアフィリエイトリンクを使用してサインアップすると、最大100ドルの無料クレジットがもらえます。_
|
||||
|
|
@ -75,7 +75,11 @@ jobs:
|
|||
|
||||
Push the config file to GitHub and the action should automatically run. It may fail the first time and you'll need to visit the **Settings > Pages** section of your GitHub repo to check the source is correct. It should be set to use the `gh-pages` branch.
|
||||
|
||||
{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source" >}}
|
||||
{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source settings" >}}
|
||||
|
||||
You should also visit the **Settings > Actions > General** section and check that the workflow permissions allow actions to make changes to your repo.
|
||||
|
||||
{{< screenshot src="github-workflow-permissions.jpg" alt="Screen capture of GitHub Workflow Permissions settings" >}}
|
||||
|
||||
Once the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.
|
||||
|
||||
|
|
@ -95,16 +99,13 @@ Then in the root of your site repository, create a `netlify.toml` file:
|
|||
publish = "public"
|
||||
|
||||
[build.environment]
|
||||
HUGO_VERSION = "0.118.2"
|
||||
NODE_ENV = "production"
|
||||
GO_VERSION = "1.20"
|
||||
TZ = "UTC" # Set to preferred timezone
|
||||
|
||||
[context.production.environment]
|
||||
HUGO_VERSION = "0.112.7"
|
||||
HUGO_ENV = "production"
|
||||
|
||||
[context.deploy-preview.environment]
|
||||
HUGO_VERSION = "0.112.7"
|
||||
```
|
||||
|
||||
This configuration assumes you are deploying Congo as a Hugo module. If you have installed the theme using another method, change the build command to simply `hugo --gc --minify -b $URL`.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,178 @@
|
|||
---
|
||||
title: "インストール"
|
||||
date: 2020-08-16
|
||||
draft: false
|
||||
description: "Congoをインストール"
|
||||
summary: "全く何もない状態からHugoとCongoを使い始める方法を紹介します。初めての方はここから始めるのが最適です。"
|
||||
slug: "installation"
|
||||
tags: ["installation", "docs"]
|
||||
---
|
||||
|
||||
Hugoの標準的な[Quick Start](https://gohugo.io/getting-started/quick-start/)に従うだけで、すぐに使い始めることができます。
|
||||
|
||||
詳しいインストール方法は以下をご覧ください。[更新のインストール](#更新のインストール)についても解説しています。
|
||||
|
||||
## インストール
|
||||
|
||||
この手順を読めば、HugoとCongoをまったく何もない状態から使い始めることができます。このガイドで述べられている依存関係のほとんどは、あなたのプラットフォームで選択したパッケージマネージャを使ってインストールできます。
|
||||
|
||||
### Hugoのインストール
|
||||
|
||||
Hugoを使ったことがない場合は、[インストール](https://gohugo.io/getting-started/installing)する必要があります。すでにインストールされているかは、 `hugo version` コマンドで確認できます。
|
||||
|
||||
{{< alert >}}
|
||||
CongoはHugoの最新機能の一部を利用しているため、 **Hugoバージョン0.87.0** 以降を使用していることを確認してください。
|
||||
{{< /alert >}}
|
||||
|
||||
[Hugo docs](https://gohugo.io/getting-started/installing)に、あなたのプラットフォーム用の詳しいインストール手順があります。
|
||||
|
||||
### 新しいサイトを作成
|
||||
|
||||
コマンド `hugo new site mywebsite` を実行して、 `mywebsite` というディレクトリに新しいHugoサイトを作成します。
|
||||
|
||||
プロジェクト・ディレクトリは好きな名前をつけることができますが、以下では説明の便宜上 `mywebsite` という名前を使います。それ以外の名前を使う場合は、適宜置き換えてください。
|
||||
|
||||
### Congoのダウンロード
|
||||
|
||||
CongoをHugoのウェブサイトにインストールするには、いくつかの方法があります。インストールとメンテナンスが最も簡単なものから最も難しいものまで、次のとおりです:
|
||||
|
||||
- [Hugo module](#install-using-hugo) (recommended)
|
||||
- [Git submodule](#install-using-git)
|
||||
- [Manual file copy](#install-manually)
|
||||
|
||||
わからない場合は、 _Hugo module_ の方法を選んでください。
|
||||
|
||||
#### Install using Hugo
|
||||
|
||||
この方法はテーマを最新の状態に保つのに最も早く、簡単です。Hugoはモジュールの初期化と管理に **Go** を使うので、先に進む前に `go` がインストールされていることを確認する必要があります。
|
||||
|
||||
1. [Download](https://golang.org/dl/)をクリックし、Goをインストールしてください。すでにインストールされているかは、 `go version` コマンドで確認できます。
|
||||
|
||||
{{< alert >}}
|
||||
Hugoがモジュールを正しく動作させるために、 **Goバージョン1.12** 以降を使用していることを確認してください。
|
||||
{{< /alert >}}
|
||||
|
||||
2. Hugoプロジェクトのディレクトリ (上記で作成したもの)から、ウェブサイトのモジュールを初期化します:
|
||||
|
||||
```shell
|
||||
# GitHubでプロジェクトを管理している場合
|
||||
hugo mod init github.com/<username>/<repo-name>
|
||||
|
||||
# ローカルでプロジェクトを管理している場合
|
||||
hugo mod init my-project
|
||||
```
|
||||
|
||||
3. Congoを設定に追加するには、 `config/_default/module.toml` ファイルを新規作成し、以下を追加します:
|
||||
|
||||
```toml
|
||||
[[imports]]
|
||||
path = "github.com/jpanther/congo/v2"
|
||||
```
|
||||
|
||||
4. `hugo server` を使用してサーバーを起動すると、テーマが自動的にダウンロードされます。
|
||||
5. [テーマ設定ファイルのセットアップ](#テーマ設定ファイルのセットアップ)に進みます。
|
||||
|
||||
#### Install using Git
|
||||
|
||||
この方法では、ローカルマシンに **Git** がインストールされていることを確認する必要があります。
|
||||
|
||||
Hugoプロジェクトのディレクトリ（上で作成したもの）に移動し、新しく `git` リポジトリを初期化してCongoをサブモジュールとして追加します。
|
||||
|
||||
```bash
|
||||
cd mywebsite
|
||||
git init
|
||||
git submodule add -b stable https://github.com/jpanther/congo.git themes/congo
|
||||
```
|
||||
|
||||
[テーマ設定ファイルのセットアップ](#テーマ設定ファイルのセットアップ)に進みます。
|
||||
|
||||
#### Install manually
|
||||
|
||||
1. Congoのソースコードの最新リリースをダウンロードする。
|
||||
|
||||
{{< button href="https://github.com/jpanther/congo/releases/latest" target="_blank" >}}Download from Github{{< /button >}}
|
||||
|
||||
2. アーカイブを解凍し、ディレクトリ名を `congo` に変更して、Hugoプロジェクト内の `themes/` ディレクトリに移動します。
|
||||
3. [テーマ設定ファイルのセットアップ](#テーマ設定ファイルのセットアップ)に進みます。
|
||||
|
||||
### テーマ設定ファイルのセットアップ
|
||||
|
||||
ウェブサイトのルートディレクトリで、Hugoによって生成された `config.toml` ファイルを削除します。テーマの `*.toml` 設定ファイルを `config/_default/` ディレクトリにコピーします。これでCongoの設定がすべて正しくなり、必要に応じてCongoを簡単にカスタマイズできるようになります。
|
||||
|
||||
{{< alert >}}
|
||||
**注記:** プロジェクト内にすでに `module.toml` ファイルが存在する場合は上書きしないでください！
|
||||
{{< /alert >}}
|
||||
|
||||
テーマのインストール方法によって、テーマの設定ファイルは異なる場所にあります。:
|
||||
|
||||
- **Hugo Modules:** Hugoのキャッシュディレクトリ、またはGitHubから[コピーをダウンロード](https://minhaskamal.github.io/DownGit/#/home?url=https://github.com/jpanther/congo/tree/stable/config/_default)してください。
|
||||
- **Git submodule or Manual install:** `themes/congo/config/_default`
|
||||
|
||||
ファイルをコピーしたら、設定ディレクトリは以下のようになっているはずです:
|
||||
|
||||
```shell
|
||||
config/_default/
|
||||
├─ config.toml
|
||||
├─ markup.toml
|
||||
├─ menus.toml
|
||||
├─ module.toml # if you installed using Hugo Modules
|
||||
└─ params.toml
|
||||
```
|
||||
|
||||
{{< alert >}}
|
||||
**重要:** Hugoモジュールを使ってCongoをインストールしなかった場合は、 `config.toml` ファイルの先頭に `theme = "congo"` という行を追加する必要があります。
|
||||
{{< /alert >}}
|
||||
|
||||
### Next steps
|
||||
|
||||
これで基本的なCongoのインストールは完了です。テーマの設定についての詳細は、[はじめに]({{< ref "getting-started" >}})セクションに進んでください。
|
||||
|
||||
---
|
||||
|
||||
## 更新のインストール
|
||||
|
||||
時折、テーマに修正を適用し、新しい機能を追加した[新しいリリース](https://github.com/jpanther/congo/releases)が投稿されます。これらの変更を利用するには、ウェブサイトのテーマファイルを更新する必要があります。
|
||||
|
||||
この方法は、テーマを最初にインストールしたときに選択したインストール方法によって異なります。各方法の手順は以下にあります。
|
||||
|
||||
- [Hugo module](#update-using-hugo)
|
||||
- [Git submodule](#update-using-git)
|
||||
- [Manual file copy](#update-manually)
|
||||
|
||||
### Update using Hugo
|
||||
|
||||
Hugoはモジュールのアップデートをとても簡単にしてくれます。プロジェクトディレクトリに移動して、以下のコマンドを実行するだけです:
|
||||
|
||||
```shell
|
||||
hugo mod get -u
|
||||
```
|
||||
|
||||
Hugoはプロジェクトに必要なモジュールを自動的にアップデートします。これは `module.toml` と `go.mod` ファイルを検査することで行われます。アップデートに問題がある場合は、これらのファイルが正しく設定されているか確認してください。
|
||||
|
||||
その後、サイトを再構築し、すべてが期待通りに動作することを確認してください。
|
||||
|
||||
### Update using git
|
||||
|
||||
Gitサブモジュールは `git` コマンドを使って更新できます。次のコマンドを実行するだけで、テーマの最新バージョンがローカルリポジトリにダウンロードされます:
|
||||
|
||||
```shell
|
||||
git submodule update --remote --merge
|
||||
```
|
||||
|
||||
サブモジュールのアップデートが完了したら、サイトを再構築し、すべてが期待通りに動作することを確認してください。
|
||||
|
||||
### Update manually
|
||||
|
||||
Congoを手動で更新するには、テーマの最新コピーをダウンロードして、プロジェクト内の古いバージョンを置き換える必要があります。
|
||||
|
||||
{{< alert >}}
|
||||
テーマファイルに対して行ったローカルでのカスタマイズは、この処理中に失われますのでご注意ください。
|
||||
{{< /alert >}}
|
||||
|
||||
1. Congoのソースコードの最新リリースをダウンロードする。
|
||||
|
||||
{{< button href="https://github.com/jpanther/congo/releases/latest" target="_blank" >}}Download from Github{{< /button >}}
|
||||
|
||||
2. アーカイブを解凍し、ディレクトリ名を `congo` に変更して、Hugoプロジェクトのルートディレクトリ内の `themes/` ディレクトリに移動します。すべてのテーマファイルを置き換えるには、既存のディレクトリを上書きする必要があります。
|
||||
|
||||
3. サイトを再構築し、すべてが期待通りに動作することを確認してください。
|
||||
|
|
@ -151,6 +151,10 @@ Hugo will automatically update any modules that are required for your project. I
|
|||
|
||||
Then simply rebuild your site and check everything works as expected.
|
||||
|
||||
{{< alert >}}
|
||||
When updating modules, sometimes Hugo will cache an older version of the theme. If this happens, clear your local cache by using the `hugo mod clean` command and then rebuild your site.
|
||||
{{< /alert >}}
|
||||
|
||||
### Update using git
|
||||
|
||||
Git submodules can be updated using the `git` command. Simply execute the following command and the latest version of the theme will be downloaded into your local repository:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
---
|
||||
title: "パーシャル"
|
||||
date: 2020-08-10
|
||||
draft: false
|
||||
description: "Congoで利用できるすべてのパーシャルについて"
|
||||
summary: "パーシャルは、アナリティクス、コメント、ファビコン、カスタムスクリプトなどの特別な機能をテーマに追加するために使用されます。"
|
||||
slug: "partials"
|
||||
tags: ["partials", "analytics", "privacy", "comments", "favicons", "icon", "docs"]
|
||||
---
|
||||
|
||||
## アナリティクス
|
||||
|
||||
CongoはFathom AnalyticsとGoogle Analyticsをビルトインでサポートしています。Fathomはユーザーのプライバシーを尊重するGoogle Analyticsの有料代替サービスです。ご興味のある方は、このアフィリエイトリンクから[10ドルのクレジット](https://usefathom.com/ref/RLAJSV)を受け取ってください。
|
||||
|
||||
### Fathom Analytics
|
||||
|
||||
Fathom Analyticsのサポートを有効にするには、 `config/_default/params.toml` ファイルにFathomサイトコードを記述するだけです。Fathomのカスタムドメイン機能を使用し、ドメインからスクリプトを提供したい場合は、 `domain` 設定値を追加で指定することもできます。 `domain` の値を指定しない場合、スクリプトはFathom DNSから直接読み込まれます。
|
||||
|
||||
```toml
|
||||
# config/_default/params.toml
|
||||
|
||||
[fathomAnalytics]
|
||||
site = "ABC12345"
|
||||
domain = "llama.yoursite.com"
|
||||
```
|
||||
|
||||
### Google Analytics
|
||||
|
||||
Google Analyticsのサポートは内部のHugoパーシャルを通して提供されます。 `config/_default/config.toml` ファイルに `googleAnalytics` キーを指定するだけで、スクリプトが自動的に追加されます。
|
||||
|
||||
提供された設定値に基づいて、バージョン3（analytics.js）とバージョン4（gtag.js）の両方がサポートされています:
|
||||
|
||||
```toml
|
||||
# config/_default/config.toml
|
||||
|
||||
# version 3
|
||||
googleAnalytics = "UA-PROPERTY_ID"
|
||||
# version 4
|
||||
googleAnalytics = "G-MEASUREMENT_ID"
|
||||
```
|
||||
|
||||
### Custom analytics providers
|
||||
|
||||
別のアナリティクスプロバイダーを使いたい場合は、アナリティクスパーシャルをオーバーライドして独自のスクリプトを提供することもできます。 `layouts/partials/analytics.html` ファイルをプロジェクトに作成するだけで、ウェブサイトの `<head>` に自動的にインクルードされます。
|
||||
|
||||
## コメント
|
||||
|
||||
記事にコメント機能を追加するために、Congoは各記事ページのベースに含まれるコメントパーシャルのサポートを含んでいます。 `layouts/partials/comments.html` を提供するだけで、選択したコメントを表示するために必要なコードが含まれます。
|
||||
|
||||
組み込みのHugo Disqusテンプレートを使用するか、独自のカスタムコードを提供することができます。詳しくは[Hugo docs](https://gohugo.io/content-management/comments/)を参照してください。
|
||||
|
||||
コメントを表示する場所をより細かく制御するために `showComments` パラメーターを使用します。この値は `params.toml` の[テーマパラメーター]({{< ref "configuration#テーマパラメーター" >}})として設定するか、[フロントマター]({{< ref "front-matter" >}})に含めることで記事ごとに設定するか、選ぶことができます。このパラメーターはデフォルトで `false` に設定されているので、コメントを表示させるにはこれらの場所のいずれかで `true` に設定する必要があります。
|
||||
|
||||
## ファビコン
|
||||
|
||||
Congoはデフォルトで空白のファビコンセットを提供しますが、それを上書きするために独自のアセットを設定することができます。新しいファビコンを入手する最も簡単な方法は、[favicon.io](https://favicon.io)のようなサードパーティプロバイダーを使って生成することです。
|
||||
|
||||
アイコンアセットは、ウェブサイトの `static/` に直接配置し、以下のリストに従って名前を付けてください。[favicon.io](https://favicon.io)を使用する場合、これらは自動的に生成されるファイル名になりますが、必要に応じて独自のアセットを提供することもできます。
|
||||
|
||||
```shell
|
||||
static/
|
||||
├─ android-chrome-192x192.png
|
||||
├─ android-chrome-512x512.png
|
||||
├─ apple-touch-icon.png
|
||||
├─ favicon-16x16.png
|
||||
├─ favicon-32x32.png
|
||||
├─ favicon.ico
|
||||
└─ site.webmanifest
|
||||
```
|
||||
|
||||
また、デフォルトのファビコンの動作を完全にオーバーライドすることもできます。 `layouts/partials/favicons.html` ファイルをプロジェクトに提供するだけで、デフォルトのアセットの代わりに `<head>` に注入されます。
|
||||
|
||||
## アイコン
|
||||
|
||||
[ショートコード - アイコン]({{< ref "shortcodes#アイコン" >}})と同様に、Congoの `icon.html` パーシャルを使うことで、独自のテンプレートやパーシャルにアイコンを含めることができます。このパーシャルにはアイコンの名前を指定します。
|
||||
|
||||
**例:**
|
||||
|
||||
```go
|
||||
{{ partial "icon.html" "github" }}
|
||||
```
|
||||
|
||||
アイコンはHugo Pipesを使って配置されるため、非常に柔軟性があります。Congoには、ソーシャル、リンク、その他の目的のために多くのビルトインアイコンが含まれています。サポートされているアイコンの完全なリストは、[サンプル - アイコン]({{< ref "samples/icons" >}}) ページをチェックしてください。
|
||||
|
||||
カスタムアイコンはプロジェクトの `assets/icons/` ディレクトリに独自のアイコンアセットを提供することで追加できます。アイコンは拡張子 `.svg` を除いたSVGファイル名でパーシャルから参照できます。
|
||||
|
||||
## Extensions
|
||||
|
||||
Congoは基本機能の拡張を可能にする多くのパーシャルを提供しています。
|
||||
|
||||
### 記事リンク
|
||||
|
||||
記事リンクの後に追加のコードを挿入したい場合は、 `layouts/partials/extend-article-link.html` ファイルを作成してください。これは、特定の記事のメタデータをハイライトするために使用できる[`バッジ`]({{< ref "shortcodes#バッジ" >}})ショートコードと組み合わせると特に強力です。
|
||||
|
||||
### HeadとFooter
|
||||
|
||||
テンプレートの `<head>` と `<footer>` に直接追加コードを挿入することができます。これらはテーマの一部ではないスクリプトやその他のロジックを提供するのに便利です。
|
||||
|
||||
`layouts/partials/extend-head.html` または `layouts/partials/extend-footer.html` を作成するだけで、これらは自動的にあなたのウェブサイトに挿入されます。どちらのパーシャルも `<head>` と `<footer>` の最後の項目として挿入されるので、テーマのデフォルトを上書きするために使用することができます。
|
||||
|
|
@ -24,6 +24,19 @@ To enable Fathom Analytics support, simply provide your Fathom site code in the
|
|||
domain = "llama.yoursite.com"
|
||||
```
|
||||
|
||||
### Plausible Analytics
|
||||
|
||||
To enable Plausible analytics support, simply provide the domain of the website you want to track in the `config/_default/params.toml` file. If you are using a self-hosted Plausible, or wish to use a [proxied analytics](https://plausible.io/docs/proxy/introduction) script and event API router, you can also provide additional `event` and `script` configuration values. If you do not provide these two values, the script will load directly with Plausible's default managed service. Refer to [Using a proxy for analytics](https://plausible.io/docs/proxy/introduction) for more details.
|
||||
|
||||
```toml
|
||||
# config/_default/params.toml
|
||||
|
||||
[plausibleAnalytics]
|
||||
domain = "blog.yoursite.com"
|
||||
event = "https://plausible.yoursite.com/api/event"
|
||||
script = "https://plausible.yoursite.com/js/script.js"
|
||||
```
|
||||
|
||||
### Google Analytics
|
||||
|
||||
Google Analytics support is provided through the internal Hugo partial. Simply provide the `googleAnalytics` key in the `config/_default/config.toml` file and the script will be added automatically.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,236 @@
|
|||
---
|
||||
title: "ショートコード"
|
||||
date: 2020-08-11
|
||||
draft: false
|
||||
description: "Congoで利用できるすべてのショートコードについて"
|
||||
summary: Congoには、画像、図表、ボタンなどのリッチコンテンツを記事に追加するショートコードが含まれています。
|
||||
slug: "shortcodes"
|
||||
tags: ["shortcodes", "mermaid", "icon", "lead", "docs"]
|
||||
---
|
||||
|
||||
すべての[デフォルトのHugoショートコード](https://gohugo.io/content-management/shortcodes/)に加えて、Congoは追加機能のためにいくつか追加しています。
|
||||
|
||||
## アラート
|
||||
|
||||
`alert` は、その内容をスタイル化されたメッセージボックスとして記事内に出力します。読者に見逃してほしくない重要な情報に注意を促すのに便利です。
|
||||
|
||||
入力はMarkdownで書かれているので、好きなようにフォーマットできます。
|
||||
|
||||
デフォルトでは、警告の三角形アイコンで表示されます。アイコンを変更するには、アイコン名をショートコードに含めます。アイコンの使い方については、[アイコン](#アイコン)をご覧ください。
|
||||
|
||||
**例:**
|
||||
|
||||
```md
|
||||
{{</* alert */>}}
|
||||
**警告！** この行為は破壊的です！
|
||||
{{</* /alert */>}}
|
||||
|
||||
{{</* alert "twitter" */>}}
|
||||
Twitterで私を[フォロー](https://twitter.com/jpanther)することをお忘れなく！
|
||||
{{</* /alert */>}}
|
||||
```
|
||||
|
||||
{{< alert >}}
|
||||
**警告！** この行為は破壊的です！
|
||||
{{< /alert >}}
|
||||
|
||||
{{< alert "twitter" >}}
|
||||
Twitterで私を[フォロー](https://twitter.com/jpanther)することをお忘れなく！
|
||||
{{< /alert >}}
|
||||
|
||||
## バッジ
|
||||
|
||||
`badge` は、メタデータを表示するのに便利なスタイル付きバッジコンポーネントを出力します。
|
||||
|
||||
**例:**
|
||||
|
||||
```md
|
||||
{{</* badge */>}}
|
||||
新着記事！
|
||||
{{</* /badge */>}}
|
||||
```
|
||||
|
||||
{{< badge >}}
|
||||
新着記事！
|
||||
{{< /badge >}}
|
||||
|
||||
## ボタン
|
||||
|
||||
`button` は主要なアクションを強調するために使用できるスタイル付きボタンコンポーネントを出力します。オプションで3つのパラメーターを持ちます:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|Parameter|Description|
|
||||
|---|---|
|
||||
|`href`|ボタンがリンクするURL。|
|
||||
|`target`|リンクのターゲット。|
|
||||
|`download`|ブラウザがURLに移動するのではなく、リソースをダウンロードするかどうか。このパラメーターの値はダウンロードされるファイルの名前になります。|
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
**例:**
|
||||
|
||||
```md
|
||||
{{</* button href="#button" target="_self" */>}}
|
||||
Click!
|
||||
{{</* /button */>}}
|
||||
```
|
||||
|
||||
{{< button href="#button" target="_self" >}}
|
||||
Click!
|
||||
{{< /button >}}
|
||||
|
||||
## チャート
|
||||
|
||||
`chart` は、Chart.jsライブラリを使用して、単純な構造化データを使用して記事にチャートを埋め込みます。多くの[異なるチャートスタイル](https://www.chartjs.org/docs/latest/samples/)をサポートしており、全てはショートコード内から設定することができます。ショートコードのタグの間にチャートのパラメーターを指定するだけで、あとはChart.jsがやってくれます。
|
||||
|
||||
構文とサポートされるチャート・タイプの詳細については、[Chart.js公式ドキュメント](https://www.chartjs.org/docs/latest/general/)を参照してください。
|
||||
|
||||
**例:**
|
||||
|
||||
```js
|
||||
{{</* chart */>}}
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
|
||||
datasets: [{
|
||||
label: '# of votes',
|
||||
data: [12, 19, 3, 5, 3],
|
||||
}]
|
||||
}
|
||||
{{</* /chart */>}}
|
||||
```
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
{{< chart >}}
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
|
||||
datasets: [{
|
||||
label: '# of votes',
|
||||
data: [12, 19, 3, 5, 3],
|
||||
}]
|
||||
}
|
||||
{{< /chart >}}
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
[サンプル - チャート]({{< ref "charts" >}})で、他のサンプルを見るこができます。
|
||||
|
||||
## 図
|
||||
|
||||
Congoには、コンテンツに画像を追加するための `figure` ショートコードが含まれています。このショートコードは、Hugoの基本機能を置き換えることで、さらなるパフォーマンス上の利点を提供します。
|
||||
|
||||
提供された画像がページリソースである場合、Hugo Pipesを使用して最適化され、さまざまなデバイスの解像度に適した画像が提供されるように拡大縮小されます。静的アセットや外部画像へのURLが提供された場合は、Hugoによる画像処理は行われず、そのまま含まれます。
|
||||
|
||||
`figure` は6つのパラメーターを受け入れます:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|Parameter|Description|
|
||||
|---|---|
|
||||
|`src`| **必須** 画像のローカルパス/ファイル名またはURL。パスとファイル名を指定すると、テーマは次の順番で画像を探します: まず、ページにバンドルされている[ページリソース](https://gohugo.io/content-management/page-resources/)、次に `assets/` ディレクトリ、最後に `static/` ディレクトリ。|
|
||||
|`alt`|画像の[代替テキスト説明](https://moz.com/learn/seo/alt-text)。|
|
||||
|`caption`|画像の下に表示される画像キャプションのMarkdown文字列。|
|
||||
|`class`|画像に適用する追加のCSSクラス。|
|
||||
|`href`|画像のリンク先URL。|
|
||||
|`default`|デフォルトのHugo `figure` の動作に戻す際には `default=true` を指定し、通常の[Hugo ショートコード構文](https://gohugo.io/content-management/shortcodes/#figure)を参照してください。|
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Congoは、標準的なMarkdown構文を使用した場合の画像についても自動変換をサポートしています。以下のフォーマットを使用するだけで処理します:
|
||||
|
||||
```md
|
||||
|
||||
```
|
||||
|
||||
**例:**
|
||||
|
||||
```md
|
||||
{{</* figure
|
||||
src="abstract.jpg"
|
||||
alt="抽象的な紫色のアートワーク"
|
||||
caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
|
||||
*/>}}
|
||||
|
||||
<!-- OR -->
|
||||
|
||||
|
||||
```
|
||||
|
||||
{{< figure src="abstract.jpg" alt="抽象的な紫色のアートワーク" caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)" >}}
|
||||
|
||||
## アイコン
|
||||
|
||||
`icon` はアイコンの名前を唯一のパラメーターとして受け取り、SVGアイコンを出力します。アイコンは現在のテキストサイズに合わせて自動的に拡大縮小されます。
|
||||
|
||||
**例:**
|
||||
|
||||
```md
|
||||
{{</* icon "github" */>}}
|
||||
```
|
||||
|
||||
**出力:** {{< icon "github" >}}
|
||||
|
||||
アイコンはHugo Pipesを使って配置されるため、非常に柔軟性があります。Congoには、ソーシャル、リンク、その他の目的のために多くのビルトインアイコンが含まれています。サポートされているアイコンの完全なリストは、[サンプル - アイコン]({{< ref "samples/icons" >}})ページをチェックしてください。
|
||||
|
||||
カスタムアイコンは、プロジェクトの `assets/icons/` ディレクトリに独自のアイコンアセットを提供することで追加できます。アイコンは拡張子 `.svg` を除いたSVGファイル名でショートコードから参照できます。
|
||||
|
||||
アイコンは[パーシャル - アイコン]({{< ref "partials#アイコン" >}})を呼び出すことでパーシャルでも使用できます。
|
||||
|
||||
## Katex
|
||||
|
||||
`katex` を使うと、KaTeXパッケージを使って記事の内容に数式を追加することができます。利用可能な構文については[supported TeX functions](https://katex.org/docs/supported.html)のオンラインリファレンスを参照してください。
|
||||
|
||||
記事中に数式を含めるには、コンテンツ内の任意の場所にショートコードを配置するだけです。記事ごとに一度記述するだけで、KaTeXが自動的にそのページのマークアップをレンダリングします。インライン表記とブロック表記の両方がサポートされています。
|
||||
|
||||
インライン記法は、式を区切り記号 `\\(` と `\\)` で囲むことで生成できます。ブロック記法の場合は `$$` です。
|
||||
|
||||
**例:**
|
||||
|
||||
```md
|
||||
{{</* katex */>}}
|
||||
\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
|
||||
```
|
||||
|
||||
{{< katex >}}
|
||||
\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
|
||||
|
||||
[数学的表記のサンプル]({{< ref "mathematical-notation" >}})でより多くの例をチェックしてください。
|
||||
|
||||
## リード
|
||||
|
||||
`lead` は記事の冒頭を強調するために使われます。導入部のスタイルや、重要な情報を呼び出すために使用することができます。Markdownのコンテンツを `lead` で囲むだけです。
|
||||
|
||||
**例:**
|
||||
|
||||
```md
|
||||
{{</* lead */>}}
|
||||
人生があなたにレモンを与えるなら、それでレモネードを作りなさい。
|
||||
{{</* /lead */>}}
|
||||
```
|
||||
|
||||
{{< lead >}}
|
||||
人生があなたにレモンを与えるなら、それでレモネードを作りなさい。
|
||||
{{< /lead >}}
|
||||
|
||||
## Mermaid
|
||||
|
||||
`mermaid` を使えば、テキストを使って詳細なダイアグラムやビジュアライゼーションを描くことができます。Mermaidを使用しており、様々なダイアグラム、チャート、その他の出力形式をサポートしています。
|
||||
|
||||
`mermaid` 内にMermaid構文を記述するだけで、あとはプラグインにおまかせです。
|
||||
|
||||
構文とサポートされている図の種類の詳細については、[Mermaid公式ドキュメント](https://mermaid-js.github.io/)を参照してください。
|
||||
|
||||
**例:**
|
||||
|
||||
```md
|
||||
{{</* mermaid */>}}
|
||||
graph LR;
|
||||
A[レモン]-->B[レモネード];
|
||||
B-->C[利益]
|
||||
{{</* /mermaid */>}}
|
||||
```
|
||||
|
||||
{{< mermaid >}}
|
||||
graph LR;
|
||||
A[レモン]-->B[レモネード];
|
||||
B-->C[利益]
|
||||
{{< /mermaid >}}
|
||||
|
||||
[ダイアグラムとフローチャートのサンプル]({{< ref "diagrams-flowcharts" >}})で、他の例を見ることができます。
|
||||
|
|
@ -93,7 +93,7 @@ data: {
|
|||
labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
|
||||
datasets: [{
|
||||
label: '# of votes',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
data: [12, 19, 3, 5, 3],
|
||||
}]
|
||||
}
|
||||
{{</* /chart */>}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
---
|
||||
title: "What's New in 2.0 ✨"
|
||||
date: 2022-01-19
|
||||
draft: false
|
||||
description: "Congo 2.0の新機能について"
|
||||
summary: "Version 2.0では、Congoを新たな高みへと導き、その軽量さを維持しながらも、テーマをさらに強力なものにしています。"
|
||||
tags: ["new", "docs"]
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Congo 2.0には、大量の新機能と最適化が詰め込まれています。
|
||||
{{< /lead >}}
|
||||
|
||||
Congoの当初の目的は、シンプルで軽量なテーマを開発することでした。Version 2では、これをさらに一歩進め、軽量でありながら、よりパワフルなテーマとなっています。
|
||||
|
||||
新機能については以下をご覧ください。アップグレードの準備ができましたら、[アップグレードガイド]({{< ref "upgrade" >}})をご覧ください。
|
||||
|
||||
## Tailwind CSS 3.0
|
||||
|
||||
Tailwind CSSはCongoの中核であり、この新しいリリースには最新の[Tailwind CSS version 3](https://tailwindcss.com/blog/tailwindcss-v3)が含まれています。Tailwind CSS 3.0では、パフォーマンスが最適化され、新しいCSS機能がサポートされています。
|
||||
|
||||
{{< youtube "TmWIrBPE6Bc" >}}
|
||||
|
||||
この新バージョンを実装することで、テーマからTailwindプラグインの依存関係をいくつか削除し、全体的なフットプリントを軽量に保つことができるようになりました。
|
||||
|
||||
## 多言語対応
|
||||
|
||||
要望の多かった多言語対応を行いました！複数の言語でコンテンツを公開する場合、サイトはすべての翻訳が利用可能な状態で構築されます。
|
||||
|
||||
<div class="text-2xl text-center" style="font-size: 2.8rem">:gb: :de: :fr: :es: :cn: :jp: :brazil: :tr: :bangladesh:</div>
|
||||
|
||||
コミュニティの貢献によって、Congoはすでに[23言語](https://github.com/jpanther/congo/tree/dev/i18n)以上に翻訳されています。新しい翻訳も[Pull Request](https://github.com/jpanther/congo/pulls)からいつでも歓迎しています！
|
||||
|
||||
## Right to Left言語のサポート
|
||||
|
||||
新しいTailwindの利点の一つは、RTL言語サポートを追加する機能です。有効にすると、サイト全体のコンテンツが右から左にリフローされます。テーマ内のすべての要素は、RTL言語でも見栄えが良くなるように再構築されています。
|
||||
|
||||
RTLは言語ごとに制御されるため、プロジェクト内でRTLとLTRの両方のコンテンツを混ぜてマッチさせることができ、テーマはそれに応じて対応します。
|
||||
|
||||
## 画像の自動リサイズ
|
||||
|
||||
Congo 2.0の大きな変更点は、画像の自動リサイズ機能の追加です。Hugo Pipesのパワーを使って、Markdownコンテンツ内の画像が自動的に異なる出力サイズに拡大縮小されるようになりました。これらの画像はHTMLの `srcset` 属性を使って表示され、サイト訪問者に最適化されたファイルサイズを提供することができます。
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<!-- Markdown:  -->
|
||||
<img
|
||||
srcset="
|
||||
/image_320x0_resize_q75_box.jpg 320w,
|
||||
/image_635x0_resize_q75_box.jpg 635w,
|
||||
/image_1024x0_resize_q75_box.jpg 1024w,
|
||||
/image_1270x0_resize_q75_box.jpg 2x"
|
||||
src="/image_635x0_resize_q75_box.jpg"
|
||||
alt="My image"
|
||||
/>
|
||||
```
|
||||
|
||||
あなたは何も変更する必要がありません！標準的なMarkdown画像構文を挿入するだけで、あとはテーマにお任せください。もう少しコントロールしたい場合は、 `figure` ショートコードを完全に書き換えて、同じリサイズの利点を提供します。
|
||||
|
||||
## パフォーマンスの改善
|
||||
|
||||
今回のアップデートでは、全体的にパフォーマンスが向上している。今回のリリースの主な目的はLighthouseのスコアを向上させることで、Congoは4つの指標すべてで100点満点を獲得しました。
|
||||
|
||||
{{< screenshot src="lighthouse.jpg" >}}
|
||||
|
||||
個々の変更点が多すぎて、ここでは紹介しきれませんが、さらに詳しく知りたい場合は、[Lighthouseのレポート](lighthouse.html)をご覧ください。実際のパフォーマンスは、サーバーの構成によって異なります。
|
||||
|
||||
## サイト内検索
|
||||
|
||||
[Fuse.js](https://fusejs.io)を利用したサイト内検索で、訪問者が素早く簡単にコンテンツを見つけることができます。すべての検索はクライアントサイドで実行されるため、サーバー上で設定する必要がなく、クエリは超高速で実行されます。サイト設定でこの機能を有効にするだけで準備は完了です。また、フルキーボードナビゲーションにも対応しています！
|
||||
|
||||
## 記事ページ内の目次
|
||||
|
||||
要望の多かった記事ページ内の目次をサポートしました。このページで実際にご覧いただけます。コンテンツは完全にレスポンシブで、異なる画面解像度で利用可能なスペースを活用するように調整されます。
|
||||
|
||||
グローバルまたは記事単位で利用可能な目次は、Hugoの標準設定値を使用して完全にカスタマイズすることができます。
|
||||
|
||||
## アクセシビリティの改善
|
||||
|
||||
より多くの項目にARIA記述を追加し、特定のテキスト要素のコントラストを調整してアクセシビリティを改善しました。
|
||||
|
||||
Congo 2.0では、クイックナビゲーションを可能にする「コンテンツへスキップ」と「トップへスクロール」リンクも導入されています。また、マウスに手を伸ばすことなく検索などの項目を有効にするためのキーボードショートカットもあります。
|
||||
|
||||
新しい画像サイズ変更機能は、 `alt` と `title` 要素の完全なコントロールを提供し、すべての訪問者にアクセシブルな体験を提供します。
|
||||
|
||||
## その他もろもろ
|
||||
|
||||
他にも数え切れないほどの細かな変更があります。記事やリストページでTaxonomyを表示できるようになったり、新しい `headline` の著者パラメーターを使ってホームページをカスタマイズできるようになったり。また、SEOのパフォーマンスをさらに最適化するJSON-LDも改善されています。さらに、一貫したデザイン言語を保証するために、テーマ全体がさらに洗練されました。
|
||||
|
||||
:rocket: 詳細は[full changelog](https://github.com/jpanther/congo/blob/dev/CHANGELOG.md)をご覧ください。
|
||||
|
||||
## Next steps
|
||||
|
||||
準備ができたら[Version 1.xからのアップグレードガイド]({{< ref "upgrade" >}})をお読みください。Congoを初めてお使いになる方は[インストール]({{< ref "docs/installation" >}})に進んでください。
|
||||
|
||||
---
|
||||
|
|
@ -29,7 +29,7 @@ A highly requested feature, Congo is now multilingual! If you publish your conte
|
|||
|
||||
<div class="text-2xl text-center" style="font-size: 2.8rem">:gb: :de: :fr: :es: :cn: :brazil: :tr: :bangladesh:</div>
|
||||
|
||||
Thanks to submissions from the community, Congo has already been translated into [eight languages](https://github.com/jpanther/congo/tree/dev/i18n) with more to be added over time. By the way, [pull requests](https://github.com/jpanther/congo/pulls) for new languages are always welcome!
|
||||
Thanks to submissions from the community, Congo has already been translated into [23 languages](https://github.com/jpanther/congo/tree/dev/i18n) with more to be added over time. By the way, [pull requests](https://github.com/jpanther/congo/pulls) for new languages are always welcome!
|
||||
|
||||
## RTL language support
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,199 @@
|
|||
---
|
||||
title: "Congo 1.xからのアップグレード"
|
||||
date: 2022-01-20
|
||||
draft: false
|
||||
description: "Congo 1.xからのアップグレード"
|
||||
tags: ["new", "docs"]
|
||||
---
|
||||
|
||||
Congo 2.0には多くの変更点が含まれていますが、最新リリースへのアップグレードに必要な労力を最小限に抑えるように設計されています。
|
||||
|
||||
とはいえ、Version 1.xで構築された既存のサイトには、調整が必要な場合もあります。このガイドでは、そのプロセスを順を追って説明し、考慮すべき点を説明します。
|
||||
|
||||
## Step 1: Hugoのアップグレード
|
||||
|
||||
{{< alert >}}
|
||||
Congo 2.0は**Hugo v0.87.0以上**が必要です。
|
||||
{{< /alert >}}
|
||||
|
||||
Congoは、Hugoの最新機能のいくつかを利用するように作られています。問題を避けるために、定期的にHugoのインストールを最新の状態に保つ必要があります。
|
||||
|
||||
Hugoのバージョンは `hugo version` コマンドで確認できます。あなたのプラットフォーム用の新しいリリースを入手する方法については、[Hugoのドキュメント](https://gohugo.io/getting-started/installing/)をご覧ください。
|
||||
|
||||
## Step 2: Congoのアップグレード
|
||||
|
||||
Congoをアップグレードする手順は、プロジェクトにどのようにテーマを含めるかによって異なります。各手順は以下にあります。
|
||||
|
||||
- [Upgrade using Hugo](#upgrade-using-hugo)
|
||||
- [Upgrade using Git](#upgrade-using-git)
|
||||
- [Upgrade manually](#upgrade-manually)
|
||||
|
||||
### Upgrade using Hugo
|
||||
|
||||
Goモジュールを新しいメジャーリリースにアップグレードするには、 `modules.toml` と `go.mod` ファイルを更新する必要があります。それぞれのファイルで、テーマへのパスを `github.com/jpanther/congo` から `github.com/jpanther/congo/v2` に更新してください。
|
||||
|
||||
そして、プロジェクト・ディレクトリに移動し、以下のコマンドを実行してください。
|
||||
|
||||
```shell
|
||||
hugo mod get -u
|
||||
```
|
||||
|
||||
Hugo がローカルにモジュールをキャッシュしているため、状況によってはこのステップで問題が発生する場合があることに注意してください。上記のコマンドがうまくいかない場合は、 `hugo mod clean` を使ってローカルキャッシュを消去し、モジュールを再ダウンロードしてみてください。
|
||||
|
||||
Congoがアップグレードされたら、次のステップに進みます。
|
||||
|
||||
### Upgrade using Git
|
||||
|
||||
Git サブモジュールは `git` コマンドを使ってアップグレードできます。次のコマンドを実行するだけで、最新バージョンのテーマがローカルリポジトリにダウンロードされます:
|
||||
|
||||
```shell
|
||||
git submodule update --remote --merge
|
||||
```
|
||||
|
||||
サブモジュールがアップデートされたら、次のステップに進みます。
|
||||
|
||||
### Upgrade manually
|
||||
|
||||
Congoを手動で更新するには、テーマの最新コピーをダウンロードして、プロジェクト内の古いバージョンを置き換える必要があります。
|
||||
|
||||
{{< alert >}}
|
||||
テーマファイルに対して行ったローカルでのカスタマイズは、この処理中に失われますのでご注意ください。
|
||||
{{< /alert >}}
|
||||
|
||||
1. テーマのソースコードの最新リリースをダウンロードする。
|
||||
|
||||
{{< button href="https://github.com/jpanther/congo/releases/latest" target="_blank" >}}Download from Github{{< /button >}}
|
||||
|
||||
2. アーカイブを解凍し、ディレクトリ名を `congo` に変更して、Hugoプロジェクトのルートディレクトリ内の `themes/` ディレクトリに移動します。すべてのテーマファイルを置き換えるには、既存のディレクトリを上書きする必要があります。
|
||||
|
||||
3. 次のステップに進んでください。
|
||||
|
||||
## Step 3: テーマの設定
|
||||
|
||||
Congo 2.0では新しいテーマ設定パラメーターが多数導入されています。このテーマは既存のバージョン1の設定に適応しますが、より新しいテーマ機能のいくつかを利用するためには、既存の設定を調整する必要があります。
|
||||
|
||||
これを行う最も簡単な方法は、テーマのデフォルト設定のコピーを取り、既存のファイルと比較することです。以下にその手順を詳しく説明します。
|
||||
|
||||
### languages.toml
|
||||
|
||||
多言語サポートを提供するために、言語固有のテーマパラメーターは新しい設定ファイル `languages.[lang-code].toml` に移動されました。テーマにはテンプレート `languages.en.toml` ファイルが付属しており、ガイドとして使用することができます。
|
||||
|
||||
{{< alert >}}
|
||||
多言語サポートが必要ない場合は、このステップは必要ありません。
|
||||
{{< /alert >}}
|
||||
|
||||
言語設定ファイルはこのような構造になっています:
|
||||
|
||||
```toml
|
||||
# config/_default/languagues.en.toml
|
||||
|
||||
languageCode = "en"
|
||||
languageName = "English"
|
||||
displayName = "EN"
|
||||
htmlCode = "en"
|
||||
weight = 1
|
||||
rtl = false
|
||||
|
||||
# Language-specific parameters go here
|
||||
```
|
||||
|
||||
お好みの言語を使って、 `config/_default/` に新しいファイルを作成し、既存の設定ファイルから言語固有のパラメーターをこの新しいファイルに移動するだけです。下の表は移動させる必要のあるパラメーターの概要です。
|
||||
|
||||
| Parameter | Old location |
|
||||
| ------------- | ------------- |
|
||||
| `title` | `config.toml` |
|
||||
| `description` | `params.toml` |
|
||||
| `copyright` | `config.toml` |
|
||||
| `dateFormat` | `params.toml` |
|
||||
| `[author]` | `config.toml` |
|
||||
|
||||
値を移行したら、これらのパラメーターは元の場所から削除すべきです。
|
||||
|
||||
### menus.toml
|
||||
|
||||
テーマが言語を認識するようになったので、 `menus.toml` ファイルの名前も言語コードを含むように変更する必要があります。既存の `menus.toml` を `menus.[lang-code].toml` にリネームしてください。言語コードは前のセクションの `languages.toml` ファイルで使用したコードと同じです。
|
||||
|
||||
### config.toml
|
||||
|
||||
config.toml`ファイルには、Hugoの基本設定値のみが含まれるようになりました。上記の言語固有の文字列を削除した以外に、考慮すべき変更は2つだけです。
|
||||
|
||||
英語以外の言語を使用している場合は、その言語用に作成した設定ファイルの言語コードと一致する `defaultContentLanguage` 値を指定してください。次に、Congo 2.0の新しいサイト内検索を利用するために、 `[outputs]` ブロックを用意する必要があります。
|
||||
|
||||
```toml
|
||||
# config/_default/config.toml
|
||||
|
||||
defaultContentLanguage = "en"
|
||||
|
||||
enableRobotsTXT = true
|
||||
paginate = 10
|
||||
summaryLength = 0
|
||||
|
||||
[outputs]
|
||||
home = ["HTML", "RSS", "JSON"]
|
||||
```
|
||||
|
||||
### markup.toml
|
||||
|
||||
Congo 2.0では記事ページの目次がサポートされました。Hugoには目次を生成するためのデフォルト設定が同梱されていますが、 `markup.toml` ファイルに新しい `[tableOfContents]` ブロックを追加することで、この動作を調整することができます。
|
||||
|
||||
推奨設定は以下のとおりで、目次にレベル2、3、4のの見出しを含みます:
|
||||
|
||||
```toml
|
||||
# config/_default/markup.toml
|
||||
|
||||
[tableOfContents]
|
||||
startLevel = 2
|
||||
endLevel = 4
|
||||
```
|
||||
|
||||
### params.toml
|
||||
|
||||
Congo 2.0では多くの新しいテーマ・パラメーターが導入されました。既存の設定にも若干の変更が必要です。パラメーターが提供されない場合、常にデフォルト値に戻ることを覚えておいてください。
|
||||
|
||||
Congoでのダークモードの動作方法が変更され、より柔軟に設定できるようになりました。従来の `darkMode` と `darkToggle` パラメーターは **削除され、3つの新しいパラメーターに置き換えられました**。これらの新しいオプションはそれぞれ独立して動作するため、強制的に表示させることができ、またユーザーが上書きすることもできます。
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
| New parameter | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `defaultAppearance` | String | `"light"` | デフォルトの外観; `light` か `dark` のどちらか。<br>:warning: _`light` に設定すると以前の `darkMode = false` の設定が再現され、 `dark` に設定すると `darkMode = true` の設定が再現される。_ |
|
||||
| `autoSwitchAppearance` | Boolean | `true` | 外観をオペレーティングシステムの環境設定に基づいて自動的に切り替えるかどうか。 `false` に設定すると、常に `defaultAppearance` を使用します。 <br>:warning: _これを `true` にすることで以前の `darkMode = "auto"` 設定が再現されます。_ |
|
||||
| `showAppearanceSwitcher` | Boolean | `false` | 外観スイッチャーをフッターに表示するかどうか。 <br>:warning: _この設定は `darkToggle` を置き換えます。_ |
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
次の表は、Version 2の新機能を制御する、その他の主要なパラメーターの概要です:
|
||||
|
||||
| New parameter | Type | Default |
|
||||
| ----------------------------- | ------- | ------- |
|
||||
| `enableSearch` | Boolean | `false` |
|
||||
| `showScrollToTop` | Boolean | `true` |
|
||||
| `article.showTaxonomies` | Boolean | `false` |
|
||||
| `article.showTableOfContents` | Boolean | `false` |
|
||||
| `list.showTableOfContents` | Boolean | `false` |
|
||||
|
||||
サポートされるすべてのパラメーターについては[設定]({{< ref "docs/configuration" >}})を参照ください。
|
||||
|
||||
## Step 4: assetsの移動
|
||||
|
||||
ファビコンを除くすべてのassetsが、Hugo Pipesにて最適化されるようになりました。テーマがあなたのファイルを見つけるためには、以前の `static/` から `assets/` ディレクトリに移動する必要があります。主に、著者画像とサイトロゴです:
|
||||
|
||||
`static/me.jpg` **→** `assets/me.jpg`
|
||||
`static/logo.jpg` **→** `assets/logo.jpg`
|
||||
|
||||
著者画像やサイトロゴを提供した場合は、これらのアセットを `static/` から `assets/` に移動するだけです。同じディレクトリ構造を使用している場合、テーマはこれらのファイルがどこにあるかを自動的に認識します。新しいパスを指定したい場合は、 `logo` と `author.image` の設定値を適宜更新してください。
|
||||
|
||||
このステップは、プロジェクト内の静的なassetsには適用されないことに注意してください。例えば、記事内から直接リンクしているPDFファイルは静的なassetsです。これらのファイルは、Hugoがサイトを構築するときに出力ディレクトリに確実にコピーされるよう、`static/` ディレクトリに残しておく必要があります。
|
||||
|
||||
## Step 5: コンテンツの確認
|
||||
|
||||
Congo 2.0では `figure` ショートコードの振る舞いが変わります。記事内で `figure` を使用している場合、パラメーターを調整する必要があるかもしれません。
|
||||
|
||||
サポートされているパラメーターについては、[shortcode]({{< ref "docs/shortcodes#figure" >}})を参照してください。
|
||||
|
||||
## Step 6: 再構築
|
||||
|
||||
これですべての設定変更が完了したので、いよいよサイトを再構築します。 `hugo` またはあなたのビルドコマンドを実行し、すべてが期待通りに動作することを確認してください。
|
||||
|
||||
エラーに遭遇した場合は、設定が正しいことを確認し、[ドキュメント]({{<ref "docs" >}})を参照してください。テーマに同梱されている設定ファイルの例には、デフォルトのパラメーターがすべて含まれており、出発点として最適です。
|
||||
|
||||
|
||||
🙋♀️ それでもまだ助けが必要な場合は、[GitHub Discussions](https://github.com/jpanther/congo/discussions)で遠慮なく質問してください。
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: "Beispiele für Inhalte"
|
||||
description: "Sieh dir an, was mit Congo möglich ist."
|
||||
|
||||
cascade:
|
||||
showEdit: false
|
||||
showSummary: true
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Congo erweckt deinen Inhalt zum Leben. :heart_eyes:
|
||||
{{< /lead >}}
|
||||
|
||||
Dieser Abschnitt enthält einige Demoseiten, die zeigen, wie Congo verschiedene Arten von Inhalten wiedergibt. Sie können auch eine Beispielseite für ein [Taxonomieverzeichnis]({{< ref "tags" >}}) sehen.
|
||||
|
||||
_**Hinweis:** Diese Seite ist nur eine standardmäßige Congo-Artikelauflistung und Hugo wurde so konfiguriert, dass er einen Inhaltstyp "Beispiele" generiert und Artikelzusammenfassungen anzeigt._
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: "Páginas de ejemplo"
|
||||
description: "Vea lo que es posible con Congo."
|
||||
|
||||
cascade:
|
||||
showEdit: false
|
||||
showSummary: true
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Congo da vida a su contenido. :heart_eyes:
|
||||
{{< /lead >}}
|
||||
|
||||
Esta sección contiene ejemplos que muestran cómo Congo representa diferentes tipos de contenido. También puedes ver una página con una [lista de taxonomía]({{< ref "tags" >}}) de ejemplo.
|
||||
|
||||
_**Nota al margen:** Esta página es solo una lista estándar de artículos de Congo, y Hugo se ha configurado para generar un tipo de contenido de `ejemplos` y mostrar resúmenes de artículos._
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: "サンプル"
|
||||
description: "Congoの可能性を見てみましょう"
|
||||
|
||||
cascade:
|
||||
showEdit: false
|
||||
showSummary: true
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Congoはあなたのコンテンツに命を吹き込みます :heart_eyes:
|
||||
{{< /lead >}}
|
||||
|
||||
このセクションには、Congoがさまざまなタイプのコンテンツをどのようにレンダリングするかを示すいくつかのデモページがあります。また、[Tags]({{< ref "tags" >}})ページの例も見ることができます。
|
||||
|
||||
_**補足:** このページは標準的なCongoの記事リストであり、Hugoは `samples` コンテンツタイプを生成し、記事の要約を表示するように設定されています。_
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
---
|
||||
title: "Charts"
|
||||
date: 2019-03-06
|
||||
description: "Leitfaden zur Verwendung von Chart.js mit Congo"
|
||||
summary: "Congo enthält Chart.js für leistungsstarke Charts und Datenvisualisierungen."
|
||||
tags: ["Chart", "Beispiele", "Graph", "Shortcodes"]
|
||||
---
|
||||
|
||||
Congo bietet Unterstützung für Chart.js unter Verwendung des Shortcodes `chart`. Füge einfach das Chart-Markup in den Shortcode ein. Congo gestaltet die Charts automatisch so, dass sie der Konfiguration des Parameters `colorScheme` entsprechen. Die Farben können jedoch mit der normalen Chart.js-Syntax angepasst werden.
|
||||
|
||||
Weitere Details findest du in der [Chart-Shortcode-Dokumentation]({{< ref path="docs/shortcodes#chart" lang="en" >}}).
|
||||
|
||||
Die folgenden Beispiele sind eine kleine Auswahl aus der [offiziellen Chart.js-Dokumentation](https://www.chartjs.org/docs/latest/samples). Du kannst auch [die Quelle der Seite](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/charts/index.de.md) auf GitHub aufrufen, um das Markup zu sehen.
|
||||
|
||||
## Säulendiagramm
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
{{< chart >}}
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli'],
|
||||
datasets: [{
|
||||
label: 'Mein erster Datensatz',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
}
|
||||
{{< /chart >}}
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## Linien-Diagramm
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
{{< chart >}}
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli'],
|
||||
datasets: [{
|
||||
label: 'Mein erster Datensatz',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
tension: 0.2
|
||||
}]
|
||||
}
|
||||
{{< /chart >}}
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## Doughnut-Chart
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
{{< chart >}}
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['Rot', 'Blau', 'Gelb'],
|
||||
datasets: [{
|
||||
label: 'Mein erster Datensatz',
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.7)',
|
||||
'rgba(54, 162, 235, 0.7)',
|
||||
'rgba(255, 205, 86, 0.7)'
|
||||
],
|
||||
borderWidth: 0,
|
||||
hoverOffset: 4
|
||||
}]
|
||||
}
|
||||
{{< /chart >}}
|
||||
<!-- prettier-ignore-end -->
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
---
|
||||
title: "Gráficos"
|
||||
date: 2019-03-06
|
||||
description: "Guía para usar Chart.js en Congo"
|
||||
summary: "Congo incluye Chart.js para mostrar potentes gráficos y visualizaciones de datos."
|
||||
tags: ["chart", "sample", "graph", "shortcodes"]
|
||||
---
|
||||
|
||||
Congo incluye soporte para Chart.js usando el shortcode `chart`. Simplemente encierra las etiquetas del gráfico dentro del shortcode.
|
||||
|
||||
Congo crea temas de gráficos automáticamente para que coincidan con el parámetro `colorScheme` configurado. Sin embargo, los colores se pueden personalizar usando la sintaxis normal de Chart.js.
|
||||
|
||||
Consulta la documentación del [chart shortcode]({{< ref path="docs/shortcodes#chart" lang="en" >}}) para obtener más detalles.
|
||||
|
||||
Los ejemplos a continuación son una pequeña selección tomada de la [documentación oficial de Chart.js](https://www.chartjs.org/docs/latest/samples). También puedes ver el [código fuente de la página](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/charts.es.md) en GitHub para ver la sintaxis.
|
||||
|
||||
## Gráfico de barras
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
{{< chart >}}
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio'],
|
||||
datasets: [{
|
||||
label: 'Mi primer Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
}
|
||||
{{< /chart >}}
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## Gráfico de linea
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
{{< chart >}}
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio'],
|
||||
datasets: [{
|
||||
label: 'Mi primer Dataset',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
tension: 0.2
|
||||
}]
|
||||
}
|
||||
{{< /chart >}}
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## Gráfico de anillos
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
{{< chart >}}
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['Rojo', 'Azul', 'Amarillo'],
|
||||
datasets: [{
|
||||
label: 'Mi primer Dataset',
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.7)',
|
||||
'rgba(54, 162, 235, 0.7)',
|
||||
'rgba(255, 205, 86, 0.7)'
|
||||
],
|
||||
borderWidth: 0,
|
||||
hoverOffset: 4
|
||||
}]
|
||||
}
|
||||
{{< /chart >}}
|
||||
<!-- prettier-ignore-end -->
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
---
|
||||
title: "チャート（グラフ）"
|
||||
date: 2019-03-06
|
||||
description: "Chart.jsの使い方について"
|
||||
summary: "CongoにはChart.jsが含まれており、パワフルなチャートとデータのビジュアライゼーションが可能です。"
|
||||
tags: ["chart", "sample", "graph", "shortcodes"]
|
||||
---
|
||||
|
||||
Congoは、 `chart` ショートコードを使ったChart.jsをサポートしています。チャートのマークアップをショートコードにラップするだけです。Congoは設定された `colorScheme` パラメーターに合うように自動的にチャートをテーマ化しますが、通常のChart.js構文を使って色をカスタマイズすることもできます。
|
||||
|
||||
詳細は[ショートコード - チャート]({{< ref "docs/shortcodes#チャート" >}})のドキュメントを参照してください。
|
||||
|
||||
以下の例は、[Chart.jsの公式ドキュメント](https://www.chartjs.org/docs/latest/samples)から抜粋したものです。GitHubの[ページのソースを見る](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/charts.md)からもマークアップを見ることができます。
|
||||
|
||||
## バーチャート（棒グラフ）
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
{{< chart >}}
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['睦月', '如月', '弥生', '卯月', '皐月', '水無月', '文月'],
|
||||
datasets: [{
|
||||
label: 'データセット',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.2)',
|
||||
'rgba(255, 159, 64, 0.2)',
|
||||
'rgba(255, 205, 86, 0.2)',
|
||||
'rgba(75, 192, 192, 0.2)',
|
||||
'rgba(54, 162, 235, 0.2)',
|
||||
'rgba(153, 102, 255, 0.2)',
|
||||
'rgba(201, 203, 207, 0.2)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgb(255, 99, 132)',
|
||||
'rgb(255, 159, 64)',
|
||||
'rgb(255, 205, 86)',
|
||||
'rgb(75, 192, 192)',
|
||||
'rgb(54, 162, 235)',
|
||||
'rgb(153, 102, 255)',
|
||||
'rgb(201, 203, 207)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
}
|
||||
{{< /chart >}}
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## ラインチャート（折れ線グラフ）
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
{{< chart >}}
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['睦月', '如月', '弥生', '卯月', '皐月', '水無月', '文月'],
|
||||
datasets: [{
|
||||
label: 'データセット',
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
tension: 0.2
|
||||
}]
|
||||
}
|
||||
{{< /chart >}}
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## ドーナツチャート（円グラフ）
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
{{< chart >}}
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: ['赤', '青', '黄'],
|
||||
datasets: [{
|
||||
label: 'My First Dataset',
|
||||
data: [300, 50, 100],
|
||||
backgroundColor: [
|
||||
'rgba(255, 99, 132, 0.7)',
|
||||
'rgba(54, 162, 235, 0.7)',
|
||||
'rgba(255, 205, 86, 0.7)'
|
||||
],
|
||||
borderWidth: 0,
|
||||
hoverOffset: 4
|
||||
}]
|
||||
}
|
||||
{{< /chart >}}
|
||||
<!-- prettier-ignore-end -->
|
||||
|
|
@ -10,7 +10,7 @@ Congo includes support for Chart.js using the `chart` shortcode. Simply wrap the
|
|||
|
||||
Refer to the [chart shortcode]({{< ref "docs/shortcodes#chart" >}}) docs for more details.
|
||||
|
||||
The examples below are a small selection taken from the [official Chart.js docs](https://www.chartjs.org/docs/latest/samples). You can also [view the page source](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/charts.md) on GitHub to see the markup.
|
||||
The examples below are a small selection taken from the [official Chart.js docs](https://www.chartjs.org/docs/latest/samples). You can also [view the page source](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/charts/index.md) on GitHub to see the markup.
|
||||
|
||||
## Bar chart
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
title: "Diagramme und Flussdiagramme"
|
||||
date: 2019-03-06
|
||||
description: "Leitfaden zur Verwendung von Mermaid in Congo"
|
||||
summary: "Mit Mermaid ist es einfach, Diagramme und Flussdiagramme zu Artikeln hinzuzufügen."
|
||||
tags: ["Mermaid", "Beispiele", "Diagramm", "Shortcodes"]
|
||||
---
|
||||
|
||||
Mermaid-Diagramme werden in Congo mit dem Shortcode `mermaid` unterstützt. Füge einfach das Diagramm-Markup in den Shortcode ein. Congo gestaltet Mermaid-Diagramme automatisch so, dass sie der Konfiguration des Parameters `colorScheme` entsprechen.
|
||||
|
||||
Weitere Details findest du in der [Mermaid-Shortcode-Dokumentation]({{< ref path="docs/shortcodes#mermaid" lang="en">}}).
|
||||
|
||||
Die folgenden Beispiele sind eine kleine Auswahl aus der [offiziellen Mermaid-Dokumentation](https://mermaid-js.github.io/mermaid/). Du kannst auch [die Quelle der Seite](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts/index.de.md) auf GitHub aufrufen, um das Markup zu sehen.
|
||||
|
||||
## Flussdiagramm
|
||||
|
||||
{{< mermaid >}}
|
||||
graph TD
|
||||
A[Weihnachten] -->|Erhalte Geld| B(Geh einkaufen)
|
||||
B --> C{Lass mich nachdenken}
|
||||
B --> G[/Sonstiges/]
|
||||
C ==>|Eins| D[Laptop]
|
||||
C -->|Zwei| E[iPhone]
|
||||
C -->|Drei| F[Auto]
|
||||
subgraph Section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Sequenzdiagramm
|
||||
|
||||
{{< mermaid >}}
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par Action 1
|
||||
Alice->>John: Hallo John, wie geht es dir?
|
||||
and Action 2
|
||||
Alice->>Bob: Hallo Bob, wie geht es dir?
|
||||
end
|
||||
Alice->>+John: Hallo John, wie geht es dir?
|
||||
Alice->>+John: John, kannst du mich hören?
|
||||
John-->>-Alice: Hi Alice, ich kann dich hören!
|
||||
Note right of John: John ist aufmerksam
|
||||
John-->>-Alice: Mir geht es gut!
|
||||
loop Jede Minute
|
||||
John-->Alice: Super!
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Klassendiagramm
|
||||
|
||||
{{< mermaid >}}
|
||||
classDiagram
|
||||
Tier "1" <|-- Ente
|
||||
Tier <|-- Fisch
|
||||
Tier <--o Zebra
|
||||
Tier : +int alter
|
||||
Tier : +String geschlecht
|
||||
Tier: +istSaeugetier()
|
||||
Tier: +paaren()
|
||||
class Ente{
|
||||
+String schnabelFarbe
|
||||
+schwimmen()
|
||||
+quaken()
|
||||
}
|
||||
class Fisch{
|
||||
-int groesseInFuss
|
||||
-canFressen()
|
||||
}
|
||||
class Zebra{
|
||||
+bool ist_wild
|
||||
+rennen()
|
||||
}
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Entitäts-Beziehungs-Diagramm
|
||||
|
||||
{{< mermaid >}}
|
||||
erDiagram
|
||||
KUNDE }|..|{ LIEFER-ADRESSE : hat
|
||||
KUNDE ||--o{ BESTELLUNG : platziert
|
||||
KUNDE ||--o{ RECHNUNG : "zustaendig fuer"
|
||||
LIEFER-ADRESSE ||--o{ BESTELLUNG : erhaelt
|
||||
RECHNUNG ||--|{ BESTELLUNG : "deckt ab"
|
||||
BESTELLUNG ||--|{ BESTELLTES-PRODUKT : enthaelt
|
||||
PRODUKT-KATEGORIE ||--|{ PRODUKT : enthaelt
|
||||
PRODUKT ||--o{ BESTELLTES-PRODUKT : "bestellt in"
|
||||
{{< /mermaid >}}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
title: "Diagramas y diagramas de flujo"
|
||||
date: 2019-03-06
|
||||
description: "Guía para el uso de Mermaid en Congo"
|
||||
summary: "Es fácil agregar diagramas y diagramas de flujo a los artículos usando Mermaid."
|
||||
tags: ["mermaid", "sample", "diagram", "shortcodes"]
|
||||
---
|
||||
|
||||
Los diagramas Mermaid son compatibles con Congo utilizando el shortcode `mermaid`. Simplemente encierra las etiquetas del diagrama dentro del shortcode. Congo crea temas automáticamente a los diagramas Mermaid para que coincidan con el parámetro `colorScheme` configurado.
|
||||
|
||||
Consulta la documentación del [shortcode Mermaid]({{< ref path="docs/shortcodes#mermaid" lang="en" >}}) para obtener más detalles.
|
||||
|
||||
Los ejemplos a continuación son una pequeña selección tomada de la [documentación oficial de Mermaid](https://mermaid-js.github.io/mermaid/). También puedes ver el [código fuente de la página](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts/index.es.md) en GitHub para ver la sintaxis.
|
||||
|
||||
## Diagrama de flujo
|
||||
|
||||
{{< mermaid >}}
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
subgraph Section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Diagrama de secuencia
|
||||
|
||||
{{< mermaid >}}
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par Action 1
|
||||
Alice->>John: Hello John, how are you?
|
||||
and Action 2
|
||||
Alice->>Bob: Hello Bob, how are you?
|
||||
end
|
||||
Alice->>+John: Hello John, how are you?
|
||||
Alice->>+John: John, can you hear me?
|
||||
John-->>-Alice: Hi Alice, I can hear you!
|
||||
Note right of John: John is perceptive
|
||||
John-->>-Alice: I feel great!
|
||||
loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Diagrama de clase
|
||||
|
||||
{{< mermaid >}}
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <--o Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
{{< /mermaid >}}
|
||||
|
||||
## Diagrama entidad-relación
|
||||
|
||||
{{< mermaid >}}
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||||
INVOICE ||--|{ ORDER : covers
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
{{< /mermaid >}}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
title: "ダイアグラムとフローチャート"
|
||||
date: 2019-03-06
|
||||
description: "CongoでMermaidを使うためのガイド"
|
||||
summary: "It's easy to add diagrams and flowcharts to articles using Mermaid."
|
||||
tags: ["mermaid", "sample", "diagram", "shortcodes"]
|
||||
---
|
||||
|
||||
Mermaid構文を `mermaid` で囲むだけで、Congoは設定された `colorScheme` に合わせて図を出力します。
|
||||
|
||||
詳細は[ショートコード - Mermaid]({{< ref "docs/shortcodes#mermaid" >}})を参照してください。
|
||||
|
||||
以下の例は、[Mermaid公式ドキュメント](https://mermaid-js.github.io/mermaid/)から抜粋したものです。GitHubの[ページのソースを見る](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts.md)からもマークアップを見ることができます。
|
||||
|
||||
## フローチャート
|
||||
|
||||
{{< mermaid >}}
|
||||
graph TD
|
||||
A[Christmas] -->|Get money| B(Go shopping)
|
||||
B --> C{Let me think}
|
||||
B --> G[/Another/]
|
||||
C ==>|One| D[Laptop]
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[Car]
|
||||
subgraph Section
|
||||
C
|
||||
D
|
||||
E
|
||||
F
|
||||
G
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
|
||||
## シーケンス図
|
||||
|
||||
{{< mermaid >}}
|
||||
sequenceDiagram
|
||||
autonumber
|
||||
par Action 1
|
||||
Alice->>John: Hello John, how are you?
|
||||
and Action 2
|
||||
Alice->>Bob: Hello Bob, how are you?
|
||||
end
|
||||
Alice->>+John: Hello John, how are you?
|
||||
Alice->>+John: John, can you hear me?
|
||||
John-->>-Alice: Hi Alice, I can hear you!
|
||||
Note right of John: John is perceptive
|
||||
John-->>-Alice: I feel great!
|
||||
loop Every minute
|
||||
John-->Alice: Great!
|
||||
end
|
||||
{{< /mermaid >}}
|
||||
|
||||
## クラス図
|
||||
|
||||
{{< mermaid >}}
|
||||
classDiagram
|
||||
Animal "1" <|-- Duck
|
||||
Animal <|-- Fish
|
||||
Animal <--o Zebra
|
||||
Animal : +int age
|
||||
Animal : +String gender
|
||||
Animal: +isMammal()
|
||||
Animal: +mate()
|
||||
class Duck{
|
||||
+String beakColor
|
||||
+swim()
|
||||
+quack()
|
||||
}
|
||||
class Fish{
|
||||
-int sizeInFeet
|
||||
-canEat()
|
||||
}
|
||||
class Zebra{
|
||||
+bool is_wild
|
||||
+run()
|
||||
}
|
||||
{{< /mermaid >}}
|
||||
|
||||
## ER図
|
||||
|
||||
{{< mermaid >}}
|
||||
erDiagram
|
||||
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
|
||||
CUSTOMER ||--o{ ORDER : places
|
||||
CUSTOMER ||--o{ INVOICE : "liable for"
|
||||
DELIVERY-ADDRESS ||--o{ ORDER : receives
|
||||
INVOICE ||--|{ ORDER : covers
|
||||
ORDER ||--|{ ORDER-ITEM : includes
|
||||
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
|
||||
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
|
||||
{{< /mermaid >}}
|
||||
|
|
@ -10,7 +10,7 @@ Mermaid diagrams are supported in Congo using the `mermaid` shortcode. Simply wr
|
|||
|
||||
Refer to the [mermaid shortcode]({{< ref "docs/shortcodes#mermaid" >}}) docs for more details.
|
||||
|
||||
The examples below are a small selection taken from the [official Mermaid docs](https://mermaid-js.github.io/mermaid/). You can also [view the page source](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts.md) on GitHub to see the markup.
|
||||
The examples below are a small selection taken from the [official Mermaid docs](https://mermaid-js.github.io/mermaid/). You can also [view the page source](https://raw.githubusercontent.com/jpanther/congo/dev/exampleSite/content/samples/diagrams-flowcharts/index.md) on GitHub to see the markup.
|
||||
|
||||
## Flowchart
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
title: "Emoji :parachute:"
|
||||
date: 2019-03-05
|
||||
description: "Leitfaden zur Benutzung von Emoji in Congo"
|
||||
summary: "📖🏞️🧗🏽🐉🧙🏽♂️🧚🏽👸"
|
||||
tags: ["Emoji", "Beispiele"]
|
||||
---
|
||||
|
||||
Congo unterstützt standardmäßig Emoji. Emoji können in Titeln, Menüpunkten und Artikelinhalten verwendet werden.
|
||||
|
||||
{{< alert >}}
|
||||
**Hinweis:** Das Rendering dieser Glyphen hängt vom Browser und von der Plattform ab. Um die Emoji zu gestalten, kannst du entweder eine Emoji-Schriftart eines Drittanbieters oder einen Font Stack verwenden.
|
||||
{{< /alert >}}
|
||||
|
||||
Die Ersetzung von Emoji erfolgt in Congo automatisch, so dass du in deinen Inhalten und im Front Matter Kurzzeichen verwenden können, die zum Zeitpunkt der Erstellung in die entsprechenden Symbole umgewandelt werden.
|
||||
|
||||
**Beispiele für Kurzzeichen:** `see_no_evil` :see_no_evil:, `hear_no_evil` :hear_no_evil:, `speak_no_evil` :speak_no_evil:.
|
||||
|
||||
[Emojipedia](https://emojipedia.org/) ist eine nützliche Referenz für Emoji-Kurzzeichen.
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
title: "Emoji :parachute:"
|
||||
date: 2019-03-05
|
||||
description: "Guide to Emoji usage in Congo"
|
||||
summary: "📖🏞️🧗🏽🐉🧙🏽♂️🧚🏽👸"
|
||||
tags: ["emoji", "sample"]
|
||||
---
|
||||
|
||||
Los Emojis son compatibles en Congo de forma predeterminada. Estos se pueden usar en títulos, elementos de menú y en el contenido de los artículos.
|
||||
|
||||
{{< alert >}}
|
||||
**Note:** La representación de estos glifos depende del navegador y de la plataforma. Para cambiar el estilo del emoji, puedes usar un font de emojis de terceros o una pila de fonts.
|
||||
{{< /alert >}}
|
||||
|
||||
El reemplazo de emojis es automático en Congo, por lo que puedes usar las formas abreviadas dentro de tu contenido y se convertirán a sus símbolos correspondientes en el momento de la compilación.
|
||||
|
||||
**Ejemplo:** `see_no_evil` :see_no_evil:, `hear_no_evil` :hear_no_evil:, `speak_no_evil` :speak_no_evil:.
|
||||
|
||||
[Emojipedia](https://emojipedia.org/) es una referencia útil para los códigos abreviados de los emojis.
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
title: "絵文字 :parachute:"
|
||||
date: 2019-03-05
|
||||
description: "絵文字の使い方について"
|
||||
summary: "📖🏞️🧗🏽🐉🧙🏽♂️🧚🏽👸"
|
||||
tags: ["emoji", "sample"]
|
||||
---
|
||||
|
||||
Congo全体で絵文字（Emoji）をサポートしています。絵文字はタイトル、メニュー項目、記事内容で使用できます。
|
||||
|
||||
{{< alert >}}
|
||||
**注記:** これらのグリフのレンダリングはブラウザとプラットフォームに依存します。絵文字をスタイルするには、サードパーティの絵文字フォントまたはフォントスタックを使用することができます。
|
||||
{{< /alert >}}
|
||||
|
||||
絵文字の置き換えはコンテンツやフロントマターでショートコードを使用すれば、ビルド時に対応するグリフに自動的に変換されます。
|
||||
|
||||
**例:** `see_no_evil` :see_no_evil:, `hear_no_evil` :hear_no_evil:, `speak_no_evil` :speak_no_evil:
|
||||
|
||||
[Emojipedia](https://emojipedia.org/)は、絵文字を探すための便利なリファレンスです。
|
||||
|
|
@ -16,4 +16,4 @@ Emoji replacements are automatic throughout Congo, so you can use shorthand code
|
|||
|
||||
**Example:** `see_no_evil` :see_no_evil:, `hear_no_evil` :hear_no_evil:, `speak_no_evil` :speak_no_evil:.
|
||||
|
||||
The [Emoji cheat sheet](http://www.emoji-cheat-sheet.com/) is a useful reference for emoji shorthand codes.
|
||||
[Emojipedia](https://emojipedia.org/) is a useful reference for emoji shorthand codes.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
title: "Externer Artikel - Why I switched to Fathom Analytics"
|
||||
date: 2019-01-24
|
||||
externalUrl: "https://jamespanther.com/writings/i-switched-from-google-analytics-to-fathom-analytics/"
|
||||
summary: "Der Parameter `externalUrl` im Front Matter kann zu jeder URL verlinken. Der Artikel sieht aus wie jeder andere, aber verlinkt zu einem Post außerhalb des Hugo-Projekts."
|
||||
showReadingTime: false
|
||||
_build:
|
||||
render: "never"
|
||||
list: "local"
|
||||
---
|
||||
|
||||
Diese Seite verwendet den Parameter `externalUrl`, um auf einen Artikel außerhalb dieser Hugo-Website zu verlinken.
|
||||
|
||||
Es ist ideal für Dinge wie die Verlinkung zu Beiträgen auf Medium oder zu wissenschaftlichen Arbeiten, die Sie auf Websites von Dritten gehostet haben.
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
title: "Artículo externo - ¿Por qué cambié a Fathom Analytics?"
|
||||
date: 2019-01-24
|
||||
externalUrl: "https://jamespanther.com/writings/i-switched-from-google-analytics-to-fathom-analytics/"
|
||||
summary: "El parámetro `externalUrl` se puede vincular a cualquier URL. Este artículo se parece a cualquier otro, pero se vinculará a una publicación que está fuera del proyecto."
|
||||
showReadingTime: false
|
||||
_build:
|
||||
render: "never"
|
||||
list: "local"
|
||||
---
|
||||
|
||||
Esta página utiliza el parámetro `externalUrl` para vincularlo a un artículo fuera de este sitio web.
|
||||
|
||||
Es ideal para cosas como enlaces a publicaciones en Medium o para trabajos de investigación que puede haber alojado en sitios web de terceros.
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
title: "外部記事 - 私がFathom Analyticsに乗り換えた理由"
|
||||
date: 2019-01-24
|
||||
externalUrl: "https://jamespanther.com/writings/i-switched-from-google-analytics-to-fathom-analytics/"
|
||||
summary: "`externalUrl` フロントマターパラメーターは任意のURLにリンクすることができます。この記事は他の記事と同じように見えますが、このウェブサイトの外にある記事にリンクしています。"
|
||||
showReadingTime: false
|
||||
_build:
|
||||
render: "never"
|
||||
list: "local"
|
||||
---
|
||||
|
||||
`externalUrl` フロントマターパラメーターを使用して、このウェブサイトの外の記事にリンクします。
|
||||
|
||||
Mediumの投稿や、第三者のウェブサイトでホストしている研究論文へのリンクなどに最適です。
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
title: "Icons"
|
||||
date: 2020-08-14
|
||||
lastmod: 2023-01-23
|
||||
draft: false
|
||||
description: "Icon-Unterstützung in Congo."
|
||||
slug: "icons"
|
||||
tags: ["Icons", "Beispiele", "Shortcodes"]
|
||||
showDateUpdated: true
|
||||
---
|
||||
|
||||
Congo hat integrierte Unterstützung für eine Reihe von Icons von [FontAwesome 6](https://fontawesome.com/icons). Diese können entweder über den Partial [icon]({{< ref path="docs/partials#icon" lang="en" >}}) oder Shortcode [icon]({{< ref path="docs/shortcodes#icon" lang="en">}}) in deine Website eingebunden werden.
|
||||
|
||||
Darüber hinaus werden auch benutzerdefinierte Icons vollständig unterstützt. Du kannst deine eigenen SVG-Icon-Assets im Ordner `assets/icons/` im Stammverzeichnis deines Projekts ablegen. Alle Icons in diesem Verzeichnis stehen dann im gesamten Theme zur Verfügung.
|
||||
|
||||
Die vollständige Liste der integrierten Icons und ihre entsprechenden Namen findest du unten.
|
||||
|
||||
| Icon-Name | Vorschau |
|
||||
| -------------------- | --------------------------------- |
|
||||
| amazon | {{< icon amazon >}} |
|
||||
| apple | {{< icon apple >}} |
|
||||
| bars | {{< icon bars >}} |
|
||||
| blogger | {{< icon blogger >}} |
|
||||
| bug | {{< icon bug >}} |
|
||||
| check | {{< icon check >}} |
|
||||
| chevron-down | {{< icon chevron-down >}} |
|
||||
| chevron-up | {{< icon chevron-up >}} |
|
||||
| circle-info | {{< icon circle-info >}} |
|
||||
| codepen | {{< icon codepen >}} |
|
||||
| coffee | {{< icon coffee >}} |
|
||||
| comment | {{< icon comment >}} |
|
||||
| dev | {{< icon dev >}} |
|
||||
| dribbble | {{< icon dribbble >}} |
|
||||
| edit | {{< icon edit >}} |
|
||||
| email | {{< icon email >}} |
|
||||
| facebook | {{< icon facebook >}} |
|
||||
| flickr | {{< icon flickr >}} |
|
||||
| foursquare | {{< icon foursquare >}} |
|
||||
| github | {{< icon github >}} |
|
||||
| gitlab | {{< icon gitlab >}} |
|
||||
| globe | {{< icon globe >}} |
|
||||
| google | {{< icon google >}} |
|
||||
| hashnode | {{< icon hashnode >}} |
|
||||
| instagram | {{< icon instagram >}} |
|
||||
| keybase | {{< icon keybase >}} |
|
||||
| kickstarter | {{< icon kickstarter >}} |
|
||||
| lastfm | {{< icon lastfm >}} |
|
||||
| lightbulb | {{< icon lightbulb >}} |
|
||||
| link | {{< icon link >}} |
|
||||
| linkedin | {{< icon linkedin >}} |
|
||||
| list | {{< icon list >}} |
|
||||
| mastodon | {{< icon mastodon >}} |
|
||||
| medium | {{< icon medium >}} |
|
||||
| microsoft | {{< icon microsoft >}} |
|
||||
| mobile | {{< icon mobile >}} |
|
||||
| moon | {{< icon moon >}} |
|
||||
| orcid | {{< icon orcid >}} |
|
||||
| patreon | {{< icon patreon >}} |
|
||||
| pencil | {{< icon pencil >}} |
|
||||
| phone | {{< icon phone >}} |
|
||||
| pinterest | {{< icon pinterest >}} |
|
||||
| reddit | {{< icon reddit >}} |
|
||||
| researchgate | {{< icon researchgate >}} |
|
||||
| search | {{< icon search >}} |
|
||||
| skull-crossbones | {{< icon skull-crossbones >}} |
|
||||
| slack | {{< icon slack >}} |
|
||||
| snapchat | {{< icon snapchat >}} |
|
||||
| soundcloud | {{< icon soundcloud >}} |
|
||||
| stack-overflow | {{< icon stack-overflow >}} |
|
||||
| steam | {{< icon steam >}} |
|
||||
| sun | {{< icon sun >}} |
|
||||
| tag | {{< icon tag >}} |
|
||||
| telegram | {{< icon telegram >}} |
|
||||
| tiktok | {{< icon tiktok >}} |
|
||||
| translate | {{< icon translate >}} |
|
||||
| triangle-exclamation | {{< icon triangle-exclamation >}} |
|
||||
| tumblr | {{< icon tumblr >}} |
|
||||
| twitch | {{< icon twitch >}} |
|
||||
| twitter | {{< icon twitter >}} |
|
||||
| whatsapp | {{< icon whatsapp >}} |
|
||||
| x-twitter | {{< icon x-twitter >}} |
|
||||
| xmark | {{< icon xmark >}} |
|
||||
| youtube | {{< icon youtube >}} |
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
title: "Iconos"
|
||||
date: 2020-08-14
|
||||
lastmod: 2023-01-23
|
||||
draft: false
|
||||
description: Soporte de iconos en Congo."
|
||||
slug: "icons"
|
||||
tags: ["icons", "sample", "shortcodes"]
|
||||
showDateUpdated: true
|
||||
---
|
||||
|
||||
Congo tiene soporte integrado para varios íconos de [FontAwesome 6](https://fontawesome.com/icons). Estos se pueden incluir en su sitio web a través del [ícono parcial]({{< ref path="docs/partials#icon" lang="en" >}}) o el [código abreviado]({{< ref path="docs/shortcodes#icon" lang="en" >}}) del ícono.
|
||||
|
||||
Además, los íconos personalizados también son totalmente compatibles. Simplemente proporcione sus propios archivos en formato SVG y coloquelos en el directorio `assets/icons/` en la raíz de su proyecto. Cualquier ícono en el directorio de íconos estará disponible para usar en todo el tema.
|
||||
|
||||
La lista completa de íconos incorporados y sus nombres correspondientes se pueden consultar a continuación.
|
||||
|
||||
| Nombre del ícono | Previsualización |
|
||||
| -------------------- | --------------------------------- |
|
||||
| amazon | {{< icon amazon >}} |
|
||||
| apple | {{< icon apple >}} |
|
||||
| bars | {{< icon bars >}} |
|
||||
| blogger | {{< icon blogger >}} |
|
||||
| bug | {{< icon bug >}} |
|
||||
| check | {{< icon check >}} |
|
||||
| chevron-down | {{< icon chevron-down >}} |
|
||||
| chevron-up | {{< icon chevron-up >}} |
|
||||
| circle-info | {{< icon circle-info >}} |
|
||||
| codepen | {{< icon codepen >}} |
|
||||
| coffee | {{< icon coffee >}} |
|
||||
| comment | {{< icon comment >}} |
|
||||
| dev | {{< icon dev >}} |
|
||||
| dribbble | {{< icon dribbble >}} |
|
||||
| edit | {{< icon edit >}} |
|
||||
| email | {{< icon email >}} |
|
||||
| facebook | {{< icon facebook >}} |
|
||||
| flickr | {{< icon flickr >}} |
|
||||
| foursquare | {{< icon foursquare >}} |
|
||||
| github | {{< icon github >}} |
|
||||
| gitlab | {{< icon gitlab >}} |
|
||||
| globe | {{< icon globe >}} |
|
||||
| google | {{< icon google >}} |
|
||||
| hashnode | {{< icon hashnode >}} |
|
||||
| instagram | {{< icon instagram >}} |
|
||||
| keybase | {{< icon keybase >}} |
|
||||
| kickstarter | {{< icon kickstarter >}} |
|
||||
| lastfm | {{< icon lastfm >}} |
|
||||
| lightbulb | {{< icon lightbulb >}} |
|
||||
| link | {{< icon link >}} |
|
||||
| linkedin | {{< icon linkedin >}} |
|
||||
| list | {{< icon list >}} |
|
||||
| mastodon | {{< icon mastodon >}} |
|
||||
| medium | {{< icon medium >}} |
|
||||
| microsoft | {{< icon microsoft >}} |
|
||||
| mobile | {{< icon mobile >}} |
|
||||
| moon | {{< icon moon >}} |
|
||||
| orcid | {{< icon orcid >}} |
|
||||
| patreon | {{< icon patreon >}} |
|
||||
| pencil | {{< icon pencil >}} |
|
||||
| phone | {{< icon phone >}} |
|
||||
| pinterest | {{< icon pinterest >}} |
|
||||
| reddit | {{< icon reddit >}} |
|
||||
| researchgate | {{< icon researchgate >}} |
|
||||
| search | {{< icon search >}} |
|
||||
| skull-crossbones | {{< icon skull-crossbones >}} |
|
||||
| slack | {{< icon slack >}} |
|
||||
| snapchat | {{< icon snapchat >}} |
|
||||
| soundcloud | {{< icon soundcloud >}} |
|
||||
| stack-overflow | {{< icon stack-overflow >}} |
|
||||
| steam | {{< icon steam >}} |
|
||||
| sun | {{< icon sun >}} |
|
||||
| tag | {{< icon tag >}} |
|
||||
| telegram | {{< icon telegram >}} |
|
||||
| tiktok | {{< icon tiktok >}} |
|
||||
| translate | {{< icon translate >}} |
|
||||
| triangle-exclamation | {{< icon triangle-exclamation >}} |
|
||||
| tumblr | {{< icon tumblr >}} |
|
||||
| twitch | {{< icon twitch >}} |
|
||||
| twitter | {{< icon twitter >}} |
|
||||
| whatsapp | {{< icon whatsapp >}} |
|
||||
| x-twitter | {{< icon x-twitter >}} |
|
||||
| xmark | {{< icon xmark >}} |
|
||||
| youtube | {{< icon youtube >}} |
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
---
|
||||
title: "アイコン"
|
||||
date: 2020-08-14
|
||||
lastmod: 2023-01-23
|
||||
draft: false
|
||||
description: "Congoでサポートされるアイコン"
|
||||
slug: "icons"
|
||||
tags: ["icons", "sample", "shortcodes"]
|
||||
showDateUpdated: true
|
||||
---
|
||||
|
||||
Congo は[FontAwesome 6](https://fontawesome.com/icons)のアイコンをサポートしています。これらのアイコンは、[パーシャル - アイコン]({{< ref "docs/partials#アイコン" >}}) または [ショートコード - アイコン]({{< ref "docs/shortcodes#アイコン" >}}) のいずれかを使ってウェブサイトに含めることができます。
|
||||
|
||||
さらに、カスタムアイコンも完全にサポートされています。プロジェクトのルートにある `assets/icons/` ディレクトリに SVG アイコンアセットを置くだけです。ディレクトリ内のアイコンは、テーマ全体で使用できるようになります。
|
||||
|
||||
内蔵アイコンの全リストと対応する名称は以下を参照してください。
|
||||
|
||||
| Icon name | Preview |
|
||||
| -------------------- | --------------------------------- |
|
||||
| amazon | {{< icon amazon >}} |
|
||||
| apple | {{< icon apple >}} |
|
||||
| bars | {{< icon bars >}} |
|
||||
| blogger | {{< icon blogger >}} |
|
||||
| bug | {{< icon bug >}} |
|
||||
| check | {{< icon check >}} |
|
||||
| chevron-down | {{< icon chevron-down >}} |
|
||||
| chevron-up | {{< icon chevron-up >}} |
|
||||
| circle-info | {{< icon circle-info >}} |
|
||||
| codepen | {{< icon codepen >}} |
|
||||
| coffee | {{< icon coffee >}} |
|
||||
| comment | {{< icon comment >}} |
|
||||
| dev | {{< icon dev >}} |
|
||||
| dribbble | {{< icon dribbble >}} |
|
||||
| edit | {{< icon edit >}} |
|
||||
| email | {{< icon email >}} |
|
||||
| facebook | {{< icon facebook >}} |
|
||||
| flickr | {{< icon flickr >}} |
|
||||
| foursquare | {{< icon foursquare >}} |
|
||||
| github | {{< icon github >}} |
|
||||
| gitlab | {{< icon gitlab >}} |
|
||||
| globe | {{< icon globe >}} |
|
||||
| google | {{< icon google >}} |
|
||||
| hashnode | {{< icon hashnode >}} |
|
||||
| instagram | {{< icon instagram >}} |
|
||||
| keybase | {{< icon keybase >}} |
|
||||
| kickstarter | {{< icon kickstarter >}} |
|
||||
| lastfm | {{< icon lastfm >}} |
|
||||
| lightbulb | {{< icon lightbulb >}} |
|
||||
| link | {{< icon link >}} |
|
||||
| linkedin | {{< icon linkedin >}} |
|
||||
| list | {{< icon list >}} |
|
||||
| mastodon | {{< icon mastodon >}} |
|
||||
| medium | {{< icon medium >}} |
|
||||
| microsoft | {{< icon microsoft >}} |
|
||||
| mobile | {{< icon mobile >}} |
|
||||
| moon | {{< icon moon >}} |
|
||||
| orcid | {{< icon orcid >}} |
|
||||
| patreon | {{< icon patreon >}} |
|
||||
| pencil | {{< icon pencil >}} |
|
||||
| phone | {{< icon phone >}} |
|
||||
| pinterest | {{< icon pinterest >}} |
|
||||
| reddit | {{< icon reddit >}} |
|
||||
| researchgate | {{< icon researchgate >}} |
|
||||
| search | {{< icon search >}} |
|
||||
| skull-crossbones | {{< icon skull-crossbones >}} |
|
||||
| slack | {{< icon slack >}} |
|
||||
| snapchat | {{< icon snapchat >}} |
|
||||
| soundcloud | {{< icon soundcloud >}} |
|
||||
| stack-overflow | {{< icon stack-overflow >}} |
|
||||
| steam | {{< icon steam >}} |
|
||||
| sun | {{< icon sun >}} |
|
||||
| tag | {{< icon tag >}} |
|
||||
| telegram | {{< icon telegram >}} |
|
||||
| tiktok | {{< icon tiktok >}} |
|
||||
| translate | {{< icon translate >}} |
|
||||
| triangle-exclamation | {{< icon triangle-exclamation >}} |
|
||||
| tumblr | {{< icon tumblr >}} |
|
||||
| twitch | {{< icon twitch >}} |
|
||||
| twitter | {{< icon twitter >}} |
|
||||
| whatsapp | {{< icon whatsapp >}} |
|
||||
| x-twitter | {{< icon x-twitter >}} |
|
||||
| xmark | {{< icon xmark >}} |
|
||||
| youtube | {{< icon youtube >}} |
|
||||
|
|
@ -23,8 +23,11 @@ The full list of built-in icons and their corresponding names can referenced bel
|
|||
| blogger | {{< icon blogger >}} |
|
||||
| bug | {{< icon bug >}} |
|
||||
| check | {{< icon check >}} |
|
||||
| chevron-down | {{< icon chevron-down >}} |
|
||||
| chevron-up | {{< icon chevron-up >}} |
|
||||
| circle-info | {{< icon circle-info >}} |
|
||||
| codepen | {{< icon codepen >}} |
|
||||
| coffee | {{< icon coffee >}} |
|
||||
| comment | {{< icon comment >}} |
|
||||
| dev | {{< icon dev >}} |
|
||||
| dribbble | {{< icon dribbble >}} |
|
||||
|
|
@ -35,6 +38,7 @@ The full list of built-in icons and their corresponding names can referenced bel
|
|||
| foursquare | {{< icon foursquare >}} |
|
||||
| github | {{< icon github >}} |
|
||||
| gitlab | {{< icon gitlab >}} |
|
||||
| globe | {{< icon globe >}} |
|
||||
| google | {{< icon google >}} |
|
||||
| hashnode | {{< icon hashnode >}} |
|
||||
| instagram | {{< icon instagram >}} |
|
||||
|
|
@ -68,10 +72,12 @@ The full list of built-in icons and their corresponding names can referenced bel
|
|||
| tag | {{< icon tag >}} |
|
||||
| telegram | {{< icon telegram >}} |
|
||||
| tiktok | {{< icon tiktok >}} |
|
||||
| translate | {{< icon translate >}} |
|
||||
| triangle-exclamation | {{< icon triangle-exclamation >}} |
|
||||
| tumblr | {{< icon tumblr >}} |
|
||||
| twitch | {{< icon twitch >}} |
|
||||
| twitter | {{< icon twitter >}} |
|
||||
| whatsapp | {{< icon whatsapp >}} |
|
||||
| x-twitter | {{< icon x-twitter >}} |
|
||||
| xmark | {{< icon xmark >}} |
|
||||
| youtube | {{< icon youtube >}} |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,145 @@
|
|||
---
|
||||
title: "Markdown"
|
||||
date: 2019-03-11
|
||||
description: "Beispielartikel, der die grundlegende Markdown-Syntax und die Formatierung von HTML-Elementen zeigt."
|
||||
tags: ["Markdown", "CSS", "HTML", "Beispiele"]
|
||||
---
|
||||
|
||||
Dieser Artikel bietet ein Beispiel für die grundlegende Markdown-Formatierung, die in Congo verwendet werden kann, und zeigt auch, wie einige grundlegende HTML-Elemente genutzt werden können.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Überschriften
|
||||
|
||||
Die folgenden HTML-Elemente `<h1>`-`<h6>` stellen sechs Ebenen von Abschnittsüberschriften dar. `<h1>` ist die höchste Abschnittsebene, während `<h6>` die niedrigste ist.
|
||||
|
||||
# H1
|
||||
|
||||
## H2
|
||||
|
||||
### H3
|
||||
|
||||
#### H4
|
||||
|
||||
##### H5
|
||||
|
||||
###### H6
|
||||
|
||||
## Absatz
|
||||
|
||||
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||
|
||||
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||
|
||||
## Zitate als Block
|
||||
|
||||
Das blockquote-Element stellt Inhalte dar, die aus einer anderen Quelle zitiert werden, optional mit einem Zitat, das sich innerhalb eines `footer`- oder `cite`-Elements befinden muss, und optional mit Inline-Änderungen wie Anmerkungen und Abkürzungen.
|
||||
|
||||
### Zitat als Block ohne Quellenangabe
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Hinweis**: _Markdown-Syntax_ kann innerhalb eines Zitat-Blocks verwendet werden.
|
||||
|
||||
### Zitat als Block ohne Quellenangabe
|
||||
|
||||
> Kommunizieren Sie nicht, indem Sie Erinnerungen teilen, sondern teilen Sie Erinnerungen, indem Sie kommunizieren.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: Das obige Zitat ist ein Auszug aus Rob Pikes [talk `about` nothing] (https://www.youtube.com/watch?v=PAAkCSZUG1c) während des Gopherfestes am 18. November 2015.
|
||||
|
||||
## Tabellen
|
||||
|
||||
Tabellen sind nicht Teil der Markdown-Kernspezifikation, aber Hugo unterstützt sie standardmäßig.
|
||||
|
||||
| Name | Alter |
|
||||
| ----- | ----- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
|
||||
### Inline-Markdown innerhalb von Tabellen
|
||||
|
||||
| Kursiv | Fett | Code |
|
||||
| -------- | -------- | ------ |
|
||||
| _kursiv_ | **fett** | `code` |
|
||||
|
||||
## Code-Blöcke
|
||||
|
||||
### Code-Block mit backticks
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Code-Block eingerückt mit vier Leerzeichen
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
### Code-Block mit Hugos internem highlight-Shortcode
|
||||
|
||||
{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
{{< /highlight >}}
|
||||
|
||||
## Arten von Listen
|
||||
|
||||
### Geordnete Liste
|
||||
|
||||
1. Erster Eintrag
|
||||
2. Zweiter Eintrag
|
||||
3. Dritter Eintrag
|
||||
|
||||
### Ungeordnete Liste
|
||||
|
||||
- Listen-Eintrag
|
||||
- weiterer Eintrag
|
||||
- noch ein weiterer Eintrag
|
||||
|
||||
### Geschachtelte Liste
|
||||
|
||||
- Obst
|
||||
- Apfel
|
||||
- Orange
|
||||
- Banane
|
||||
- Milchprodukte
|
||||
- Milch
|
||||
- Käse
|
||||
|
||||
## Andere Elemente — abbr, sub, sup, kbd, mark
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> ist ein Bitmap-Bildformat.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Drücke <kbd>STRG</kbd>+<kbd>ALT</kbd>+<kbd>Entf</kbd>, um die Sitzung zu beenden.
|
||||
|
||||
Die meisten <mark>Salamander</mark> sind nachtaktiv und jagen nach Insekten, Würmern und anderen kleinen Lebewesen.
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
---
|
||||
title: "Markdown"
|
||||
date: 2019-03-11
|
||||
description: "Ejemplo de artículo que muestra la sintaxis y el formato básico de Markdown para elementos HTML."
|
||||
tags: ["markdown", "css", "html", "sample"]
|
||||
---
|
||||
|
||||
Este artículo es la sintaxis de Markdown que se puede usar en Congo. También muestra cómo se decoran algunos elementos básicos de HTML.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Encabezados
|
||||
|
||||
Los siguientes elementos HTML `<h1>`—`<h6>` representan seis niveles de encabezados. `<h1>` es el nivel de sección más alto, mientras que `<h6>` es el más bajo.
|
||||
|
||||
# H1
|
||||
|
||||
## H2
|
||||
|
||||
### H3
|
||||
|
||||
#### H4
|
||||
|
||||
##### H5
|
||||
|
||||
###### H6
|
||||
|
||||
## Párrafo
|
||||
|
||||
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||
|
||||
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||
|
||||
## Citas en bloque
|
||||
|
||||
Las citas en bloque representan contenido que se cita de otra fuente, opcionalmente con una cita que debe estar dentro de un elemento `footer` o `cite`, y opcionalmente con cambios en línea como anotaciones y abreviaturas.
|
||||
|
||||
### Cita en bloque sin atribución
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Nota** puedes usar _Sintaxis Markdown_ dentro de la cita en bloque.
|
||||
|
||||
### Cita en bloque con atribución
|
||||
|
||||
> Don't communicate by sharing memory, share memory by communicating.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: La cita anterior es un extracto de [talk `about` nothing](https://www.youtube.com/watch?v=PAAkCSZUG1c) durante el Gopherfest, November 18, 2015.
|
||||
|
||||
## Tablas
|
||||
|
||||
Las tablas no forman parte de la especificación principal de Markdown, pero Hugo las soporta por defecto.
|
||||
|
||||
| Nombre | Edad |
|
||||
| ------ | ---- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
|
||||
### Markdown dentro de las tablas
|
||||
|
||||
| Cursiva | Negritas | Código |
|
||||
| --------- | ---------- | -------- |
|
||||
| _Cursiva_ | **Negrita** | `Código` |
|
||||
|
||||
## Bloques de código
|
||||
|
||||
### Bloque de código con acentos graves
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Bloque de código indentado con cuatro espacios
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
### Bloque de código con resaltado usando el shortcode interno de Hugo
|
||||
|
||||
{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
{{< /highlight >}}
|
||||
|
||||
## Tipos de lista
|
||||
|
||||
### Lista ordenada
|
||||
|
||||
1. Primer artículo
|
||||
2. Segundo artículo
|
||||
3. Tercer artículo
|
||||
|
||||
### Lista desordenada
|
||||
|
||||
- Elemento de la lista
|
||||
- Otro artículo
|
||||
- Un artículo más
|
||||
|
||||
### Lista anidada
|
||||
|
||||
- Fruta
|
||||
- Manzana
|
||||
- Naranja
|
||||
- Platano
|
||||
- Lácteos
|
||||
- Leche
|
||||
- Queso
|
||||
|
||||
## Otros elementos — abbr, sub, sup, kbd, mark
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr> es un formato de imagen de mapa de bits.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
Presiona <kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd> para terminar la sesión.
|
||||
|
||||
La mayoría de las <mark>salamandras</mark> son nocturnas y cazan insectos, gusanos y otras criaturas pequeñas.
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
---
|
||||
title: "Markdown"
|
||||
date: 2019-03-11
|
||||
description: "基本的なMarkdown構文とHTML要素のフォーマットを紹介するサンプル"
|
||||
tags: ["markdown", "css", "html", "sample"]
|
||||
---
|
||||
|
||||
この記事では、Congoで使用できる基本的なMarkdownフォーマットのサンプルを提供し、またいくつかの基本的なHTML要素がどのように装飾されているかを示します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 見出し
|
||||
|
||||
以下のHTMLの `<h1>` から `<h6>` 要素は6段階のセクション見出しを表します。 `<h1>` は最も高いセクションレベルであり、 `<h6>` は最も低いセクションレベルです。
|
||||
|
||||
# H1
|
||||
|
||||
## H2
|
||||
|
||||
### H3
|
||||
|
||||
#### H4
|
||||
|
||||
##### H5
|
||||
|
||||
###### H6
|
||||
|
||||
## パラグラフ
|
||||
|
||||
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
|
||||
|
||||
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
|
||||
|
||||
## Blockquotes
|
||||
|
||||
`blockquote` 要素は他のソースから引用された内容を表し、オプションとして引用元を `footer` 要素または `cite` 要素内に記述します。注釈や省略形などのインライン変更を記述することもできます。
|
||||
|
||||
### Blockquote without attribution
|
||||
|
||||
> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
|
||||
> **Note** that you can use _Markdown syntax_ within a blockquote.
|
||||
|
||||
### Blockquote with attribution
|
||||
|
||||
> Don't communicate by sharing memory, share memory by communicating.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: The above quote is excerpted from Rob Pike's [talk `about` nothing](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
|
||||
|
||||
## 表
|
||||
|
||||
表はMarkdownのコア仕様には含まれていませんが、Hugoはサポートしています。
|
||||
|
||||
| 名前 | 年齢 |
|
||||
| ----- | --- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
|
||||
### 表中のMarkdown
|
||||
|
||||
| Italics | Bold | Code |
|
||||
| --------- | -------- | ------ |
|
||||
| _italics_ | **bold** | `code` |
|
||||
|
||||
## Code Blocks
|
||||
|
||||
### Code block with backticks
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Code block indented with four spaces
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
### Code block with Hugo's internal highlight shortcode
|
||||
|
||||
{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Example HTML5 Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test</p>
|
||||
</body>
|
||||
</html>
|
||||
{{< /highlight >}}
|
||||
|
||||
## リスト
|
||||
|
||||
### 順序付きリスト
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
### 順序なしリスト
|
||||
|
||||
- List item
|
||||
- Another item
|
||||
- And another item
|
||||
|
||||
### ネストしたリスト
|
||||
|
||||
- Fruit
|
||||
- Apple
|
||||
- Orange
|
||||
- Banana
|
||||
- Dairy
|
||||
- Milk
|
||||
- Cheese
|
||||
|
||||
## その他の要素 — abbr, sub, sup, kbd, mark
|
||||
|
||||
<abbr title="Graphics Interchange Format">GIF</abbr>はビットマップ形式の画像です.
|
||||
|
||||
H<sub>2</sub>O
|
||||
|
||||
X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
|
||||
|
||||
<kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>Delete</kbd>を押下してください。
|
||||
|
||||
ほとんどの<mark>サンショウウオ</mark>は夜行性で、昆虫やミミズなどの小さな生き物を狩る。
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
title: Mathematische Notation
|
||||
date: 2019-03-08
|
||||
description: Ein kurzes Beispiel für die mathematische Notation in Congo.
|
||||
tags: ["Beispiele", "KaTeX", "Mathematik", "Shortcodes"]
|
||||
---
|
||||
|
||||
KaTeX kann verwendet werden, um mathematische Notationen in Artikeln darzustellen.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< katex >}}
|
||||
|
||||
Congo bindet die KaTeX-Assets nur dann in das Projekt ein, wenn die mathematische Notation verwendet wird. Damit dies funktioniert, kann einfach der Shortcode [`katex`]({{< ref path="docs/shortcodes#katex" lang="en" >}}) in den Artikel eingefügt werden. Jede KaTeX-Syntax auf dieser Seite wird dann automatisch gerendert.
|
||||
|
||||
Die Online-Referenz der [unterstützten TeX-Funktionen](https://katex.org/docs/supported.html) zeigt Syntax-Beispiele.
|
||||
|
||||
## Inline-Schreibweise
|
||||
|
||||
Die Inline-Schreibweise kann erzeugt werden, indem der Ausdruck in die Trennzeichen `\(` und `\)` eingeschlossen wird.
|
||||
|
||||
**Beispiel:**
|
||||
|
||||
```tex
|
||||
% KaTeX Inline-Schreibweise
|
||||
Inline-Schreibweise: \\(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\\)
|
||||
```
|
||||
|
||||
Inline-Schreibweise: \\(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\\)
|
||||
|
||||
## Schreibweise als Block
|
||||
|
||||
Alternativ kann die Blockschreibweise mit Hilfe von `$$`-Trennzeichen erzeugt werden. Dadurch wird der Ausdruck in einem eigenen HTML-Block ausgegeben.
|
||||
|
||||
**Beispiel:**
|
||||
|
||||
```tex
|
||||
% KaTeX mit Block-Schreibweise
|
||||
$$
|
||||
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
|
||||
$$
|
||||
```
|
||||
|
||||
$$
|
||||
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
|
||||
$$
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
title: Notación matemática
|
||||
date: 2019-03-08
|
||||
description: Una breve muestra de notación matemática en Congo.
|
||||
tags: ["sample", "katex", "maths", "shortcodes"]
|
||||
---
|
||||
|
||||
Una breve muestra de notación matemática en Congo.
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< katex >}}
|
||||
|
||||
Congo solo incluirá los assets de KaTeX en su proyecto si utiliza notación matemática. Para que esto funcione, simplemente incluya el [`katex` shortcode]({{< ref path="docs/shortcodes#katex" lang="en" >}}) dentro del artículo. Cualquier sintaxis de KaTeX en esa página se renderizará automáticamente.
|
||||
|
||||
Utilice la documentación en línea de [funciones TeX admitidas](https://katex.org/docs/supported.html) para conocer la sintaxis disponible.
|
||||
|
||||
## Notación en línea
|
||||
|
||||
La notación en línea se puede generar envolviendo la expresión en los delimitadores `\\(` y `\\)`.
|
||||
|
||||
**Ejemplo:**
|
||||
|
||||
```tex
|
||||
% KaTeX notación en línea
|
||||
Notación en línea: \\(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\\)
|
||||
```
|
||||
|
||||
Notación en línea: \\(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\\)
|
||||
|
||||
## Notación en bloque
|
||||
|
||||
Alternativamente, la notación en bloque se puede generar usando delimitadores `$$`. Esto generará la expresión en su propio bloque HTML.
|
||||
|
||||
**Ejemplo:**
|
||||
|
||||
```tex
|
||||
% KaTeX notación en bloque
|
||||
$$
|
||||
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
|
||||
$$
|
||||
```
|
||||
|
||||
$$
|
||||
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
|
||||
$$
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
---
|
||||
title: 数学的表記
|
||||
date: 2019-03-08
|
||||
description: Congoによる数学的表記の簡単なサンプル
|
||||
tags: ["sample", "katex", "maths", "shortcodes"]
|
||||
---
|
||||
|
||||
記事中の数学的表記にKaTeXを使用することができます。
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< katex >}}
|
||||
|
||||
Congoは、数学的表記を使用する場合にのみ、KaTeXアセットをプロジェクトにバンドルします。これを動作させるには、単に記事内に[`katex` ショートコード]({{< ref "docs/shortcodes#katex" >}})をインクルードしてください。そのページ上のKaTeX構文は自動的にレンダリングされます。
|
||||
|
||||
使用可能な構文については、[supported TeX functions](https://katex.org/docs/supported.html)のオンラインリファレンスを参照してください。
|
||||
|
||||
## インライン記法
|
||||
|
||||
インライン記法は、式を `\\(` と `\\)` で囲むことで生成できます。
|
||||
|
||||
**例:**
|
||||
|
||||
```tex
|
||||
% KaTeX inline notation
|
||||
インライン記法: \\(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\\)
|
||||
```
|
||||
|
||||
インライン記法: \\(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\\)
|
||||
|
||||
## ブロック記法
|
||||
|
||||
あるいは、 `$$` を使ってブロック記法で生成することもできます。これは式を独自のHTMLブロックとして出力します。
|
||||
|
||||
**例:**
|
||||
|
||||
```tex
|
||||
% KaTeX block notation
|
||||
$$
|
||||
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
|
||||
$$
|
||||
```
|
||||
|
||||
$$
|
||||
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
|
||||
$$
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
title: "Platzhalter-Text"
|
||||
date: "2019-03-09"
|
||||
lastmod: "2022-01-24"
|
||||
draft: true
|
||||
description: "Lorem Ipsum Dolor Si Amet"
|
||||
tags: ["markdown", "text", "sample", "latin"]
|
||||
showDateUpdated: true
|
||||
xml: false
|
||||
---
|
||||
|
||||
Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
|
||||
|
||||
1. Exierant elisi ambit vivere dedere
|
||||
2. Duce pollice
|
||||
3. Eris modo
|
||||
4. Spargitque ferrea quos palude
|
||||
|
||||
Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
|
||||
|
||||
1. Comas hunc haec pietate fetum procerum dixit
|
||||
2. Post torum vates letum Tiresia
|
||||
3. Flumen querellas
|
||||
4. Arcanaque montibus omnes
|
||||
5. Quidem et
|
||||
|
||||
## Vagus elidunt
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="186" width="248"><g fill="none"><path stroke="#000" stroke-width="2" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width="2" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width="2" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx="2" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx="2" ry="1.25"></ellipse></g></svg>
|
||||
|
||||
[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
|
||||
|
||||
### Mane refeci capiebant unda mulcebat
|
||||
|
||||
Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
|
||||
|
||||
Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
|
||||
|
||||
Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
title: "Placeholder Text"
|
||||
date: "2019-03-09"
|
||||
lastmod: "2022-01-24"
|
||||
draft: true
|
||||
description: "Lorem Ipsum Dolor Si Amet"
|
||||
tags: ["markdown", "text", "sample", "latin"]
|
||||
showDateUpdated: true
|
||||
xml: false
|
||||
---
|
||||
|
||||
Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
|
||||
|
||||
1. Exierant elisi ambit vivere dedere
|
||||
2. Duce pollice
|
||||
3. Eris modo
|
||||
4. Spargitque ferrea quos palude
|
||||
|
||||
Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
|
||||
|
||||
1. Comas hunc haec pietate fetum procerum dixit
|
||||
2. Post torum vates letum Tiresia
|
||||
3. Flumen querellas
|
||||
4. Arcanaque montibus omnes
|
||||
5. Quidem et
|
||||
|
||||
## Vagus elidunt
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="186" width="248"><g fill="none"><path stroke="#000" stroke-width="2" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width="2" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width="2" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx="2" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx="2" ry="1.25"></ellipse></g></svg>
|
||||
|
||||
[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
|
||||
|
||||
### Mane refeci capiebant unda mulcebat
|
||||
|
||||
Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
|
||||
|
||||
Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
|
||||
|
||||
Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
---
|
||||
title: "プレースホルダー"
|
||||
date: "2019-03-09"
|
||||
lastmod: "2022-01-24"
|
||||
draft: true
|
||||
description: "Lorem Ipsum Dolor Si Amet"
|
||||
tags: ["markdown", "text", "sample", "latin"]
|
||||
showDateUpdated: true
|
||||
xml: false
|
||||
---
|
||||
|
||||
Lorem est tota propiore conpellat pectoribus de pectora summo. <!--more-->Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
|
||||
|
||||
1. Exierant elisi ambit vivere dedere
|
||||
2. Duce pollice
|
||||
3. Eris modo
|
||||
4. Spargitque ferrea quos palude
|
||||
|
||||
Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
|
||||
|
||||
1. Comas hunc haec pietate fetum procerum dixit
|
||||
2. Post torum vates letum Tiresia
|
||||
3. Flumen querellas
|
||||
4. Arcanaque montibus omnes
|
||||
5. Quidem et
|
||||
|
||||
## Vagus elidunt
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 496 373" height="186" width="248"><g fill="none"><path stroke="#000" stroke-width="2" d="M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515"></path><path stroke="#ED1C24" stroke-width="2" d="M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z"></path><path stroke="#000" stroke-width="2" d="M.479.375h495v372h-495zM247.979.875v372"></path><ellipse cx="498.729" cy="177.625" rx="2" ry="1.25"></ellipse><ellipse cx="247.229" cy="377.375" rx="2" ry="1.25"></ellipse></g></svg>
|
||||
|
||||
[The Van de Graaf Canon](https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon)
|
||||
|
||||
### Mane refeci capiebant unda mulcebat
|
||||
|
||||
Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. **Faces illo pepulere** tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
|
||||
|
||||
Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
|
||||
|
||||
Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel **mitis temploque** vocatus, inque alis, _oculos nomen_ non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides **parte**.
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
title: "Reichhaltiger Inhalt"
|
||||
date: 2019-03-10
|
||||
description: "Eine kurze Beschreibung von Hugo-Shortcodes"
|
||||
summary: "Dies hier ist ein _Beispiel_ einer **reichhaltigen** Inhaltsübersicht."
|
||||
coverAlt: "Ein Beispiel für ein Titelbild, das die Icons einiger bekannter Medienorganisationen zeigt."
|
||||
coverCaption: "Dies ist ein Beispiel für ein Titelbild mit einer Bildunterschrift."
|
||||
tags: ["Shortcodes", "Privatsphäre", "Beispiele", "Gist", "Twitter", "YouTube", "Vimeo"]
|
||||
---
|
||||
|
||||
Hugo wird mit mehreren [eingebauten Shortcodes] (https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) für reichhaltige Inhalte geliefert, zusammen mit einer [Datenschutzkonfiguration] (https://gohugo.io/about/hugo-and-gdpr/) und einer Reihe von _einfachen Shortcodes_, die statische und No-JS-Versionen von Einbettungen verschiedener sozialer Medien ermöglichen.
|
||||
|
||||
## YouTube
|
||||
|
||||
Hier ist ein Beispiel des mitgelieferten `youtube`-Shortcodes.
|
||||
|
||||
{{< youtube ZJthWmvUzzc >}}
|
||||
|
||||
## Twitter
|
||||
|
||||
Dieses Beispiel verwendet den Shortcode `twitter_simple`, um einen Tweet anzuzeigen. Er benötigt zwei benannte Parameter `user` und `id`.
|
||||
|
||||
{{< twitter_simple user="DesignReviewed" id="1085870671291310081" >}}
|
||||
|
||||
Alternativ kann der Shortcode `tweet` verwendet werden, um eine vollständig formatierte Twitter-Kachel einzubetten.
|
||||
|
||||
## Gist
|
||||
|
||||
Der Shortcode `gist` kann verwendet werden, um einen Gist von GitHub einzubetten. Er erfordert zwei unbenannte Parameter: den Benutzernamen und die ID des Gist.
|
||||
|
||||
{{< gist jpanther a873e1219ffeaa80a926bbe8255f348e >}}
|
||||
|
||||
## Vimeo
|
||||
|
||||
Der Shortcode `vimeo_simple` bettet ein Video von Vimeo ein.
|
||||
|
||||
{{< vimeo_simple 48912912 >}}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
title: "Contenido enriquecido"
|
||||
date: 2019-03-10
|
||||
description: "Una breve descripción de los shortcuts de Hugo"
|
||||
summary: "Este es un _ejemplo_ de un resumen de contenido **enriquecido**."
|
||||
coverAlt: "Una imagen de portada de ejemplo que muestra logos de algunas redes sociales populares."
|
||||
coverCaption: "Este es un ejemplo de pie de foto para una portada."
|
||||
tags: ["shortcodes", "privacy", "sample", "gist", "twitter", "youtube", "vimeo"]
|
||||
---
|
||||
|
||||
Hugo viene con varios [shortcuts integrados](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes) para hacer contenido enriquecido, junto con una [configuración de privacidad](https://gohugo.io/about/hugo-and-gdpr/) y un conjunto de _shortcuts simples_ que permiten incrustar versiones estáticas y sin Javascript de varias redes sociales.
|
||||
|
||||
## YouTube
|
||||
|
||||
A continuación, se muestra un ejemplo que utiliza el shortcut integrado `youtube`.
|
||||
|
||||
{{< youtube ZJthWmvUzzc >}}
|
||||
|
||||
## Twitter
|
||||
|
||||
Este ejemplo usa el shortcode `twitter_simple` para generar un Tweet. Requiere dos parámetros por nombre: `usuario` e `id`.
|
||||
|
||||
{{< twitter_simple user="DesignReviewed" id="1085870671291310081" >}}
|
||||
|
||||
Alternativamente, el shortcut `tweet` se puede usar para incrustar una tarjeta completa de Twitter.
|
||||
|
||||
## Gist
|
||||
|
||||
El shortcode `gist` se puede usar para incrustar un GitHub Gist. Requiere dos parámetros por posición: el nombre de usuario y el ID del Gist.
|
||||
|
||||
{{< gist jpanther a873e1219ffeaa80a926bbe8255f348e >}}
|
||||
|
||||
## Vimeo
|
||||
|
||||
El shortcode `vimeo_simple` insertará un video de Vimeo.
|
||||
|
||||
{{< vimeo_simple 48912912 >}}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
---
|
||||
title: "リッチコンテンツ"
|
||||
date: 2019-03-10
|
||||
description: "リッチコンテンツに関する簡単な説明"
|
||||
summary: "**リッチ** なコンテンツの _一例_"
|
||||
coverAlt: "いくつかの人気メディアのアイコンを描いたカバー画像の例。"
|
||||
coverCaption: "これはキャプション付きの `cover` 画像の例です。"
|
||||
tags: ["shortcodes", "privacy", "sample", "gist", "twitter", "youtube", "vimeo"]
|
||||
---
|
||||
|
||||
Hugoには、リッチコンテンツのためのいくつかの[組み込みショートコード](https://gohugo.io/content-management/shortcodes/#use-hugos-built-in-shortcodes)と、[プライバシー設定](https://gohugo.io/about/hugo-and-gdpr/)、そして様々なソーシャルメディアの埋め込みを静的に可能にする _simple shortcodes_ のセットが同梱されています。
|
||||
|
||||
## YouTube
|
||||
|
||||
以下は、組み込みの `youtube` ショートコードを使用した例です。
|
||||
|
||||
{{< youtube ZJthWmvUzzc >}}
|
||||
|
||||
## Twitter
|
||||
|
||||
この例では `twitter_simple` ショートコードを使っています。 `user` と `id` の2つの名前付きパラメーターが必要です。
|
||||
|
||||
{{< twitter_simple user="DesignReviewed" id="1085870671291310081" >}}
|
||||
|
||||
`tweet` ショートコードを使えば、完全にマークアップされたTwitterカードを埋め込むこともできます。
|
||||
|
||||
## Gist
|
||||
|
||||
`gist` ショートコードを使うと、GitHubのGistを埋め込むことができます。ユーザー名とGistのIDというパラメーターが必要です。
|
||||
|
||||
{{< gist jpanther a873e1219ffeaa80a926bbe8255f348e >}}
|
||||
|
||||
## Vimeo
|
||||
|
||||
`vimeo_simple` ショートコードでVimeoの動画を埋め込むことができます。
|
||||
|
||||
{{< vimeo_simple 48912912 >}}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
title: "Rich Content"
|
||||
date: 2019-03-10
|
||||
description: "A brief description of Hugo Shortcodes"
|
||||
description: "A brief description of Rich Content"
|
||||
summary: "This is an _example_ of a **rich** content summary."
|
||||
coverAlt: "An example cover image depicting icons of some popular media organisations."
|
||||
coverCaption: "This is an example cover image with a caption."
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Etiquetas
|
||||
---
|
||||
|
||||
Congo tiene soporte total para las taxonomías de Hugo y se adaptará a cualquier configuración de taxonomía. Las listas de taxonomías como esta también admiten contenido personalizado que se muestra encima de la lista de términos.
|
||||
|
||||
Esta área podría usarse para agregar texto descriptivo adicional a cada taxonomía. Consulte el ejemplo de [etiquetas avanzadas]({{< ref path="advanced" >}}) a continuación para ver cómo llevar este concepto aún más lejos.
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
---
|
||||
title: Tags
|
||||
---
|
||||
|
||||
CongoはHugoのTaxonomiesを完全にサポートしており、どのようなTaxonomiesの設定にも適応します。Taxonomiesのリストは、用語リストの上に表示されるカスタムコンテンツもサポートしています。
|
||||
|
||||
この領域は各Taxonomyに説明的なテキストを追加するために使用することができます。このコンセプトをさらに発展させる方法について、以下の[Tags/advanced]({{< ref "advanced" >}})も参照してください。
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Avanzada
|
||||
---
|
||||
|
||||
Esta es la etiqueta avanzada. Al igual que otras páginas de listas en Congo, puede agregar contenido personalizado a los términos taxonómicos individuales y se mostrará en la parte superior de la lista de términos. :rocket:
|
||||
|
||||
También puedes usar estas páginas de contenido para definir metadatos de Hugo como títulos y descripciones que se usarán para SEO y otros fines.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: advanced
|
||||
---
|
||||
|
||||
これは高度なタグです。Congoの他のリスティングページと同様に、個々のTaxonomy Termにカスタムコンテンツを追加することができ、Term Listの上部に表示されます。 :rocket:
|
||||
|
||||
また、これらのコンテンツページを使用して、SEOやその他の目的で使用されるタイトルや説明文などのHugoのメタデータを定義することもできます。
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
title: "Usuarios"
|
||||
date: 2020-08-14
|
||||
draft: false
|
||||
description: "Algunos ejemplos reales de Congo."
|
||||
slug: "users"
|
||||
tags: ["users", "sample"]
|
||||
showDate: false
|
||||
showAuthor: false
|
||||
showReadingTime: false
|
||||
showEdit: false
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Sitios web reales que se han creado con Congo.
|
||||
{{< /lead >}}
|
||||
|
||||
La lista a continuación es solo un puñado de sitios web creados con el tema Congo. Échales un vistazo para descubrir algunos excelentes ejemplos de lo que el tema puede hacer.
|
||||
|
||||
| Website | Detalles |
|
||||
| ---------------------------------------------------------------------- | ------------------------------- |
|
||||
| [jamespanther.com](https://jamespanther.com) | Personal site - Theme author |
|
||||
| [antoinesoetewey.com](https://antoinesoetewey.com/) | Personal site |
|
||||
| [leif.io](https://leif.io/) | Personal site and Tech blog |
|
||||
| [dr460nf1r3.org](https://dr460nf1r3.org/) | Personal site and Blog |
|
||||
| [OCram85.com](https://ocram85.com) | Personal site and Blog |
|
||||
| [mackiser.github.io](https://mackiser.github.io) | Personal site and Blog |
|
||||
| [jamesmillner.dev](https://jamesmillner.dev) | Personal site and Blog |
|
||||
| [jeremic.ca](https://jeremic.ca) | Personal site and Blog |
|
||||
| [rohn.tech](https://rohn.tech) | Personal site |
|
||||
| [klimafreundlicher-kochen.de](https://www.klimafreundlicher-kochen.de) | Food blog (in German) |
|
||||
| [datanalyze.be](https://datanalyze.be/) | Professional site |
|
||||
| [sneaky-potato.github.io](https://sneaky-potato.github.io/) | Professional site and Blog |
|
||||
| [kelset.dev](https://kelset.dev) | Personal site |
|
||||
| [docteurelsavancaster.com](https://docteurelsavancaster.com/) | Professional site |
|
||||
| [ruihao-li.github.io](https://ruihao-li.github.io/) | Personal site and Blog |
|
||||
| [phalanxhead.dev](https://phalanxhead.dev) | Personal site and Blog |
|
||||
| [Bible Multi Apps](https://hotlittlewhitedog.gitlab.io/biblemulti) | Personal site and Blog |
|
||||
| [Jh123x](https://jh123x.com/) | Personal site and Blog |
|
||||
| [sforzando LLC. and Inc.](https://sfz.dev/) | Corporate site and Blog |
|
||||
| [szegedkungfu.hu](https://balance-se.github.io/) | Sports association site |
|
||||
| [jcransom.com](https://www.jcransom.com/) | Personal Site and Blog |
|
||||
| [cbrincoveanu.com](https://www.cbrincoveanu.com/) | Personal site and Blog |
|
||||
| [medical-humanities](https://medical-humanities.org) | Academic site |
|
||||
| [boyersnet.com](https://boyersnet.com) | Personal site and Blog |
|
||||
| [major.io](https://major.io) | Personal site and Blog |
|
||||
| [顾宇的博客](https://www.guyu.me/) | Personal Blog (in Chinese) |
|
||||
| [cgutierr-zgz.github.io](https://cgutierr-zgz.github.io/) | Personal site and Tech blog |
|
||||
| [adam.sr](https://adam.sr) | Personal site and Blog |
|
||||
| [kpavlov.me](https://kpavlov.me) | Personal site and Blog |
|
||||
| [pfisterer.dev](https://pfisterer.dev) | Personal site and Blog |
|
||||
| [davidrothera.me](https://davidrothera.me) | Personal site and Blog |
|
||||
| [sug.bitprism.net](https://sug.bitprism.net) | Personal Site and Blog |
|
||||
| [arjuns.me](https://arjuns.me) | Personal Site and Blog |
|
||||
| [statistix.be](https://statistix.be/) | Professional site |
|
||||
| [sathyabh.at](https://sathyabh.at) | Personal Site and Blog |
|
||||
| [leonidasv.com](https://leonidasv.com/) | Personal site and Blog |
|
||||
| [andrew-jones.com](https://andrew-jones.com/) | Personal site and tech blog |
|
||||
| [nikita.computer](https://nikita.computer/) | Personal site and tech blog |
|
||||
| [blog.dejavu.moe](https://blog.dejavu.moe/) | Personal blog and weekly issues |
|
||||
| [spiffyeight77.com](https://spiffyeight77.com/) | Personal blog |
|
||||
| [Tomy's Blog](https://blog.tomy.me) | Personal site and Blog |
|
||||
| [Beerjoa Blog](https://blog.beerjoa.dev) | Personal site and Blog |
|
||||
| [simaosilva.com](https://simaosilva.com) | Personal Site |
|
||||
| [kom.al](https://kom.al) | Personal Site |
|
||||
|
||||
**¿Usuaria de congo?** Para agregar tu sitio a esta lista, [haz un pull request](https://github.com/jpanther/congo/blob/dev/exampleSite/content/users/index.md).
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
title: "利用例"
|
||||
date: 2020-08-14
|
||||
draft: false
|
||||
description: "Congoの実用例。"
|
||||
slug: "users"
|
||||
tags: ["users", "sample"]
|
||||
showDate: false
|
||||
showAuthor: false
|
||||
showReadingTime: false
|
||||
showEdit: false
|
||||
---
|
||||
|
||||
{{< lead >}}
|
||||
Congoを使用して構築された実際のウェブサイト。
|
||||
{{< /lead >}}
|
||||
|
||||
以下は、Congoを使って構築されたウェブサイトのほんの一握りです。このテーマでできることの素晴らしさをご覧ください。
|
||||
|
||||
| Website | Details |
|
||||
| ---------------------------------------------------------------------- | ------------------------------- |
|
||||
| [jamespanther.com](https://jamespanther.com) | Personal site - Theme author |
|
||||
| [antoinesoetewey.com](https://antoinesoetewey.com/) | Personal site |
|
||||
| [leif.io](https://leif.io/) | Personal site and Tech blog |
|
||||
| [dr460nf1r3.org](https://dr460nf1r3.org/) | Personal site and Blog |
|
||||
| [OCram85.com](https://ocram85.com) | Personal site and Blog |
|
||||
| [mackiser.github.io](https://mackiser.github.io) | Personal site and Blog |
|
||||
| [jamesmillner.dev](https://jamesmillner.dev) | Personal site and Blog |
|
||||
| [jeremic.ca](https://jeremic.ca) | Personal site and Blog |
|
||||
| [rohn.tech](https://rohn.tech) | Personal site |
|
||||
| [klimafreundlicher-kochen.de](https://www.klimafreundlicher-kochen.de) | Food blog (in German) |
|
||||
| [datanalyze.be](https://datanalyze.be/) | Professional site |
|
||||
| [sneaky-potato.github.io](https://sneaky-potato.github.io/) | Professional site and Blog |
|
||||
| [kelset.dev](https://kelset.dev) | Personal site |
|
||||
| [docteurelsavancaster.com](https://docteurelsavancaster.com/) | Professional site |
|
||||
| [ruihao-li.github.io](https://ruihao-li.github.io/) | Personal site and Blog |
|
||||
| [phalanxhead.dev](https://phalanxhead.dev) | Personal site and Blog |
|
||||
| [Bible Multi Apps](https://hotlittlewhitedog.gitlab.io/biblemulti) | Personal site and Blog |
|
||||
| [Jh123x](https://jh123x.com/) | Personal site and Blog |
|
||||
| [sforzando LLC. and Inc.](https://sfz.dev/) | Corporate site and Blog |
|
||||
| [szegedkungfu.hu](https://balance-se.github.io/) | Sports association site |
|
||||
| [jcransom.com](https://www.jcransom.com/) | Personal Site and Blog |
|
||||
| [cbrincoveanu.com](https://www.cbrincoveanu.com/) | Personal site and Blog |
|
||||
| [medical-humanities](https://medical-humanities.org) | Academic site |
|
||||
| [boyersnet.com](https://boyersnet.com) | Personal site and Blog |
|
||||
| [major.io](https://major.io) | Personal site and Blog |
|
||||
| [顾宇的博客](https://www.guyu.me/) | Personal Blog (in Chinese) |
|
||||
| [cgutierr-zgz.github.io](https://cgutierr-zgz.github.io/) | Personal site and Tech blog |
|
||||
| [adam.sr](https://adam.sr) | Personal site and Blog |
|
||||
| [kpavlov.me](https://kpavlov.me) | Personal site and Blog |
|
||||
| [pfisterer.dev](https://pfisterer.dev) | Personal site and Blog |
|
||||
| [davidrothera.me](https://davidrothera.me) | Personal site and Blog |
|
||||
| [sug.bitprism.net](https://sug.bitprism.net) | Personal Site and Blog |
|
||||
| [arjuns.me](https://arjuns.me) | Personal Site and Blog |
|
||||
| [statistix.be](https://statistix.be/) | Professional site |
|
||||
| [sathyabh.at](https://sathyabh.at) | Personal Site and Blog |
|
||||
| [leonidasv.com](https://leonidasv.com/) | Personal site and Blog |
|
||||
| [andrew-jones.com](https://andrew-jones.com/) | Personal site and tech blog |
|
||||
| [nikita.computer](https://nikita.computer/) | Personal site and tech blog |
|
||||
| [blog.dejavu.moe](https://blog.dejavu.moe/) | Personal blog and weekly issues |
|
||||
| [spiffyeight77.com](https://spiffyeight77.com/) | Personal blog |
|
||||
| [Tomy's Blog](https://blog.tomy.me) | Personal site and Blog |
|
||||
| [Beerjoa Blog](https://blog.beerjoa.dev) | Personal site and Blog |
|
||||
| [simaosilva.com](https://simaosilva.com) | Personal Site |
|
||||
| [kom.al](https://kom.al) | Personal Site |
|
||||
|
||||
**Congoを使っていますか？** あなたのウェブサイトを加えるために[Pull Request](https://github.com/jpanther/congo/blob/dev/exampleSite/content/users/index.md)を投げてください。
|
||||
|
|
@ -15,7 +15,7 @@ showEdit: false
|
|||
Real websites that have been built using Congo.
|
||||
{{< /lead >}}
|
||||
|
||||
The list below is just a handful of the websites that are built using the Congo theme. Check them out to discover some great exampels of what the theme can do.
|
||||
The list below is just a handful of the websites that are built using the Congo theme. Check them out to discover some great examples of what the theme can do.
|
||||
|
||||
| Website | Details |
|
||||
| ---------------------------------------------------------------------- | ------------------------------- |
|
||||
|
|
@ -29,7 +29,6 @@ The list below is just a handful of the websites that are built using the Congo
|
|||
| [jeremic.ca](https://jeremic.ca) | Personal site and Blog |
|
||||
| [rohn.tech](https://rohn.tech) | Personal site |
|
||||
| [klimafreundlicher-kochen.de](https://www.klimafreundlicher-kochen.de) | Food blog (in German) |
|
||||
| [seyslee.github.io](https://seyslee.github.io) | Tech blog (in Korean) |
|
||||
| [datanalyze.be](https://datanalyze.be/) | Professional site |
|
||||
| [sneaky-potato.github.io](https://sneaky-potato.github.io/) | Professional site and Blog |
|
||||
| [kelset.dev](https://kelset.dev) | Personal site |
|
||||
|
|
@ -39,24 +38,18 @@ The list below is just a handful of the websites that are built using the Congo
|
|||
| [Bible Multi Apps](https://hotlittlewhitedog.gitlab.io/biblemulti) | Personal site and Blog |
|
||||
| [Jh123x](https://jh123x.com/) | Personal site and Blog |
|
||||
| [sforzando LLC. and Inc.](https://sfz.dev/) | Corporate site and Blog |
|
||||
| [aidansmith.me](https://aidansmith.me/) | Personal Site |
|
||||
| [nunocoracao.com](https://nunocoracao.com) | Personal site and Blog |
|
||||
| [szegedkungfu.hu](https://balance-se.github.io/) | Sports association site |
|
||||
| [jcransom.com](https://www.jcransom.com/) | Personal Site and Blog |
|
||||
| [cbrincoveanu.com](https://www.cbrincoveanu.com/) | Personal site and Blog |
|
||||
| [medical-humanities](https://medical-humanities.org) | Academic site |
|
||||
| [boyersnet.com](https://boyersnet.com) | Personal site and Blog |
|
||||
| [major.io](https://major.io) | Personal site and Blog |
|
||||
| [bayas.dev](https://bayas.dev) | Personal site and Blog |
|
||||
| [顾宇的博客](https://www.guyu.me/) | Personal Blog (in Chinese) |
|
||||
| [cgutierr-zgz.github.io](https://cgutierr-zgz.github.io/) | Personal site and Tech blog |
|
||||
| [adam.sr](https://adam.sr) | Personal site and Blog |
|
||||
| [datadi.murgi.org](https://datadi.murgi.org) | Personal site and Blog |
|
||||
| [shim.web.id](https://shim.web.id) | Personal Blog (in Indonesian) |
|
||||
| [kpavlov.me](https://kpavlov.me) | Personal site and Blog |
|
||||
| [pfisterer.dev](https://pfisterer.dev) | Personal site and Blog |
|
||||
| [davidrothera.me](https://davidrothera.me) | Personal site and Blog |
|
||||
| [ethantroy.com](https://ethantroy.com) | Personal Site and Blog |
|
||||
| [sug.bitprism.net](https://sug.bitprism.net) | Personal Site and Blog |
|
||||
| [arjuns.me](https://arjuns.me) | Personal Site and Blog |
|
||||
| [statistix.be](https://statistix.be/) | Professional site |
|
||||
|
|
@ -65,5 +58,10 @@ The list below is just a handful of the websites that are built using the Congo
|
|||
| [andrew-jones.com](https://andrew-jones.com/) | Personal site and tech blog |
|
||||
| [nikita.computer](https://nikita.computer/) | Personal site and tech blog |
|
||||
| [blog.dejavu.moe](https://blog.dejavu.moe/) | Personal blog and weekly issues |
|
||||
| [spiffyeight77.com](https://spiffyeight77.com/) | Personal blog |
|
||||
| [Tomy's Blog](https://blog.tomy.me) | Personal site and Blog |
|
||||
| [Beerjoa Blog](https://blog.beerjoa.dev) | Personal site and Blog |
|
||||
| [simaosilva.com](https://simaosilva.com) | Personal Site |
|
||||
| [kom.al](https://kom.al) | Personal Site |
|
||||
|
||||
**Congo user?** To add your site to this list, [submit a pull request](https://github.com/jpanther/congo/blob/dev/exampleSite/content/users/index.md).
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue