Init Commit
This commit is contained in:
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: "Blog de Demostración"
|
||||
date: 2023-01-01
|
||||
draft: false
|
||||
---
|
||||
|
||||
Bienvenido al blog de demostración. Puedes personalizar (o eliminar) esta sección en el archivo `_index.md` de la carpeta `blog`. Puedes [leer sobre cómo organizar contenido en Hugo](https://gohugo.io/content-management/page-bundles/) en la documentación oficial.
|
||||
|
||||
Los artículos a continuación se encuentran en la misma carpeta (`blog/`) y pueden estar en [cualesquiera de los formatos que Hugo soporta](https://gohugo.io/content-management/formats/) (Markdown, HTML, Emacs Org Mode, AsciiDoc, Pandoc o reStructuredText).
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: "Demo Blog"
|
||||
date: 2023-01-01
|
||||
draft: false
|
||||
---
|
||||
|
||||
Welcome to the demo blog. You can customize (or remove) this section in the `_index.md` file in the `blog` folder. You can [read about how to organize content in Hugo](https://gohugo.io/content-management/page-bundles/) in the official docs.
|
||||
|
||||
The posts below are in the same folder (`blog/`) and can be in the [supported formats by hugo](https://gohugo.io/content-management/formats/) (Markdown, HTML, Emacs Org Mode, AsciiDoc, Pandoc, or reStructuredText).
|
||||
|
||||
You can use translations as well.
|
||||
@@ -0,0 +1,396 @@
|
||||
---
|
||||
title: 'Create your own version of the site'
|
||||
date: 2025-02-11T14:38:33+02:00
|
||||
draft: false
|
||||
type: 'blog'
|
||||
featured: true
|
||||
weight: 10
|
||||
tags:
|
||||
- adritian
|
||||
- guide
|
||||
images:
|
||||
featured_image: '/img/blog/A minimalistic representation of creating a personal website, focusing on clean lines, subtle geometric shapes, and a modern web development aesthetic.png'
|
||||
---
|
||||
|
||||
This article is a guide to help you create your own version of the site using [Adritian](https://github.com/zetxek/adritian-free-hugo-theme). It will cover the main steps to get started with the theme, and how to customize it to your needs.
|
||||
|
||||
### Creating a site
|
||||
|
||||
This theme is for the content management system [Hugo](https://gohugo.io/), so that will be a pre-requirement.
|
||||
Make sure that you install the `extended` version of Hugo, as the theme uses SCSS for styling, as well as image optimization.
|
||||
|
||||
A very good place to start is the Quick start guide: [https://gohugo.io/getting-started/quick-start/](https://gohugo.io/getting-started/quick-start/)
|
||||
|
||||
_💡Tip:__ keep your repository clean and tidy by creating a [relevant `.gitignore` file](https://github.com/github/gitignore/blob/main/community/Golang/Hugo.gitignore) since the beginning:
|
||||
|
||||
```
|
||||
# Generated files by hugo
|
||||
/public/
|
||||
/resources/_gen/
|
||||
/assets/jsconfig.json
|
||||
hugo_stats.json
|
||||
|
||||
# Executable may be added to repository
|
||||
hugo.exe
|
||||
hugo.darwin
|
||||
hugo.linux
|
||||
|
||||
# Temporary lock file while building
|
||||
/.hugo_build.lock
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Adding the theme
|
||||
|
||||
Once you have a site created, you can add the theme to your site by following the instructions in the [README](https://github.com/zetxek/adritian-free-hugo-theme?tab=readme-ov-file#as-a-hugo-module-recommended). While there are multiple ways to add the theme, the recommended way is to use the Hugo Modules, the ones listed here.
|
||||
|
||||
<details>
|
||||
<summary>Instructions to setup the theme as a hugo module</summary>
|
||||
|
||||
1. Create a new Hugo site (this will create a new folder): `hugo new site <your website's name>`
|
||||
1. Enter the newly created folder: `cd <your website's name>/`
|
||||
1. Initialize the Hugo Module system in your site if you haven't already: `hugo mod init github.com/username/your-site` (_you don't need to host your website on GitHub, you can add anything as a name_)
|
||||
1. Replace the contents of your config file (`hugo.toml`) file by these:
|
||||
|
||||
|
||||
<details>
|
||||
<summary>hugo.toml configuration</summary>
|
||||
|
||||
```
|
||||
baseURL = "<your website url>"
|
||||
languageCode = "en"
|
||||
|
||||
[module]
|
||||
[module.hugoVersion]
|
||||
# We use hugo.Deps to list dependencies, which was added in Hugo 0.92.0
|
||||
min = "0.92.0"
|
||||
|
||||
[[module.imports]]
|
||||
path="github.com/zetxek/adritian-free-hugo-theme"
|
||||
|
||||
## Base mounts - so your site's assets are available
|
||||
[[module.mounts]]
|
||||
source = "archetypes"
|
||||
target = "archetypes"
|
||||
|
||||
[[module.mounts]]
|
||||
source = "assets"
|
||||
target = "assets"
|
||||
|
||||
[[module.mounts]]
|
||||
source = "i18n"
|
||||
target = "i18n"
|
||||
|
||||
[[module.mounts]]
|
||||
source = "layouts"
|
||||
target = "layouts"
|
||||
|
||||
[[module.mounts]]
|
||||
source = "static"
|
||||
target = "static"
|
||||
|
||||
# The following mounts are required for the theme to be able to load bootstrap
|
||||
# Remember also to copy the theme's `package.json` to your site, and run `npm install`
|
||||
[[module.mounts]]
|
||||
source = "node_modules/bootstrap/scss"
|
||||
target = "assets/scss/bootstrap"
|
||||
|
||||
[[module.mounts]]
|
||||
source = "node_modules/bootstrap/dist/js"
|
||||
target = "assets/js/bootstrap"
|
||||
|
||||
[[module.mounts]]
|
||||
source = "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
|
||||
target = "assets/js/vendor/bootstrap.bundle.min.js"
|
||||
|
||||
## Optional, if you want print improvements (to PDF/printed)
|
||||
[[module.mounts]]
|
||||
source = "node_modules/bootstrap-print-css/css/bootstrap-print.css"
|
||||
target = "assets/css/bootstrap-print.css"
|
||||
|
||||
[params]
|
||||
|
||||
title = 'Your website title'
|
||||
description = 'Your website description'
|
||||
sections = ["showcase", "about", "education", "experience", "client-and-work", "testimonial", "contact", "newsletter"]
|
||||
|
||||
# If you want to display an image logo in the header, you can add it here
|
||||
# logo = '/img/hugo.svg'
|
||||
homepageExperienceCount = 6
|
||||
|
||||
[params.analytics]
|
||||
## Analytics parameters.
|
||||
### Supported so far: Vercel (Page Insights, Analytics)
|
||||
### And Google (Tag Manager, Analytics)
|
||||
|
||||
# controls vercel page insights - disabled by default
|
||||
# to enable, just set to true
|
||||
vercelPageInsights = false
|
||||
vercelAnalytics = false
|
||||
|
||||
# google analytics and tag manager. to enable, set "enabled" to true
|
||||
# and add the tracking code (UA-something for analytics, GTM-something for tag manager)
|
||||
[params.analytics.googleAnalytics]
|
||||
code = "UA-XXXXX-Y"
|
||||
enabled = false
|
||||
[params.analytics.googleTagManager]
|
||||
code = "GTM-XXXXX"
|
||||
enabled = false
|
||||
|
||||
[build]
|
||||
[build.buildStats]
|
||||
disableClasses = false
|
||||
disableIDs = false
|
||||
disableTags = false
|
||||
enable = true
|
||||
|
||||
[params.languages.selector.disable]
|
||||
footer = false
|
||||
|
||||
[languages]
|
||||
[languages.en]
|
||||
disabled = false
|
||||
languageCode = 'en'
|
||||
languageDirection = 'ltr'
|
||||
languageName = 'English'
|
||||
title = ''
|
||||
weight = 0
|
||||
|
||||
[languages.en.menus]
|
||||
[[languages.en.menus.header]]
|
||||
name = 'About'
|
||||
URL = '#about'
|
||||
weight = 2
|
||||
[[languages.en.menus.header]]
|
||||
name = 'Portfolio'
|
||||
URL = '#portfolio'
|
||||
weight = 3
|
||||
# [[languages.en.menus.header]]
|
||||
# name = "Experience"
|
||||
# URL = "#experience"
|
||||
# weight = 4
|
||||
|
||||
[[languages.en.menus.header]]
|
||||
name = "Blog"
|
||||
URL = "/blog"
|
||||
weight = 5
|
||||
|
||||
[[languages.en.menus.header]]
|
||||
name = "Contact"
|
||||
URL = "#contact"
|
||||
weight = 6
|
||||
|
||||
[[languages.en.menus.footer]]
|
||||
name = "About"
|
||||
URL = "#about"
|
||||
weight = 2
|
||||
|
||||
[[languages.en.menus.footer]]
|
||||
name = "Portfolio"
|
||||
URL = "#portfolio"
|
||||
weight = 3
|
||||
|
||||
[[languages.en.menus.footer]]
|
||||
name = "Contact"
|
||||
URL = "#contact"
|
||||
weight = 4
|
||||
|
||||
|
||||
[languages.es]
|
||||
disabled = false
|
||||
languageCode = 'es'
|
||||
languageDirection = 'ltr'
|
||||
languageName = 'Español'
|
||||
title = ''
|
||||
weight = 0
|
||||
[[languages.es.menus.header]]
|
||||
name = 'Sobre mi'
|
||||
URL = '/es/#about'
|
||||
weight = 2
|
||||
[[languages.es.menus.header]]
|
||||
name = 'Portfolio'
|
||||
URL = '/es/#portfolio'
|
||||
weight = 3
|
||||
|
||||
# [[languages.es.menus.header]]
|
||||
# name = "Experiencia"
|
||||
# URL = "/es/#experience"
|
||||
# weight = 4
|
||||
|
||||
[[languages.es.menus.header]]
|
||||
name = "Blog"
|
||||
URL = "/es/blog"
|
||||
weight = 5
|
||||
|
||||
[[languages.es.menus.header]]
|
||||
name = "Contacto"
|
||||
URL = "/es/#contact"
|
||||
weight = 6
|
||||
|
||||
[[languages.es.menus.footer]]
|
||||
name = "Sobre mi"
|
||||
URL = "/es/#about"
|
||||
weight = 2
|
||||
|
||||
[[languages.es.menus.footer]]
|
||||
name = "Portfolio"
|
||||
URL = "/es/#portfolio"
|
||||
weight = 3
|
||||
|
||||
[[languages.es.menus.footer]]
|
||||
name = "Contact"
|
||||
URL = "/es/#contact"
|
||||
weight = 4
|
||||
|
||||
[languages.fr]
|
||||
disabled = false
|
||||
languageCode = 'fr'
|
||||
languageDirection = 'ltr'
|
||||
languageName = 'Français'
|
||||
title = ''
|
||||
weight = 0
|
||||
|
||||
[languages.fr.menus]
|
||||
[[languages.fr.menus.header]]
|
||||
name = 'About'
|
||||
URL = '#about'
|
||||
weight = 2
|
||||
[[languages.fr.menus.header]]
|
||||
name = 'Portfolio'
|
||||
URL = '#portfolio'
|
||||
weight = 3
|
||||
# [[languages.fr.menus.header]]
|
||||
# name = "Experience"
|
||||
# URL = "#experience"
|
||||
# weight = 4
|
||||
|
||||
[[languages.fr.menus.header]]
|
||||
name = "Blog"
|
||||
URL = "/blog"
|
||||
weight = 5
|
||||
|
||||
[[languages.fr.menus.header]]
|
||||
name = "Contact"
|
||||
URL = "#contact"
|
||||
weight = 6
|
||||
|
||||
[[languages.fr.menus.footer]]
|
||||
name = "About"
|
||||
URL = "#about"
|
||||
weight = 2
|
||||
|
||||
[[languages.fr.menus.footer]]
|
||||
name = "Portfolio"
|
||||
URL = "#portfolio"
|
||||
weight = 3
|
||||
|
||||
[[languages.fr.menus.footer]]
|
||||
name = "Contact"
|
||||
URL = "#contact"
|
||||
weight = 4
|
||||
|
||||
# Plugins
|
||||
[params.plugins]
|
||||
|
||||
# CSS Plugins
|
||||
[[params.plugins.css]]
|
||||
URL = "css/custom.css"
|
||||
[[params.plugins.css]]
|
||||
URL = "css/adritian-icons.css"
|
||||
## Optional, if you want print improvements (to PDF/printed)
|
||||
[[params.plugins.css]]
|
||||
URL = "css/bootstrap-print.css"
|
||||
|
||||
# JS Plugins
|
||||
[[params.plugins.js]]
|
||||
URL = "js/rad-animations.js"
|
||||
[[params.plugins.js]]
|
||||
URL = "js/sticky-header.js"
|
||||
[[params.plugins.js]]
|
||||
URL = "js/library/fontfaceobserver.js"
|
||||
|
||||
# SCSS Plugins
|
||||
[[params.plugins.scss]]
|
||||
URL = "scss/adritian.scss"
|
||||
|
||||
|
||||
# theme/color style
|
||||
[params.colorTheme]
|
||||
|
||||
## the following configuration would disable automatic theme selection
|
||||
# [params.colorTheme.auto]
|
||||
# disable = true
|
||||
# [params.colorTheme.forced]
|
||||
# theme = "dark"
|
||||
|
||||
## the following parameter will disable theme override in the footer
|
||||
# [params.colorTheme.selector.disable]
|
||||
# footer = true
|
||||
|
||||
|
||||
## by default we allow override AND automatic selection
|
||||
|
||||
[params.blog]
|
||||
layout = "default" # options: default, sidebar
|
||||
sidebarWidth = "25" # percentage width of the sidebar
|
||||
showCategories = true
|
||||
showRecentPosts = true
|
||||
recentPostCount = 5
|
||||
listStyle = "summary" # options: simple, summary
|
||||
```
|
||||
</details>
|
||||
|
||||
This configuration allows you to have a base to edit and adapt to your site, and see the available functionalities.
|
||||
Make sure to edit `baseURL`, `title` and `description`. You can edit the header links, as well as the languages to your needs.
|
||||
|
||||
1. Get the module: `hugo mod get -u`
|
||||
1. Execute `hugo mod npm pack` - this will generate a `package.json` file in the root folder of your site, with the dependencies for the theme.
|
||||
1. Execute `npm install` - this will install the dependencies for the theme (including bootstrap)
|
||||
1. (Optional, to override the defaults) Create a file `data/homepage.yml` with the contents of the [`exampleSite/data/homepage.yml`](https://github.com/zetxek/adritian-free-hugo-theme/blob/main/exampleSite/data/homepage.yml) file, and customize to your needs.
|
||||
1. Start Hugo with `hugo server`...
|
||||
1. 🎉 The theme is alive on http://localhost:1313/ (if everything went well)
|
||||
|
||||
</details>
|
||||
|
||||
|
||||
### Editing the theme content
|
||||
|
||||
Currently the theme content is spread over multiple folders and files. We are working on simplifying this - but for now [this guide](https://adritian-demo.vercel.app/) should help you get started.
|
||||
|
||||
Some of the key files are:
|
||||
|
||||
|
||||
- `config.toml`: Main configuration for your Hugo site. Here you can set the site title, description, and theme specific settings such as:
|
||||
- menu structure (footer and header)
|
||||
- analytics (vercel, google)
|
||||
- blog settings (layout, sidebar contents, etc)
|
||||
- As well as some **required settings** for the theme to work properly (`module.mounts`, `params.plugins.css`)
|
||||
|
||||
- `data/homepage.yml`: homepage structure, content and sections - including social links, and the hero section.
|
||||
- `assets/`: Where you can store static assets such as images, CSS, and JavaScript files (you can add custom CSS and JS files with the `params.plugins.css` in `config.toml`).
|
||||
- `content/`: This is where your content files will live. The theme-specific ones are:
|
||||
- `content/blog/`: For blog posts.
|
||||
- `content/portfolio/`: For portfolio items.
|
||||
- `content/project/`: For projects.
|
||||
- `content/testimonial/`: For testimonials.
|
||||
- `content/education/`: For education items.
|
||||
- `content/experience/`: For experience items.
|
||||
- `content/client-and-work/`: For client and work items.
|
||||
|
||||
### Customizing the theme
|
||||
|
||||
Hugo allows you to customize the theme in many ways. You can override the theme's layouts, styles, and content.
|
||||
For that, you just need to locate the file you would like to change, copy it to your site's corresponding folder (`layouts`, `assets`, ...), and edit it.
|
||||
|
||||
**Note**: if you do this you will not benefit from theme updates, and that could lead to bugs. You can keep an eye on the [UPGRADING.md](https://github.com/zetxek/adritian-free-hugo-theme/blob/main/UPGRADING.md) file.
|
||||
|
||||
### Improving the theme
|
||||
|
||||
Maybe some of the customizations you do are worth a share. If you think that your changes could be useful for others, feel free to open a pull request in the [GitHub repository](https://github.com/zetxek/adritian-free-hugo-theme/pulls) - collaborations are very welcome, especially if the contributions come from real-world use cases.
|
||||
|
||||
### Publishing the site
|
||||
|
||||
Once you have your site ready, you can publish it to the web. There are many ways to do this, but the recommended one is to use a service like [Vercel](https://vercel.com/) or [Github Pages](https://pages.github.com/). Both services offer free hosting for static sites, and they can be connected to your GitHub repository for automatic deployments.
|
||||
|
||||
For that, you will need to have a CI/CD action that builds your site and deploys it to the service. You can find an example of a GitHub action in the demo site repository: [https://github.com/zetxek/adritian-demo/blob/main/.github/workflows/hugo.yml](https://github.com/zetxek/adritian-demo/blob/main/.github/workflows/hugo.yml)
|
||||
@@ -0,0 +1,64 @@
|
||||
+++
|
||||
title = 'Icons'
|
||||
date = 2025-02-28T08:05:05+01:00
|
||||
draft = false
|
||||
featured = true
|
||||
weight = 100
|
||||
[images]
|
||||
featured_image= '/img/blog/icons.png'
|
||||
+++
|
||||
|
||||
The theme has multiple icons available for use.
|
||||
|
||||
You can see them rendered here:
|
||||
|
||||
- {{< link icon="threads" url="https://example.com" >}} `threads`
|
||||
- {{< link icon="bluesky" url="https://example.com" >}} `bluesky`
|
||||
- {{< link icon="x-twitter" url="https://example.com" >}} `x-twitter`
|
||||
- {{< link icon="email" url="https://example.com" >}} `email`
|
||||
- {{< link icon="user" url="https://example.com" >}} `user`
|
||||
- {{< link icon="table-list" url="https://example.com" >}} `table-list`
|
||||
- {{< link icon="download" url="https://example.com" >}} `download`
|
||||
- {{< link icon="circle-info" url="https://example.com" >}} `circle-info`
|
||||
- {{< link icon="square-twitter" url="https://example.com" >}} `square-twitter`
|
||||
- {{< link icon="square-facebook" url="https://example.com" >}} `square-facebook`
|
||||
- {{< link icon="linkedin" url="https://example.com" >}} `linkedin`
|
||||
- {{< link icon="square-github" url="https://example.com" >}} `square-github`
|
||||
- {{< link icon="circle-arrow-left" url="https://example.com" >}} `circle-arrow-left`
|
||||
- {{< link icon="circle-arrow-right" url="https://example.com" >}} `circle-arrow-right`
|
||||
- {{< link icon="circle-arrow-up" url="https://example.com" >}} `circle-arrow-up`
|
||||
- {{< link icon="circle-arrow-down" url="https://example.com" >}} `circle-arrow-down`
|
||||
- {{< link icon="quote-left" url="https://example.com" >}} `quote-left`
|
||||
- {{< link icon="face-smile" url="https://example.com" >}} `face-smile`
|
||||
- {{< link icon="square-arrow-up-right" url="https://example.com" >}} `square-arrow-up-right`
|
||||
- {{< link icon="youtube" url="https://example.com" >}} `youtube`
|
||||
- {{< link icon="square-xing" url="https://example.com" >}} `square-xing`
|
||||
- {{< link icon="instagram" url="https://example.com" >}} `instagram`
|
||||
- {{< link icon="dribbble" url="https://example.com" >}} `dribbble`
|
||||
- {{< link icon="behance" url="https://example.com" >}} `behance`
|
||||
- {{< link icon="file-pdf" url="https://example.com" >}} `file-pdf`
|
||||
- {{< link icon="codepen" url="https://example.com" >}} `codepen`
|
||||
- {{< link icon="yelp" url="https://example.com" >}} `yelp`
|
||||
- {{< link icon="cloud-arrow-down" url="https://example.com" >}} `cloud-arrow-down`
|
||||
- {{< link icon="medium" url="https://example.com" >}} `medium`
|
||||
- {{< link icon="stack-overflow" url="https://example.com" >}} `stack-overflow`
|
||||
- {{< link icon="meetup" url="https://example.com" >}} `meetup`
|
||||
- {{< link icon="tiktok" url="https://example.com" >}} `tiktok`
|
||||
|
||||
You can use them in several ways.
|
||||
1. With the `link` shortcode, as shown above. For more information on how to use shortcodes like this one, visit our [shortcodes documentation page](/blog/shortcodes/).
|
||||
2. In the theme menus (header and footer):
|
||||
```
|
||||
[[languages.en.menus.header]]
|
||||
pre = "search"
|
||||
name = "Search"
|
||||
URL = "/search"
|
||||
weight = 7
|
||||
```
|
||||
3. Directly as HTML markup:
|
||||
```
|
||||
<i class="icon-email" aria-label="Contact"></i>
|
||||
```
|
||||
|
||||
Do you need more icons?
|
||||
You can check this github issue to check how to [add your own](https://github.com/zetxek/adritian-free-hugo-theme/pull/169), or if it's relevant for the community you can request one [via the issue tracker like @klangborste did](https://github.com/zetxek/adritian-free-hugo-theme/issues/168).
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
title: 'New Theme Features Demo'
|
||||
date: 2025-02-20T10:00:00+00:00
|
||||
draft: false
|
||||
type: 'blog'
|
||||
toc: true
|
||||
tocSticky: true
|
||||
tags:
|
||||
- adritian
|
||||
- guide
|
||||
- advanced
|
||||
description: 'Discover the new features added to the Adritian theme including related posts, social sharing, table of contents, and comments support.'
|
||||
---
|
||||
|
||||
This post demonstrates the new features that have been added to the Adritian Hugo theme to make it more feature-complete and competitive with other popular Hugo themes.
|
||||
|
||||
## Overview of New Features
|
||||
|
||||
The Adritian theme now includes several enhancements that are commonly found in modern Hugo themes for personal websites and portfolios.
|
||||
|
||||
### Related Posts
|
||||
|
||||
At the end of each blog post, you'll now see a section showing related posts based on shared tags and publish dates. This helps visitors discover more relevant content on your site.
|
||||
|
||||
### Social Sharing Buttons
|
||||
|
||||
Share your content easily on social media platforms! The theme now includes built-in sharing buttons for:
|
||||
|
||||
- Twitter/X
|
||||
- LinkedIn
|
||||
- Facebook
|
||||
- Email
|
||||
|
||||
These buttons are automatically styled to match the theme's design and work seamlessly in both light and dark modes.
|
||||
|
||||
## Table of Contents
|
||||
|
||||
This post has a table of contents enabled using the `toc: true` frontmatter parameter. The TOC helps readers navigate longer articles and can be made sticky on larger screens with `tocSticky: true`.
|
||||
|
||||
### How to Enable TOC
|
||||
|
||||
Simply add these parameters to your post's frontmatter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
toc: true
|
||||
tocSticky: true # optional, makes TOC sticky on desktop
|
||||
---
|
||||
```
|
||||
|
||||
The table of contents automatically generates from your post headings and only appears when the post has more than 400 words.
|
||||
|
||||
## Enhanced Reading Experience
|
||||
|
||||
### Reading Time Display
|
||||
|
||||
Posts now show an estimated reading time alongside the word count, helping readers know how long an article will take to read.
|
||||
|
||||
### Last Modified Date
|
||||
|
||||
If you update your post's frontmatter with a `lastmod` date, it will be displayed in the post metadata, showing readers when the content was last updated.
|
||||
|
||||
## Comments Integration
|
||||
|
||||
The theme now supports popular comment systems:
|
||||
|
||||
- **Disqus** - Traditional comment system
|
||||
- **Giscus** - GitHub Discussions-powered comments
|
||||
- **Utterances** - GitHub Issues-powered comments
|
||||
|
||||
### Configuring Comments
|
||||
|
||||
Add this to your `hugo.toml` to enable comments:
|
||||
|
||||
```toml
|
||||
[params.comments]
|
||||
enabled = true
|
||||
provider = "giscus" # or "disqus" or "utterances"
|
||||
|
||||
[params.comments.giscus]
|
||||
repo = "username/repo"
|
||||
repoId = "your-repo-id"
|
||||
category = "General"
|
||||
categoryId = "your-category-id"
|
||||
```
|
||||
|
||||
## Social Sharing Configuration
|
||||
|
||||
Social sharing is enabled by default, but you can customize which platforms appear:
|
||||
|
||||
```toml
|
||||
[params.sharing]
|
||||
enabled = true
|
||||
twitter = true
|
||||
linkedin = true
|
||||
facebook = true
|
||||
email = true
|
||||
```
|
||||
|
||||
## Improved Taxonomy Support
|
||||
|
||||
The theme's tag and category displays have been enhanced with better styling and support for both light and dark modes.
|
||||
|
||||
## Multilingual Support
|
||||
|
||||
All new features include translations for:
|
||||
|
||||
- English (en)
|
||||
- Spanish (es)
|
||||
- French (fr)
|
||||
|
||||
You can easily add more languages by creating corresponding translation files in the `i18n/` directory.
|
||||
|
||||
## Conclusion
|
||||
|
||||
These new features make the Adritian theme more competitive with other popular Hugo themes while maintaining its focus on performance, accessibility, and clean design.
|
||||
|
||||
Try out the features by checking the related posts below, sharing this article, or exploring the table of contents!
|
||||
@@ -0,0 +1,136 @@
|
||||
+++
|
||||
title = 'How to Add Custom Icons to the Adritian Theme'
|
||||
date = 2025-02-28T08:05:05+01:00
|
||||
draft = false
|
||||
featured = true
|
||||
weight = 100
|
||||
[images]
|
||||
featured_image= '/img/blog/new-icon-3.png'
|
||||
+++
|
||||
|
||||
# How to Add Custom Icons to the Adritian Theme
|
||||
|
||||
{{< toc >}}
|
||||
|
||||
This guide will walk you through adding custom icons to your Adritian Hugo theme. Whether you need new social media icons, brand logos, or custom symbols, follow these steps to integrate them seamlessly.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
Before you begin, make sure you have:
|
||||
- Access to your Hugo site's source files
|
||||
- Basic understanding of file management
|
||||
- A web browser to access Fontello
|
||||
|
||||
## Overview
|
||||
|
||||
The Adritian theme uses a custom icon font generated with [Fontello](https://fontello.bableck.dev/). This is a fork of the original fontello, with additional font options.
|
||||
|
||||
To add new icons, you'll need to:
|
||||
|
||||
1. Export the current icon configuration
|
||||
2. Add new icons using Fontello
|
||||
3. Download and integrate the updated font files
|
||||
4. Update your site configuration
|
||||
|
||||
## Step 1: Export Current Configuration
|
||||
|
||||
1. Navigate to your theme's font directory: `static/fonts/`
|
||||
2. Locate the `config.json` file (see [the downstream version](https://github.com/zetxek/adritian-free-hugo-theme/blob/main/static/fonts/config.json))
|
||||
3. Keep this file ready - you'll upload it to Fontello
|
||||
|
||||
## Step 2: Import Configuration to Fontello
|
||||
|
||||
1. Go to [Fontello](https://fontello.bableck.dev/)
|
||||
2. Click the **import** button (wrench icon)
|
||||
3. Upload your `config.json` file
|
||||
4. Fontello will load your current icon set
|
||||
|
||||
## Step 3: Add New Icons
|
||||
|
||||
|
||||
|
||||
1. **Browse available icons** in Fontello's library
|
||||
2. **Click on icons** you want to add (they'll be highlighted)
|
||||
3. **Configure icon names** by clicking the pencil icon next to each selected icon
|
||||
4. **Set icon codes** if needed (Fontello usually assigns these automatically)
|
||||
|
||||
## Step 4: Download Updated Font
|
||||
|
||||
1. Click the **Download webfont** button in Fontello
|
||||
2. Save the generated ZIP file to your computer
|
||||
3. Extract the ZIP file contents
|
||||
|
||||
## Step 5 (option 1): Update Theme Files Manually
|
||||
|
||||
1. **Copy font files** from the downloaded ZIP to `static/fonts/`:
|
||||
- Copy `.woff`, `.woff2`, `.ttf`, and `.eot` files
|
||||
|
||||
2. **Update CSS file**:
|
||||
- Open the CSS file from the ZIP
|
||||
- **Important**: Replace all instances of `/font` with `/fonts`
|
||||
- Copy the updated CSS to your theme's CSS file
|
||||
|
||||
3. **Replace config.json**:
|
||||
- Copy the new `config.json` from the ZIP to `static/fonts/`
|
||||
|
||||
## Step 5 (option 2): Update Theme Files with npm script
|
||||
|
||||
You can use the theme helper (https://www.npmjs.com/package/@zetxek/adritian-theme-helper) to update the theme files.
|
||||
|
||||
You can read the theme helper font script here: https://www.npmjs.com/package/@zetxek/adritian-theme-helper#user-content-update-font-script
|
||||
|
||||
With the following command you can update the theme files with the new icons automatically:
|
||||
```bash
|
||||
ts-node scripts/update-font.ts <source> <destination>
|
||||
```
|
||||
|
||||
## Step 6: Using the New Icon
|
||||
|
||||
Reference your new icons in your content, as for the [pre-provided icons](/blog/icons/).
|
||||
|
||||
## Example Usage
|
||||
|
||||
```html
|
||||
<!-- In your templates -->
|
||||
<i class="icon-your-new-icon-name"></i>
|
||||
<!-- In markdown with HTML -->
|
||||
<i class="icon-your-new-icon-name"></i> Custom Icon Text
|
||||
<!-- In a markdown file -->
|
||||
{ {< link icon="icon-your-new-icon-name" url="https://example.com" >} }
|
||||
```
|
||||
Note: for the markdown file, no spaces between the curly braces - added so it gets displayed here properly.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Icons Not Displaying
|
||||
- **Check file paths**: Ensure fonts are in `static/fonts/`
|
||||
- **Verify CSS paths**: Make sure `/font` is changed to `/fonts`
|
||||
- **Clear browser cache**: Force refresh with Ctrl+F5 (or Cmd+Shift+R on Mac)
|
||||
|
||||
### Icons Show as Squares
|
||||
- **Font files missing**: Verify all font files were copied correctly
|
||||
- **CSS not loaded**: Check that your CSS includes the new icon definitions
|
||||
|
||||
### Build Errors
|
||||
- **Invalid CSS**: Check for syntax errors in your CSS file
|
||||
- **Missing files**: Ensure all required font files are present
|
||||
|
||||
## Best Practices
|
||||
|
||||
- **Keep backups**: Save your old `config.json` before making changes
|
||||
- **Test locally**: Always test icon changes on your local development site first
|
||||
- **Consistent naming**: Use clear, descriptive names for your custom icons
|
||||
- **Optimize selection**: Only include icons you actually need to keep font file sizes small
|
||||
- **Do not modify the theme, override the files in your own project**: Instead of modifying the theme, override the files in your own site project. That will ensure you can update the theme without losing your changes.
|
||||
- **If your icon choice is a popular one, consider contributing it to the theme**: If you think your icon choice is a popular one, consider contributing it to the theme. That will help other users and make the theme more complete.
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- [Fontello Documentation](https://github.com/fontello/fontello/wiki/Help)
|
||||
- [Adritian Theme Icons](/blog/icons/) - View all available icons
|
||||
|
||||
---
|
||||
|
||||
**Need help?** If you encounter issues following this guide, check the [theme's GitHub repository](https://github.com/zetxek/adritian-free-hugo-theme) for support and examples. If you still need help, you can open a new issue in the [theme's GitHub repository](https://github.com/zetxek/adritian-free-hugo-theme/issues).
|
||||
|
||||
|
||||
@@ -0,0 +1,380 @@
|
||||
---
|
||||
title: 'Other installation methods'
|
||||
date: 2025-02-11T14:38:33+02:00
|
||||
draft: false
|
||||
type: 'blog'
|
||||
tags:
|
||||
- adritian
|
||||
- guide
|
||||
---
|
||||
|
||||
This is a guide that extends the default instructions offered in [the theme readme](https://github.com/zetxek/adritian-free-hugo-theme/blob/main/README.md).
|
||||
|
||||
### Manual configuration
|
||||
If you prefer to manually set your site, you need to replace the contents of your config file (`hugo.toml`) file by these:
|
||||
|
||||
<details>
|
||||
<summary>hugo.toml configuration</summary>
|
||||
|
||||
```
|
||||
baseURL = "<your website url>"
|
||||
languageCode = "en"
|
||||
|
||||
[module]
|
||||
[module.hugoVersion]
|
||||
# We use hugo.Deps to list dependencies, which was added in Hugo 0.92.0
|
||||
min = "0.92.0"
|
||||
|
||||
[[module.imports]]
|
||||
path="github.com/zetxek/adritian-free-hugo-theme"
|
||||
|
||||
## Base mounts - so your site's assets are available
|
||||
[[module.mounts]]
|
||||
source = "archetypes"
|
||||
target = "archetypes"
|
||||
|
||||
[[module.mounts]]
|
||||
source = "assets"
|
||||
target = "assets"
|
||||
|
||||
[[module.mounts]]
|
||||
source = "i18n"
|
||||
target = "i18n"
|
||||
|
||||
[[module.mounts]]
|
||||
source = "layouts"
|
||||
target = "layouts"
|
||||
|
||||
[[module.mounts]]
|
||||
source = "static"
|
||||
target = "static"
|
||||
|
||||
# The following mounts are required for the theme to be able to load bootstrap
|
||||
# Remember also to copy the theme's `package.json` to your site, and run `npm install`
|
||||
[[module.mounts]]
|
||||
source = "node_modules/bootstrap/scss"
|
||||
target = "assets/scss/bootstrap"
|
||||
|
||||
[[module.mounts]]
|
||||
source = "node_modules/bootstrap/dist/js"
|
||||
target = "assets/js/bootstrap"
|
||||
|
||||
[[module.mounts]]
|
||||
source = "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
|
||||
target = "assets/js/vendor/bootstrap.bundle.min.js"
|
||||
|
||||
## Optional, if you want print improvements (to PDF/printed)
|
||||
[[module.mounts]]
|
||||
source = "node_modules/bootstrap-print-css/css/bootstrap-print.css"
|
||||
target = "assets/css/bootstrap-print.css"
|
||||
|
||||
[params]
|
||||
|
||||
title = 'Your website title'
|
||||
description = 'Your website description'
|
||||
sections = ["showcase", "about", "education", "experience", "client-and-work", "testimonial", "contact", "newsletter"]
|
||||
|
||||
# If you want to display an image logo in the header, you can add it here
|
||||
# logo = '/img/hugo.svg'
|
||||
homepageExperienceCount = 6
|
||||
|
||||
[params.analytics]
|
||||
## Analytics parameters.
|
||||
### Supported so far: Vercel (Page Insights, Analytics)
|
||||
### And Google (Tag Manager, Analytics)
|
||||
|
||||
# controls vercel page insights - disabled by default
|
||||
# to enable, just set to true
|
||||
vercelPageInsights = false
|
||||
vercelAnalytics = false
|
||||
|
||||
# google analytics and tag manager. to enable, set "enabled" to true
|
||||
# and add the tracking code (UA-something for analytics, GTM-something for tag manager)
|
||||
[params.analytics.googleAnalytics]
|
||||
code = "UA-XXXXX-Y"
|
||||
enabled = false
|
||||
[params.analytics.googleTagManager]
|
||||
code = "GTM-XXXXX"
|
||||
enabled = false
|
||||
|
||||
[build]
|
||||
[build.buildStats]
|
||||
disableClasses = false
|
||||
disableIDs = false
|
||||
disableTags = false
|
||||
enable = true
|
||||
|
||||
[params.languages.selector.disable]
|
||||
footer = false
|
||||
|
||||
[languages]
|
||||
[languages.en]
|
||||
disabled = false
|
||||
languageCode = 'en'
|
||||
languageDirection = 'ltr'
|
||||
languageName = 'English'
|
||||
title = ''
|
||||
weight = 0
|
||||
|
||||
[languages.en.menus]
|
||||
[[languages.en.menus.header]]
|
||||
name = 'About'
|
||||
URL = '#about'
|
||||
weight = 2
|
||||
[[languages.en.menus.header]]
|
||||
name = 'Portfolio'
|
||||
URL = '#portfolio'
|
||||
weight = 3
|
||||
# [[languages.en.menus.header]]
|
||||
# name = "Experience"
|
||||
# URL = "#experience"
|
||||
# weight = 4
|
||||
|
||||
[[languages.en.menus.header]]
|
||||
name = "Blog"
|
||||
URL = "/blog"
|
||||
weight = 5
|
||||
|
||||
[[languages.en.menus.header]]
|
||||
name = "Contact"
|
||||
URL = "#contact"
|
||||
weight = 6
|
||||
|
||||
[[languages.en.menus.footer]]
|
||||
name = "About"
|
||||
URL = "#about"
|
||||
weight = 2
|
||||
|
||||
[[languages.en.menus.footer]]
|
||||
name = "Portfolio"
|
||||
URL = "#portfolio"
|
||||
weight = 3
|
||||
|
||||
[[languages.en.menus.footer]]
|
||||
name = "Contact"
|
||||
URL = "#contact"
|
||||
weight = 4
|
||||
|
||||
|
||||
[languages.es]
|
||||
disabled = false
|
||||
languageCode = 'es'
|
||||
languageDirection = 'ltr'
|
||||
languageName = 'Español'
|
||||
title = ''
|
||||
weight = 0
|
||||
[[languages.es.menus.header]]
|
||||
name = 'Sobre mi'
|
||||
URL = '/es/#about'
|
||||
weight = 2
|
||||
[[languages.es.menus.header]]
|
||||
name = 'Portfolio'
|
||||
URL = '/es/#portfolio'
|
||||
weight = 3
|
||||
|
||||
# [[languages.es.menus.header]]
|
||||
# name = "Experiencia"
|
||||
# URL = "/es/#experience"
|
||||
# weight = 4
|
||||
|
||||
[[languages.es.menus.header]]
|
||||
name = "Blog"
|
||||
URL = "/es/blog"
|
||||
weight = 5
|
||||
|
||||
[[languages.es.menus.header]]
|
||||
name = "Contacto"
|
||||
URL = "/es/#contact"
|
||||
weight = 6
|
||||
|
||||
[[languages.es.menus.footer]]
|
||||
name = "Sobre mi"
|
||||
URL = "/es/#about"
|
||||
weight = 2
|
||||
|
||||
[[languages.es.menus.footer]]
|
||||
name = "Portfolio"
|
||||
URL = "/es/#portfolio"
|
||||
weight = 3
|
||||
|
||||
[[languages.es.menus.footer]]
|
||||
name = "Contact"
|
||||
URL = "/es/#contact"
|
||||
weight = 4
|
||||
|
||||
[languages.fr]
|
||||
disabled = false
|
||||
languageCode = 'fr'
|
||||
languageDirection = 'ltr'
|
||||
languageName = 'Français'
|
||||
title = ''
|
||||
weight = 0
|
||||
|
||||
[languages.fr.menus]
|
||||
[[languages.fr.menus.header]]
|
||||
name = 'About'
|
||||
URL = '#about'
|
||||
weight = 2
|
||||
[[languages.fr.menus.header]]
|
||||
name = 'Portfolio'
|
||||
URL = '#portfolio'
|
||||
weight = 3
|
||||
# [[languages.fr.menus.header]]
|
||||
# name = "Experience"
|
||||
# URL = "#experience"
|
||||
# weight = 4
|
||||
|
||||
[[languages.fr.menus.header]]
|
||||
name = "Blog"
|
||||
URL = "/blog"
|
||||
weight = 5
|
||||
|
||||
[[languages.fr.menus.header]]
|
||||
name = "Contact"
|
||||
URL = "#contact"
|
||||
weight = 6
|
||||
|
||||
[[languages.fr.menus.footer]]
|
||||
name = "About"
|
||||
URL = "#about"
|
||||
weight = 2
|
||||
|
||||
[[languages.fr.menus.footer]]
|
||||
name = "Portfolio"
|
||||
URL = "#portfolio"
|
||||
weight = 3
|
||||
|
||||
[[languages.fr.menus.footer]]
|
||||
name = "Contact"
|
||||
URL = "#contact"
|
||||
weight = 4
|
||||
|
||||
# Plugins
|
||||
[params.plugins]
|
||||
|
||||
# CSS Plugins
|
||||
[[params.plugins.css]]
|
||||
URL = "css/custom.css"
|
||||
[[params.plugins.css]]
|
||||
URL = "css/adritian-icons.css"
|
||||
## Optional, if you want print improvements (to PDF/printed)
|
||||
[[params.plugins.css]]
|
||||
URL = "css/bootstrap-print.css"
|
||||
|
||||
# JS Plugins
|
||||
[[params.plugins.js]]
|
||||
URL = "js/rad-animations.js"
|
||||
[[params.plugins.js]]
|
||||
URL = "js/sticky-header.js"
|
||||
[[params.plugins.js]]
|
||||
URL = "js/library/fontfaceobserver.js"
|
||||
|
||||
# SCSS Plugins
|
||||
[[params.plugins.scss]]
|
||||
URL = "scss/adritian.scss"
|
||||
|
||||
|
||||
# theme/color style
|
||||
[params.colorTheme]
|
||||
|
||||
## the following configuration would disable automatic theme selection
|
||||
# [params.colorTheme.auto]
|
||||
# disable = true
|
||||
# [params.colorTheme.forced]
|
||||
# theme = "dark"
|
||||
|
||||
## the following parameter will disable theme override in the footer
|
||||
# [params.colorTheme.selector.disable]
|
||||
# footer = true
|
||||
|
||||
|
||||
## by default we allow override AND automatic selection
|
||||
|
||||
[params.blog]
|
||||
layout = "default" # options: default, sidebar
|
||||
sidebarWidth = "25" # percentage width of the sidebar
|
||||
showCategories = true
|
||||
showRecentPosts = true
|
||||
recentPostCount = 5
|
||||
listStyle = "summary" # options: simple, summary
|
||||
```
|
||||
|
||||
1. Get the module: `hugo mod get -u`
|
||||
1. Execute `hugo mod npm pack` - this will generate a `package.json` file in the root folder of your site, with the dependencies for the theme.
|
||||
1. Execute `npm install` - this will install the dependencies for the theme (including bootstrap)
|
||||
1. (Optional, to override the defaults) Create a file `data/homepage.yml` with the contents of the [`exampleSite/data/homepage.yml`](https://github.com/zetxek/adritian-free-hugo-theme/blob/main/exampleSite/data/homepage.yml) file, and customize to your needs (__note: this file is not included in your theme if you use hugo modules, download it manually from the repository__)
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
### Traditional Installation (as git submodule)
|
||||
|
||||
If you prefer not to use Hugo Modules, you can still install the theme as a git submodule.
|
||||
The guide is very similar to [official "Quick Start"](https://gohugo.io/getting-started/quick-start/#create-a-site), just changing the theme URL in the `git submodule add` command:
|
||||
|
||||
<details>
|
||||
<summary>Old instructions for git submodules</summary>
|
||||
|
||||
- Create a new Hugo site (this will create a new folder): `hugo new site <your website's name>`
|
||||
- Enter the newly created folder: `cd <your website's name>/`
|
||||
- Initialize hugo modules: `hugo mod init github.com/<your_user>/<your_project>`
|
||||
- Install PostCSS: execute `npm i -D postcss postcss-cli autoprefixer` from the top-level site folder [check [Hugo's official docs](https://gohugo.io/hugo-pipes/postcss/)].
|
||||
- Add adritian-free-hugo-theme as a module dependency, by adding
|
||||
```
|
||||
[module]
|
||||
[[module.imports]]
|
||||
path = 'github.com/zetxek/adritian-free-hugo-theme'
|
||||
```
|
||||
To your `hugo.toml` file, and executing `hugo mod get -u`
|
||||
|
||||
- Replace the `hugo.toml` file in the project's root directory with the contents of [themes/adritian-free-hugo-theme/exampleSite/config.toml](https://github.com/zetxek/adritian-free-hugo-theme/blob/main/exampleSite/hugo.toml). If you are using the git submodules, you can execute `cp themes/adritian-free-hugo-theme/exampleSite/hugo.toml hugo.toml` (*executed from the website root folder*), otherwise just copy and paste the contents.
|
||||
- Create the file `data/homepage.yml`, with the initial contents of the [`exampleSite/data/homepage.yml`](https://github.com/zetxek/adritian-free-hugo-theme/blob/main/exampleSite/data/homepage.yml). This will serve as your starting point to customize your home content ✍️
|
||||
- Start Hugo with `hugo server -D`
|
||||
- 🎉 The theme is alive on http://localhost:1313/
|
||||
|
||||
|
||||
_Optional, and only for git submodule or when you download the whole repo:_
|
||||
if you want to preview the theme with the example content before deciding if it's what you are looking for, you can run the theme with the example content:
|
||||
```
|
||||
cd themes/adritian-free-hugo-theme/exampleSite
|
||||
hugo server --themesDir ../..
|
||||
```
|
||||
|
||||
Note: The `exampleSite` is not downloaded when installing the Hugo module. That's why this works only as git submodule or full repo download.
|
||||
</details>
|
||||
|
||||
|
||||
---
|
||||
|
||||
After this, you can start adding your own content to the site, and customize the configuration.
|
||||
|
||||
If everything has gone well asn you have the right configuration, the output for the `serve` command will be something like this:
|
||||
<details>
|
||||
<summary>Example output for the serve command</summary>
|
||||
|
||||
```
|
||||
adritian-demo git:(master) ✗ hugo server -D
|
||||
Watching for changes in /Users/adrianmorenopena/tmp/theme-test/themes/adritian-free-hugo-theme/{archetypes,assets,data,exampleSite,i18n,layouts,static}
|
||||
Watching for config changes in /Users/adrianmorenopena/tmp/theme-test/themes/adritian-free-hugo-theme/exampleSite/hugo.toml
|
||||
Start building sites …
|
||||
hugo v0.136.2+extended darwin/arm64 BuildDate=2024-10-17T14:30:05Z VendorInfo=brew
|
||||
|
||||
|
||||
| EN | ES | FR
|
||||
-------------------+----+----+-----
|
||||
Pages | 24 | 10 | 8
|
||||
Paginator pages | 0 | 0 | 0
|
||||
Non-page files | 0 | 0 | 0
|
||||
Static files | 90 | 90 | 90
|
||||
Processed images | 24 | 0 | 0
|
||||
Aliases | 1 | 0 | 0
|
||||
Cleaned | 0 | 0 | 0
|
||||
|
||||
Built in 1788 ms
|
||||
Environment: "development"
|
||||
Serving pages from disk
|
||||
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
|
||||
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
|
||||
Press Ctrl+C to stop
|
||||
```
|
||||
</details>
|
||||
@@ -0,0 +1,19 @@
|
||||
+++
|
||||
title = 'Sample content: featured image'
|
||||
date = 2024-06-24T14:38:33+02:00
|
||||
draft = false
|
||||
type = 'blog'
|
||||
|
||||
[images]
|
||||
featured_image = '/img/blog/feature-sample-3.png'
|
||||
+++
|
||||
|
||||
Sample blog content. Like a lorem ipsum but saying something more interesting.
|
||||
|
||||
|
||||
|
||||
Welcome to the world of "Content Ipsum," the fresh alternative to the classic lorem ipsum. It's the perfect blend for designers and writers who crave a dash of creativity and meaning in their placeholder text. Imagine a text that not only fills the space but also sparks the imagination, a text that weaves tales of innovation, inspiration, and the endless possibilities that creativity brings.
|
||||
|
||||
In the realm of "Content Ipsum," every paragraph is a journey through the wonders of the human mind, a celebration of the achievements that have shaped our world, and a look into the future that awaits us. From the depths of the ocean to the farthest reaches of the universe, "Content Ipsum" takes you on an adventure that captivates and informs.
|
||||
|
||||
So, the next time you're crafting a design or drafting a document, let "Content Ipsum" infuse your work with the spirit of discovery and the joy of creation. It's more than just text; it's a narrative that connects, engages, and inspires. Welcome to the evolution of placeholder text – where every word is a story waiting to be told.
|
||||
@@ -0,0 +1,162 @@
|
||||
---
|
||||
title: 'Sample content: formatting styles'
|
||||
date: 2024-06-21T14:38:33+02:00
|
||||
draft: false
|
||||
type: 'blog'
|
||||
tags:
|
||||
- sample
|
||||
- lorem-ipsum
|
||||
---
|
||||
|
||||
Sample blog content. Like a lorem ipsum but saying something more interesting.
|
||||
|
||||
We will show some content that is supported:
|
||||
|
||||
## Basic Syntax
|
||||
|
||||
### Headings
|
||||
|
||||
```
|
||||
# Heading 1
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
#### Heading 4
|
||||
##### Heading 5
|
||||
###### Heading 6
|
||||
```
|
||||
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
#### Heading 4
|
||||
##### Heading 5
|
||||
###### Heading 6
|
||||
|
||||
### Emphasis
|
||||
|
||||
```text
|
||||
*This text will be italic*
|
||||
_This will also be italic_
|
||||
|
||||
**This text will be bold**
|
||||
__This will also be bold__
|
||||
|
||||
_You **can** combine them_
|
||||
```
|
||||
|
||||
*This text will be italic*
|
||||
|
||||
_This will also be italic_
|
||||
|
||||
**This text will be bold**
|
||||
|
||||
__This will also be bold__
|
||||
|
||||
_You **can** combine them_
|
||||
|
||||
### Lists
|
||||
|
||||
#### Unordered
|
||||
|
||||
```
|
||||
* Item 1
|
||||
* Item 2
|
||||
* Item 2a
|
||||
* Item 2b
|
||||
```
|
||||
|
||||
* Item 1
|
||||
* Item 2
|
||||
* Item 2a
|
||||
* Item 2b
|
||||
|
||||
#### Ordered
|
||||
|
||||
```
|
||||
1. Item 1
|
||||
2. Item 2
|
||||
3. Item 3
|
||||
1. Item 3a
|
||||
2. Item 3b
|
||||
```
|
||||
|
||||
#### Nested
|
||||
|
||||
- This is an unordered list sample 1
|
||||
- This is an unordered list sample 2
|
||||
- This is an unordered indented list sample 1
|
||||
- This is an unordered indented list sample 2
|
||||
1. This is an ordered list sample 1
|
||||
2. This is an ordered list sample 2
|
||||
1. This is an ordered indented list sample 1
|
||||
2. This is an ordered indented list sample 2
|
||||
|
||||
### Images
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Links
|
||||
|
||||
```markdown
|
||||
[Hugo](https://gohugo.io)
|
||||
```
|
||||
|
||||
[Hugo](https://gohugo.io)
|
||||
|
||||
### Blockquotes
|
||||
|
||||
```markdown
|
||||
As Newton said:
|
||||
|
||||
> If I have seen further it is by standing on the shoulders of Giants.
|
||||
```
|
||||
|
||||
> If I have seen further it is by standing on the shoulders of Giants.
|
||||
|
||||
### Inline Code
|
||||
|
||||
```markdown
|
||||
Inline `code` has `back-ticks around` it.
|
||||
```
|
||||
|
||||
Inline `code` has `back-ticks around` it.
|
||||
|
||||
### Code Blocks
|
||||
|
||||
#### Syntax Highlighting
|
||||
|
||||
````markdown
|
||||
```go
|
||||
func main() {
|
||||
fmt.Println("Hello World")
|
||||
}
|
||||
```
|
||||
````
|
||||
|
||||
```go
|
||||
func main() {
|
||||
fmt.Println("Hello World")
|
||||
}
|
||||
```
|
||||
|
||||
### Tables
|
||||
|
||||
```markdown
|
||||
| Syntax | Description |
|
||||
| --------- | ----------- |
|
||||
| Header | Title |
|
||||
| Paragraph | Text |
|
||||
```
|
||||
|
||||
| Syntax | Description |
|
||||
| --------- | ----------- |
|
||||
| Header | Title |
|
||||
| Paragraph | Text |
|
||||
|
||||
## References
|
||||
|
||||
- [Markdown Syntax](https://www.markdownguide.org/basic-syntax/)
|
||||
- [Hugo Markdown](https://gohugo.io/content-management/formats/#markdown)
|
||||
@@ -0,0 +1,216 @@
|
||||
---
|
||||
title: 'Theme shortcodes'
|
||||
date: 2025-02-14T14:38:33+02:00
|
||||
draft: false
|
||||
type: 'blog'
|
||||
tags:
|
||||
- adritian
|
||||
- guide
|
||||
---
|
||||
|
||||
Shortcodes are a convenient [functionality of Hugo](https://gohugo.io/content-management/shortcodes/), allowing you to embed templates or layouts within other content.
|
||||
|
||||
Some of the example built-in shortcodes are Instagram posts, YouTube videos, QR codes, etc. You can find [the full list in the official docs](https://gohugo.io/content-management/shortcodes/#embedded).
|
||||
|
||||
The theme provides custom shortcodes to allow you to customize your landing page as you want:
|
||||
|
||||
- `toc`: Generates a styled table of contents from page headings.
|
||||
- `education-list`: Displays a list of educational qualifications.
|
||||
- `experience-list`: Shows a list of professional experiences.
|
||||
- `platform-links`: Embeds links to various platforms with icons.
|
||||
- `newsletter-section`: Adds a section for newsletter subscription.
|
||||
- `link`: Creates a hyperlink with an icon.
|
||||
- `experience-section`: Inserts a detailed experience section.
|
||||
- `contact-section`: Adds a contact information section, with a customizable form and information.
|
||||
- `client-and-work-section`: Displays a section for clients and work.
|
||||
- `about-section`: About section, with image, buttons for call to action and image.
|
||||
- `testimonial-section`: Adds references from customers, colleagues, etc.
|
||||
- `showcase`: two-column block with a full-width image to the left, and a text snippet to the right. Great for a call to action or introduction of the person (assuming it's a personal website).
|
||||
- `text-section`: utility shortcode used to render text in some parts of the theme where it would otherwise be full-width, appearing "too floaty". See [the github issue #260 for context](https://github.com/zetxek/adritian-free-hugo-theme/issues/260).
|
||||
- `spacer`: Adds vertical spacing before the next element.
|
||||
|
||||
The shortcodes can be customized with different arguments:
|
||||
|
||||
- `toc`: Automatically generates a table of contents from the page's headings (H2, H3, etc.)
|
||||
- `heading`: Custom heading text for the table of contents. Defaults to "Table of Contents".
|
||||
- `showHeading`: Boolean value to show or hide the heading. Defaults to true.
|
||||
- `class`: Custom CSS class for styling. Defaults to "table-of-contents".
|
||||
- **Features**:
|
||||
- Only displays if the page contains headings
|
||||
- Supports nested heading levels with proper indentation
|
||||
- Responsive design with dark mode support
|
||||
- Smooth scrolling to sections
|
||||
- Clean, modern styling with hover effects
|
||||
- **Usage Examples**:
|
||||
- `{{</* toc */>}}`: Basic table of contents with default settings
|
||||
- `{{</* toc heading="Contents" */>}}`: Custom heading
|
||||
- `{{</* toc showHeading=false */>}}`: Hide the heading
|
||||
- `{{</* toc class="sidebar-toc" */>}}`: Custom CSS class
|
||||
- `{{</* toc heading="Article Contents" class="custom-toc" */>}}`: Multiple parameters
|
||||
|
||||
- `education-list`:
|
||||
- `title`: The title of the education section.
|
||||
- `items`: A list of educational qualifications, they're provided by the `education` content type pages. From each, the `year`, `university`, and `degree` will be used.
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
- `experience-list`:
|
||||
- `title`: The title of the experience section (optional). When provided, an h2 heading is added above the list.
|
||||
- `padding`: Controls whether the section has padding. Set to "true" by default.
|
||||
- `items`: A list of professional experiences, coming from the `experience` content type. For each of them, the `companyLogo`, `duration`, `jobTitle`, `location`, and `Content` are used.
|
||||
- **Note**: On mobile devices, a separator line is automatically added between experience entries for better readability.
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
- `platform-links`:
|
||||
- `platforms`: A container to place social links inside. Usually you'll want to use it with a list of `link` nested (see below)
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
- `link`: links to social platforms (facebook, linkedin, etc)
|
||||
- `url`: The URL for the hyperlink.
|
||||
- `icon`: The icon to display with the link.
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
- `newsletter-section`:
|
||||
- **Form Configuration**:
|
||||
- `form_action`: The URL where the newsletter form data will be submitted. Falls back to site data configuration (typically set in data/homepage.yaml).
|
||||
- `form_method`: The HTTP method for form submission (typically "POST" or "GET"). Falls back to site data configuration.
|
||||
- **Section Content**:
|
||||
- `newsletter_title`: Sets the main heading/title for the newsletter section. Falls back to i18n value "newsletter_title".
|
||||
- `newsletter_placeholder`: Placeholder text displayed in the email input field. Falls back to i18n value "newsletter_placeholder".
|
||||
- `newsletter_button`: Text displayed on the subscription button. Falls back to i18n value "newsletter_button".
|
||||
- **Response Messages**:
|
||||
- `newsletter_success_message`: Message displayed to users after successful subscription. Falls back to i18n value "newsletter_success_message".
|
||||
- `newsletter_error_message`: Message displayed to users if subscription fails. Falls back to i18n value "newsletter_error_message".
|
||||
- `newsletter_note`: Small text/disclaimer shown below the form (typically mentions privacy policy). Falls back to i18n value "newsletter_note".
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
- `experience-section`:
|
||||
- `title`: The title of the experience section.
|
||||
- `experiences`: A detailed list of experiences, coming from the `experience` content type pages.
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
- `contact-section`:
|
||||
- `title`: Sets the main heading/title for the contact section. Falls back to the i18n value "contact_title" if not provided.
|
||||
- **Form Configuration**:
|
||||
- `form_action`: The URL where the form data will be submitted. Commonly used with services like Formspree. Falls back to site data configuration.
|
||||
- `form_method`: The HTTP method for form submission (typically "POST" or "GET"). Falls back to site data configuration.
|
||||
- **Form Field Placeholders**:
|
||||
- `contact_form_name`: Placeholder text for the name input field. Falls back to i18n value.
|
||||
- `contact_form_email`: Placeholder text for the email input field. Falls back to i18n value.
|
||||
- `contact_form_phone`: Placeholder text for the phone input field. Falls back to i18n value.
|
||||
- `contact_form_message`: Placeholder text for the message textarea. Falls back to i18n value.
|
||||
- `contact_form_rows`: Number of rows for the message textarea. Defaults to 2 if not specified.
|
||||
- `contact_button`: Text for the form submission button. Falls back to i18n value.
|
||||
- **Contact Information**:
|
||||
- `contact_phone_title`: Heading for the phone contact section. Falls back to i18n value.
|
||||
- `contact_phone_number`: Phone number to display. Falls back to i18n value.
|
||||
- `contact_email_title`: Heading for the email contact section. Falls back to i18n value.
|
||||
- `contact_email_email`: Email address to display. Falls back to i18n value.
|
||||
- `contact_address_title`: Heading for the address section. Falls back to i18n value.
|
||||
- `contact_address_address`: Physical address or location information. Falls back to i18n value.
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
- `client-and-work-section`: this shortcode doesn't use as many arguments - as much of the content comes from other content pages.
|
||||
- `title`: The title of the client and work section.
|
||||
- `clients`: A list of clients, coming from the `client` content type (each with `title`, `link`, `logo`)
|
||||
- `projects`: A list of projects, coming from the `project` content type (each with `title`, `content`, `button.URL`, `button.btnText`, `button.icon`, `image`).
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
- `about-section`:
|
||||
- Content Arguments
|
||||
- `intro_title` - Sets the main heading/title for the about section. Falls back to the title from site data if not provided.
|
||||
|
||||
- `intro_description` - Contains the HTML content or description text for the about section. Falls back to the content from site data if not provided.
|
||||
|
||||
- `imgSrc` - Specifies the path to the image displayed in the about section. Falls back to the image defined in site data if not provided.
|
||||
|
||||
- `imgWidth` - Specifies the width for the image.
|
||||
|
||||
- `imgHeight` - Specifies the height for the image.
|
||||
|
||||
- `imgScale` - Specifies the scale used for the image (for example, `0.5` if the high resolution image is double the size of the smaller one) This is only considered if neither imgWidth nor imgHeight is used.
|
||||
|
||||
- `v_align` - Controls the vertical alignment of the text content relative to the image. Accepts "center" (default), "top", or "bottom".
|
||||
- `text_align` - **Deprecated**: Use `v_align` instead. Maintains backwards compatibility.
|
||||
- `h_align` - Controls the horizontal alignment of the text content. Accepts "left" (default), "center", or "right".
|
||||
|
||||
**Alignment Examples**:
|
||||
- `v_align="center" h_align="left"` - Text vertically centered, left-aligned (default)
|
||||
- `v_align="top" h_align="center"` - Text at top, horizontally centered
|
||||
- `v_align="bottom" h_align="right"` - Text at bottom, right-aligned
|
||||
|
||||
- Primary Button Arguments
|
||||
- `button1_enable` - Boolean value to show or hide the primary button. Defaults to the value from site data.
|
||||
|
||||
- `button1_icon` - icon class to display before the button text. Falls back to the icon from site data.
|
||||
|
||||
- `button1_url` - Target URL for the primary button. Falls back to the URL from site data.
|
||||
|
||||
- `button1_text` - Text label to display on the primary button. Falls back to the text from site data.
|
||||
|
||||
- Secondary Button Arguments
|
||||
- `button2_enable` - Boolean value to show or hide the secondary button. Defaults to the value from site data.
|
||||
|
||||
- `button2_icon` - FontAwesome or icon class to display before the button text. Falls back to the icon from site data.
|
||||
|
||||
- `button2_url` - Target URL for the secondary button. Falls back to the URL from site data.
|
||||
|
||||
- `button2_text` - Text label to display on the secondary button. Falls back to the text from site data.
|
||||
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
- `testimonial-section`:
|
||||
- `title`: The title of the testimonial section.
|
||||
- `testimonials`: A list of testimonials, provided by the `testimonial` content type pages. The partial dynamically pulls content from pages with type "testimonial". Each testimonial page should include:
|
||||
- `Content`: The main testimonial text (the actual quote)
|
||||
- Meta Information:
|
||||
- `name`: The name of the person giving the testimonial
|
||||
- `position`: The job title or role of the person giving the testimonial
|
||||
- `image.src`: Path to the image of the testimonial author
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
- `showcase`:
|
||||
- **Content Arguments**:
|
||||
- `title`: Sets the main heading/title for the showcase section. Falls back to the i18n value "showcase_title".
|
||||
- `subtitle`: Sets the subtitle text that appears below the main heading. Falls back to the i18n value "showcase_subtitle".
|
||||
- `description`: Contains the HTML content or description text for the showcase section. Falls back to the i18n value "showcase_description".
|
||||
- **Button Configuration**:
|
||||
- `button_text`: Text label to display on the button. If not provided or set to false, the button will not be displayed.
|
||||
- `button_icon`: Icon class to display before the button text. Falls back to the icon from site data.
|
||||
- `button_url`: Target URL for the button. Falls back to the URL from site data.
|
||||
- **Image Configuration**:
|
||||
- `imgSrc`: Specifies the path to the image displayed in the showcase section. Falls back to the image defined in site data.
|
||||
- `imgWidth` - Specifies the width for the image.
|
||||
- `imgHeight` - Specifies the height for the image.
|
||||
- `imgScale` - Specifies the scale used for the image (for example, `0.5` if the high resolution image is double the size of the smaller one) This is only considered if neither imgWidth nor imgHeight is used.
|
||||
- **Social Media**:
|
||||
- `social_links`: Array of social media platform links to display at the bottom of the showcase. Each item should have a URL and icon property.
|
||||
- **Responsive Behavior**:
|
||||
- The showcase uses a two-column layout on desktop devices (≥768px) and stacks columns vertically on mobile devices, with the image appearing above the text content.
|
||||
- **Inner Content**:
|
||||
- The shortcode can also accept inner content that will be rendered in a separate div with class "inner-content".
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
- `text-section`:
|
||||
- **Content Arguments**:
|
||||
- `title`: Sets the main heading/title for the text section (optional).
|
||||
- `subtitle`: Sets the subtitle text that appears below the main heading (optional).
|
||||
- **Layout Options**:
|
||||
- `padding`: Controls whether the section has padding. Set to "true" by default.
|
||||
- `centered`: When set to "true", adds flexbox classes to center the content both horizontally and vertically. Set to "false" by default.
|
||||
- **Inner Content**:
|
||||
- The shortcode accepts markdown-formatted inner content that will be rendered in the text section.
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
- `spacer`:
|
||||
- **Size Options**:
|
||||
- `size`: Controls the amount of vertical spacing. Accepts "small", "medium" (default), "large", or "xlarge".
|
||||
- **Usage Examples**:
|
||||
- `{{</* spacer */>}}`: Adds medium spacing (default)
|
||||
- `{{</* spacer size="small" */>}}`: Adds minimal spacing
|
||||
- `{{</* spacer size="large" */>}}`: Adds substantial spacing
|
||||
- `{{</* spacer size="xlarge" */>}}`: Adds maximum spacing
|
||||
- `sectionId`: Optional. Overrides the default HTML id for the section. If not provided, the default id is used.
|
||||
|
||||
You can see them in effect in:
|
||||
- [the homepage](/) [`(see source)`](https://raw.githubusercontent.com/zetxek/adritian-demo/refs/heads/main/content/home.md).
|
||||
- [the CV page](/cv) [`(see source)`](https://raw.githubusercontent.com/zetxek/adritian-demo/refs/heads/main/content/cv.md).
|
||||
Reference in New Issue
Block a user