How to set HUGO.io landing page? - hugo

I'm trying to set one of my sub-pages as a landing page in my hugo.io page setup. But all I can find so far is the hint to change the content of the home.html file in my layout folder.
This is not what I want to do, because by this I will duplicate the existing layout file for the sub-page whis is error prone. Is there any Site parameter that sets my sub-page "Portfolio" to be my landing page?
My setup:
|content
|posts
|about
|portfolio
|work1 (This is a page bundle)
|work2 (This is a page bundle)
index.md (Page Content File)
_index.md (List File)
My template setup:
|layouts
|_default
list.html
single.html
|portfolio
list.html
single.html
index.html
home.html
So layouts/portfolio/list.html ranges through all my portfolio work. This works fine. The file is used when I navigate to localhost:1313/portfolios.
But for having the same content on localhost:1313/ I understand to duplicate the layoutfile to layouts/home.hmtl -> Is this correct? This seems utterly laborious to me. Is there a more convenient way to tell hugo "use the file content/portfolios/_index.md as my landing page"?
Hope you can help me, Thanks in advance!

One solution is to move the content of layouts/portfolio/list.html to a partial, then include this partial in both layouts/portfolio/list.html and layouts/index.html. This way you will not have to duplicate the code you use to list all of your work.
I would also advice you to read the documentation on order lookup for templates, specifically the section related to the home page, as this explains the order of which template files are included.

Related

How to create a HUGO page with no direct links

Is there anyway to create a hugo page which has no direct links? I would like to be able to create a markdown file for a page but only allow people to find the page if they have a direct link.
Yes it is possible. It really depends on how you are generating your pages. As for now I am showing two ways you can do it.
Way 1: Your _default/list.html generates the list of links to your content. You can customize that to exclude a link. Watch the if conditional.
{{ range .RegularPages }}
{{ if (not in .Title "title of page to exclude") }}
<li>
{{.Date.Format "2006-01-02"}} | {{.Title}}
</li>
{{ end }}
{{ end }}
Way 2: Alternatively you can put an html file in the static folder of your hugo directory. If the directory does not exist, you can create it. No direct links will be generated for static contents unless you explicitly link to it from somewhere else.
You can put all pages you do not want to list into a separate content sub-folder and not include it in the menu.
For example, my setup:
content
├── blog
├── notes
└── voice
Where only voice and blog have menu items, so everything in notes can not be accessed by links from the site.

Drupal 7 custom logo in page.tpl.php not displaying on all pages

I have a Drupal 7 site with a custom sub theme based on Zen. I have a custom logo that I placed in the page.tpl.php header div. The problem I'm having is that the logo only shows up on the first "main" pages, but not "subpages". Excuse my terminology here trying to explain this. What I mean by subpages is any page that is further down the chain or occurring after the first forward slash. Below is an example of what I mean by "main" pages and "subpages". All these "main" pages are directly after the first slash after the website name. The logo doesn't show up on any pages that occur after these main pages (subpages). All my pages are made using the Pages module, however, the subpages have a path using %term, for example /support/%term or products/%term.
What am I missing and what do I need to do to make my logo in page.tpl.php show up on all pages of my site? Am I supposed to create a new page.tpl.php file for the pages using /%term?
Main pages - logo shows up:
mysite.com/about
mysite.com/products
mysite.com/support
mysite.com/contact
Sub pages - logo doesn't show up:
mysite.com/products/product1
mysite.com/support/product1-support
If I understand you correctly, the quick fix for that is to make sure your logo's path starts with '/', like so:
<img src="/sites/all/themes/customZen/images/logo.png" />
But then if path of the theme changes everything will break, so don't do this.
If you place the logo using CSS as a background, use relative URL (it is relative to the path of .css file)
Or you can do something like this in your page.tpl.php:
<img src="<?php url($directory . '/images/logo.png'); ?>" />
$directory is the directory the template is located in, e.g. sites/all/themes/customZen.
Full list of page.tpl.php variables can be found here: https://api.drupal.org/api/drupal/modules%21system%21page.tpl.php/7.x
Did you solve this?..Well, if you didn't, try with this in your page.tpl.php paste this:
<img alt="" src="<?php echo drupal_get_path('theme', 'customZen');?>/images/logo.png">
Good luck!

Why is hugo looking in the wrong directory for layouts?

In my hugo project I have the file tree
content
nav
technology.md
pages
bar.md
layouts
nav
single.html
baseof.html
pages
single.html
baseof.html
But when I run the hugo server with verbose mode I get the warnings
WARN: Unable to locate layout for page nav/technology.md: [technology/single.html _default/single.html theme/technology/single.html theme/_default/single.html _default/single.html]
WARN: nav/technology.html is rendered empty
Why is hugo looking for technology/single.html instead of nav/single.html when pages works fine?
Found out the reason for this was because in my markdown files I was using the option type = "technology" which conflicted with the built in option type.
To clarify things in your case, 'technology' is not a type, but rather 'nav' is correct and default type. However you can override the default type, in your case, you can use 'pages' instead of the default 'nav'.

Having trouble with implementation

I have spent 2 hours + on the lightbox. I have checked paths to CSS and Javascript. I have used both the included jquery and Google's imported JQuery.
When I click an image it opens a new window with that image larger on a white background. I want it to overlay the current page with <> and x.
You can see an example: http://demopbdesignsource.tierstrategies.com/a.aspx
Thanks
Looking at your code on your page I do not see where you are calling the lightbox.js script - that needs to be called right before the body close tag.
Also lightbox help states : If you already use jQuery on your page, make sure it is loaded before lightbox.js. - ◦Include the Javascript at the bottom of your page before the closing /body tag:
I used the lightbox-plus-jquery.js and called that just before the close of the body tag and it worked. I called the lightbox-plus-jquery.js just before the close of the body tag because it has both jquery and lightbox combined.
I am still working on the page and I am just using html not .net but the lightbox would work the same. If you look at my source you will see the script call right before /body tag.
http://just-in.com/recycledDresser/index.htm
Hope this helps.
Debra W.
You need to call the Lightbox script.
Something like
Placing it in the line before the line works for me.
Both
http://demopbdesignsource.tierstrategies.com/X/LightBox.css
and
http://demopbdesignsource.tierstrategies.com/X/LightBox.js
cannot be found.
The link provided in the question is giving 404 right now.
but I think you just need to follow the steps given at
http://lokeshdhakar.com/projects/lightbox2/
to set up lightbox.
you may have missed either of the following :
Include the CSS at the top of your page in your <head> tag:
<link href="path/to/lightbox.css" rel="stylesheet">
Include the Javascript at the bottom of your page before the closing </body> tag:
<script src="path/to/lightbox.js"></script>

different page structures with angular js ui-router

My be this is very basic, but I am really stuck here, here is my question :
I am using angular-ui-router with angular js
This is how my pages are structured (Left:Homepage, Right:Inner Pages (/about-us) ) :
Homepage (/)
Header
Content (100% width, one column)
Footer
so I create directives for Header, & Footer, and they will be common through out the site. & I load Content in ui-view, here is how my main template look like
<header-directive></header-directive>
<div ui-view></div>
<footer-directive></footer-directive>
And here are all the other pages strucure e.g (/about-us)
Header
Content Image/Map (100% width)
Content (75% Width)
Sidebar (25% Width)
Footer
So according to the Homepage structure above I need to load Content Image/Map, Content, and Sidebar in the UI-VIEW now, but Sidebar is common too, and that won't change on inner pages.
So the inner pages I only want to load Content Image/Map, and Content. Is there a way to achieve that ?
There is a very good blog post about UI-Router, http://www.funnyant.com/angularjs-ui-router/. Here the author creates similar example to yours, so I think it might help you.

Resources