your-identity / hugo-theme-dimension Goto Github PK

View Code? Open in Web Editor NEW

107.0 5.0 104.0 9.32 MB

A CMS friendly hugo port of HTML5UP's dimension theme

License: Other

HTML 4.79% CSS 31.33% JavaScript 18.87% SCSS 45.01%

hugo-theme-dimension's Introduction

Dimension

A hugo port of HTML5UP's responsive and minimal dimension theme. With native support for Netlify's headless CMS.

Dimension

How to start

You can download the theme manually by going to https://github.com/your-identity/hugo-theme-dimension.git and pasting it to themes/dimension in your root directory.

You can also clone it directly to your Hugo folder:

$ git clone https://github.com/your-identity/hugo-theme-dimension.git themes/dimension

If you don't want to make any radical changes, it's the best option, because you can get new updates when they are available. You can also include it as a git submodule:

$ git submodule add https://github.com/your-identity/hugo-theme-dimension.git themes/dimension

How to configure

The theme doesn't require any advanced configuration. Just copy:

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "dimension"

to config.toml file in your Hugo root directory and change params fields.

NOTE: All the main page styling and configuration can be done by creating _index.md pages in the content folder and subdirectories. This choice was made to allow the use of any headless CMS (e.g. netlify) for total customization.

Post archetype

See the basic _index.md file params supported by the theme — https://github.com/your-identity/hugo-theme-dimension/blob/master/archetypes/_index.md

title: Your Name
description: A great human
background: "<path or link to image>"
logo: "<path or link to image>"

`background` and `logo` Params

As indicated above, background and logo can be an image of your choice by placing JPGs, PNGs, SVGs, etc. in the static directory of your repository. If the static directory does not yet exist, create it.

Given the following repo structure:

  .
  ├── config.toml
  ├── content
  │   ├── posts
  │   │   └── _index.md
  │   ├── _index.md
  │   └── elements.md
  ├── static
  │   └── images
  │       ├── custom_bg.jpg  
  │       └── custom_logo.svg
  └── archetypes
      └── default.md

static/images/custom_bg.jpg can be referenced in content/_index.md as:

  ---
  title: Your Name
  description: A great human
  background: "images/custom_bg.jpg"
  logo: "images/custom_logo.svg"
  ---

...or in content/posts/_index.md as:

  ---
  title: Posts
  description: A great human's posts
  background: "../images/custom_bg.jpg"
  logo: "../images/custom_logo.svg"
  ---

Both fields may also be a URL to an online asset, such as:

  ---
  title: Posts
  description: A great human's posts
  logo: "https://upload.wikimedia.org/wikipedia/commons/8/8e/Font_Awesome_5_regular_gem.svg"
  ---

How to run your site

From your Hugo root directory run:

$ hugo server -t dimension

and go to localhost:1313 in your browser. From now on all the changes you make will go live, so you don't need to refresh your browser every single time.

How to contribute

If you spot any bugs, please use Issue Tracker or if you want to add a new feature directly please create a new Pull Request.

Sponsoring

If you like my work and want to support the development of the project, now you can! Just:

License

The theme is released under the CC BY 3.0 License. Check the original theme license for additional licensing information.

hugo-theme-dimension's People

Contributors

Stargazers

Watchers

Forkers

librisius axect miss-sophie experimental-cr rewrwerwerewrew scpatricio akshaygpt lenaluo vilanvo shusuke-irikuchi mitzigarcia diogenas mamawatoto polonakerznar blueyetisoftware asclines adamivora 06-repos ngwese orstudio rajnish-13547 00krishna-tools alexb4891 face2020 kaller-io shvyrev avamore hm-bolivia carbideband stillerman manoeuvre-guru raghavraman affan100 frankbeatrice devopstoday11 rosegayming sandkoan smolbeanvi valdepeace luckless sat285 fanid eadderley technopig aicsx dvitaskis ahmadihamid renatomdg gridster z0rn161 sbrich thewebmastercom fermats-last-account gelmisb asirshahid jaydenhd fabdalmakhani liucipan drumfel afritzler adsail rudraswat diegoscl toitoinou zorga18 elon-188 ricardooncode attuccigiulio il23pazzo sc0rpi0n101 weidaxu1988 pila-ecosystem runjing-liu120 atient zy0n octokas thorgrimson nickstuaw santarl cregkly xampl decoding-the-web cranelint excitoon-favorites ajelandro19 yhsiang jayascript zmbush thesustainableloop amandadumi oojbuffalo isweluiz al-swaiti evocaire lgsobalvarro samdani1593 naviamold1 cawaltrip 9j7axvsluf graffend

hugo-theme-dimension's Issues

Main menu items ordering

The main menu items are ordered alphabetically. Add "weight" parameter to the .md files, so proper ordering is established.

Feature Request: Remove Icon/Logo UI Element

It would be really helpful if it was possible to remove the whole icon element. That's really all.

The original docs seem to reference this ability.
https://github.com/dspechnikov/dimension-hugo/blob/master/documentation.md#supported-site-parameters

The Page With Chinese Title May Be Unresponsive

When I use chinese words as the markdown files 's title, the page cannot be opened to read sometime.

I think the code <a href="#{{ cond (in (.Title|urlize) "%") (.Title | base64Encode) (.Title) | urlize }}">{{ .Title }}</a> and <article id="{{ cond (in (.Title|urlize) "%") (.Title | base64Encode) (.Title) | urlize }}"> in list.html does not work correctly for some other characters.

I've tried safeURL and it also didn't work.

Now I use md5 instead to solve it (Maybe it looks better than base64).

In addition, I suggest to add a pagination, otherwise the navigator will be out of screen when there is too many pages.

Logo has hyperlink through it instead of underneath it

When setting a logo for a page, the hyperlink underneath is supposed to be rendered underneath the icon. Instead, it is rendered through the middle of it. Here is an example of what I am experiencing:

Compare this to the example photo in the README.md file. That has a gem that is properly underlined.

Steps to Reproduce

Download an icon from cleanicons.xyz. In my attached screenshot, I am using "comment".
- Margin = 100px
- Color = ffffff (white)
- Transparent Background = checked (yes)
- Size = 512px
Add the image to the top-level images directory.

Configure a new page to use the icon as a logo.

$ mkdir content/reproduce/
$ vim content/reproduce/
---
title: Reproduce
logo: ../images/CleanIcons_font-awesome_512px_ffffff.png
---

Additional Comments

This may be related to this change: #16

Image Responsiveness

Hi,

images do not get resized on smartphones. Is there something I am missing? Thanks!

See here: https://radiopanspermia.space/#how-to.

Hans

Add documentation for the "image" shortcode

The information for how to use the "image" shortcode from #12 should be documented in the README.md file. Otherwise, it is hard for users to find.

Cannot parse css when rendered with the hugo command

Hello, sir. I found the bug cannot load css when rendered using the hugo command, after I searched it was necessary to add quotation marks in this href to layouts/partials/header.html

 <link rel="stylesheet" href={{ "assets/css/main.css" | absURL }}/>
 <noscript><link rel="stylesheet" href={{ "assets/css/noscript.css" | absURL }}/></noscript>

<link rel="stylesheet" href="{{ "assets/css/main.css" | absURL }}"/>
<noscript><link rel="stylesheet" href="{{ "assets/css/noscript.css" | absURL }}"/></noscript>

Before

After Fix

By the way, the theme is good! 💯

Example of nested content

Would it be possible to provide an example of using nested content / taxonomy with this theme? For example, the demo website for the Dimension theme has "POSTS" on the main page. When that is clicked on, all content from "POSTS" is loaded up (whereas it was hidden on the main page).

Looking to apply this blog theme to a blog. Thanks for any help you can provide!

https://themes.gohugo.io/theme/hugo-theme-dimension/

Adjust post font size?

Is there an easy way to adjust font size for posts?

Chinese title cannot be parsed

The Chinese title cannot be parsed, the article is not displayed, and can it support custom URLs?

E.g

---
title: 玩客云
description: "A collection of posts"
icon: "flag"
url: wankeyun
---

范德萨范德萨

Prevent Chinese characters

Cross post links don't work

According to hugo documentation something like [FAQ]({{< ref "/posts/faq" >}} "About Us") should create a link to http://site.com/posts/faq. Which is generated logically from hugo new posts/faq. Using [FAQ]({{< ref "/posts/faq" >}} "About Us") in your code creates the page at http://site.com/posts/#faq.

favico

thanks to dev for this beautiful theme,

how to change favico? i see the default one is "fa-file", but how to change that item? thanks

Remove shadow circle behind page title.

There appears to be a shadow in the shape of a circle behind the title of the page you're on. This does not look to be a part of the background CSS or JS. Is there a way to remove it at all?

Located directly behind "Your Name" in the ReadMe screenshots.

Other `fa-icons` Do Not Work

This is quite similar to #2 but in my case, the only icons that work are 'gem' and 'flag'.

I have tried:

Calling the icon with fa-<icon-name> (Results in an empty circle)
Opening the page in another browser, clearing caches, and digging through source.

All the icons that are available render like this.

To reproduce, create a new site, setup the theme, etc, etc. Once set up, select any icon other than 'flag' or 'gem'.

Tested On:
Chromium
Firefox
Hugo V0.60.0 and V0.73

Icon to fill circle on main page?

I want to use a profile pic instead of a logo. Is it possible to have it fill the circle? Right now it just take the photo and shrinks it and it still square.

Add some SEO items to template

I ran an SEO evaluator against my site and noticed a couple things:

languageCode isn't used in the header layout
There is no customizable tag for "description" which is very important to SEO
Complaints about site loading just a little too slowly (0.48 sec instead of 0.4sec) potentially due to javascript 6 javascript files. It'd be nice to make the Netlify scripts enabled by default but configurable to be disabled
Charater encoding not set in the header layout

I'll submit a pull request for these things shortly

Titles do not wrap

A content page seems to only have enough width for a title with 28 characters. After that, the title continues off of the main centered gray rectangle which looks bad and eventually gets cut off.

Steps to Reproduce

$ mkdir content/long_title/
$ vim content/long_title/_index.md
---
title: Hello World and Welcome to My Really Long Blog Title
---

This is a blog that has a really long title.

Additional Comments

As a workaround, I have been setting the "title" to the date of a blog and then using a header for the real blog title. Text within the post itself is wrapped properly. This workaround looks fine but it is bad for SEO.

$ mkdir content/long_title_workaround/
$ vim content/long_title_workaround/_index.md
---
title: 2021-01-01
---

# Hello World and Welcome to My Really Long Blog Title

This is a blog that has a really long title.

Customization of the logo

How can I replace the "gem" logo by my own image? I have tried parameters like logo, logoimage, but none is working. Is it hard-coded?

Font Awesome Icon Support in archetypes + markdown

Great work on this theme; it's beautiful! This may only be a matter of needing further instruction in the README, I've yet to have success referencing FA icons both in markdown and via the archetype logo field. FA appears to be part of theme.

If this is just a matter of guidance, I would appreciate being pointed in the right direction, and more than happy to contribute to the README/docs thereafter as well.