Make images and section links relative to the root directory

[colans]

On sub-pages, say for a blog, the navigation and images won't work because their paths are relative to the current directory. This works well for single-page sites, where everything is always at the root, but not in this case.

We need to prepend a / to all of the locations so that we can explicitly state that all paths start at the root.

[SteveLane]

So if going down this path, it'd be good to have an example, which is where it gets a little tricky. Would the example have the same head as the main page? And if so, it should probably be templated appropriately.

At present, if we added an empty page to content/blog (in the example site) we'd just get a blank page of course. I think I'd prefer to have no example link, or a fully working example.

[braian125]

En las subpáginas, digamos para un blog, la navegación y las imágenes no funcionarán porque sus rutas son relativas al directorio actual. Esto funciona bien para sitios de una sola página, donde todo está siempre en la raíz, pero no en este caso.

Necesitamos agregar un prefijo /a todas las ubicaciones para poder declarar explícitamente que todas las rutas comienzan en la raíz.

I believe that in addition to this proposal, which is very timely, we must also define a base template, the theme currently does not have it, I have had to make all these changes to me, and the initial template has been partially rendered.

[SteveLane]

What do you mean by a base template? Different to the basic config.yml in the exampleSite directory?

[braian125]

When I refer to base template, I don't only refer to not limiting the use of the content from the config.toml (It's well done), but instead, expand and promote the use of section page templates, the theme that you publish is amazing, but with great respect, I made changes to improve the ease of making publications in a production site:

1. The menu you implement it from the config.toml

# Navigation section
[params.nav]
  mission = "Our Mission"
  services = "Services"
  team = "The Team"
  contact = "Get In Touch"
  # Include logo instead if HOME:
  # logo = "path/to/logo"

I preferred to use the front matter method of defining menu entries:

<ul class="fh5co-menu-1" aria-label="menu">`
   {{ $current := . }}
   {{ range .Site.Menus.main }}
        <li class="" aria-label="{{ .Name }}">
           <a href="{{ .URL }}" data-nav-section="{{ lower .Name }}" class="menu__items__item__link {{ if $current.IsMenuCurrent "main" . }}active{{ end }}" alt="{{ .Name }}" role="menuitem">
                {{ upper .Title }}
           </a>
       </li>
  {{ end }}
</ul>

2. The content of the site is limited to changing the config.toml, and I think it is more efficient to link it to Front Matter, so I deleted a certain logic from its configuration file and adapted it to the folder content.

{{ range first 3 (where .Site.RegularPages ".Type" "areas") }}
     <div class="col-md-6">
          <div class="service">
               <div class="icon"><img src="{{ .Params.icon }}"></div>
               <h3>{{ .Title | markdownify }}</h3>
               <p>{{ .Content | markdownify }}</p>
          </div>
    </div>
{{end}}

[braian125]

On sub-pages, say for a blog, the navigation and images won't work because their paths are relative to the current directory. This works well for single-page sites, where everything is always at the root, but not in this case.

We need to prepend a / to all of the locations so that we can explicitly state that all paths start at the root.

I miss putting absolute paths in the partial header.html and js.html, maybe here they are even more important:

<!-- Animate.css -->
<link rel="stylesheet" href="/css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="/css/icomoon.css">
<!-- Simple Line Icons -->
<link rel="stylesheet" href="/css/simple-line-icons.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="/css/magnific-popup.css">
<!-- Bootstrap  -->
<link rel="stylesheet" href="/css/bootstrap.css">
<!-- Theme style -->
<link rel="stylesheet" href="/css/style.css">

  since by extending a new section (for example: a blog), assets would not work.

{{ define "title" }}
  {{ .Title }} – {{ .Site.Title }}?
{{ end }}
{{ define "main" }}
    {{ partial "nav.html" . }}
    <div class="container">
        <div class="text-center fh5co-heading">
            <h1>{{ .Title }}</h1>
        </div>
        <hr>
        {{ .Content }}
        {{ .Params.author }}
    </div>
{{ end }}

[SteveLane]

So @braian125 I think you're talking about a different thing here, so I've opened another issue.

[colans]

My original intention here was for the blog so things I put in content/blog/whatever.md would work as well.