I'm using the Hugo Justice theme for my web site and have trouble implementing nested menus. The main menu items appear, but not the nested menus (nor the down arrow indicating there are sub-menus.)
In ../layouts/partial I have menu.html, but I don't know where I need to include that file. The current development site code is available at https://github.com/rs-aesi/my-company-website.git.
I'm not a professional web site developer but have maintained my own company's html/css site for several decades. Now I need to replace it with additional value so I need to learn how to do this with Hugo.
All help appreciated.
Rich
Looking at your GitHub repo, it appears that you have the Justice theme in the themes directory, but also a lot of partials are also in the site layouts directory, which overrides the justice directory, and will probably cause conflicts and make your site difficult to maintain.
The menu.html partial should be called using the command {{ partial "menu" . }}. You can put this command either in a page template in the _default directory, or in another partial such as site-header.html or page-header.html.
Related
I recently started learning to build webpages and custom themes with Wordpress using Timber, twig and Advanced Custom Fields and I don't really know how to organize everything. So far I've been tinkering with everything in the same place (.php and .twig separated) but I can really see that becoming a mess.
So the answer to this is obviously very subjective. There is no convention for how best to organize your folder, files and project/theme. A great starting point is the Timber Starter theme, which is made by the people who make Timber. You can find that here: https://github.com/timber/starter-theme
I am also going to share with you a project I recently completed with Timber and show you how it is organized. Unfortunately, I cannot share the repo with you as it was for work and the repo is private, however the file and folder structure is all that really matters here.
I started this project, and all Timber projects with the Timber starter theme, so that is my starting point. Inside of the Templates folder, I have the following
CPT = stands for Custom Post Types. Each CPT has its own folder inside of this folder and all of my .twig files for that specific CPT go there. For example: CPT > Staff > image.twig, biography.twig, etc.
components = this file contains things like the header, footer, navigation, mobile navigation, etc. These are all .twig files that are used throughout various pages on my site.
pages = this folder contains folders for each page. I like to break each page specifically into "components" and place each page specific component into its page specific folder.
For example, inside of this pages folder I have a folder called "home-page." This contains all of the components for the home page. So I might have a hero.twig, home-page-slider.twig, mission-statement.twig etc. I break each piece/component of the home page down and create a specific .twig file for each and place them within this folder.
I repeat this process for each and every custom page/template I am making.
That is about it, at least for this project anyways. I hope this gives you a general idea about how best to organize your files. The key, is to do whatever makes sense to you, and if you are working as a team, whatever you and your fellow team members agree upon.
For example you might want to rename what I called my "components" folder to "partials" as you might be more familiar with that terminology. It honestly does not matter what you do as long as it makes sense to you and whomever is going to be in this code base. Remember, what makes sense right now, may not make sense 6 months to a year from now. So think ahead too.
The way I approach all of this is what is the simplest way to convey what each file's role is. I shouldn't have to think or look at a readme. The filenames, folder names and structure should be as self explanatory as possible. I like to remind myself of the KISS principle in these situations... "Keep it simple stupid!"
https://en.wikipedia.org/wiki/KISS_principle
Hope that helps.
As indicated in this similar question (Switch theme in an existing Jekyll installation) there are many jekyll themes to choose from.
I would like to keep my own content separate from the jekyll theme used.
Is there a good (standard?) way of structuring a jekyll project so that your content can be kept distinct from the theme?
Most of your content is kept separate but there is a little bleedover.
This is evident from the answer to the linked question.
Changing the theme later can become a painpoint.
Ideally I would like to structure the project such that there is a theme sub-directory or similar and the theme may be altered by pointing at a different sub-directory.
Doing this dynamically (making the web-site 'skinnable' would be nice to have but not essentiall).
Is there a dynamic theme theme somewhere?
Short answer: Yes, you can keep theme and content separate, but only if your site stays with the basic layout calls (default, page, post).
Longer explanation and exceptions: If your existing jekyll installation is pure: you have edited only the content in pages, posts and not created-used special layouts, then, you can use the jekyll-remote-theme plugin and the switch is seamless, assuming that the new theme is not doing something radical with the defaults.
If your existing theme has special layouts (e.g., splash.html and the new one does not have it) then your pages that employ the respective layout will become orphans (i.e., basic html with no special formatting).
I have switched an existing installation that had been extensively edited, so I got several orphan pages, which I had to manually switch to a layout that makes sense within the new theme.
In conclusion, you can keep content and theme separate in many common cases (e.g., personal blog), but not if you want a custom solution (e.g., personal portfolio with gallery and splash pages).
Jekyll is tool that allow content separation beautifully, be it also from theme files. It's not about standard structuring - although following points will help out.
Do not move or disturb structure of theme files as it may be bought from 3rd party.
Create content as blocks and put jekyll code to insert them at runtime in theme. So if you want header somewhere you can insert {% include head.html %}. Also have a look at contentblocks plugin.
I'm confused at the relationship between jekyll and jekyll bootstrap. I'd like to start a blog and I'm not really sure which site to use for tutorials and whatnot.
Jekyll is the main thing. It's what generates your markdown and templates into static html pages.
Jekyll Bootstrap is just a project that helps you make Jekyll sites faster/better. It uses Twitter Bootstrap, which you could totally do on your own.
And it's got stuff like rake tasks to make it easier to create new posts, and pages. For example, you can create a new post like this: rake post title="Hello World".
Unfortunately, Jekyll Bootstrap is no longer maintained because the author created his own static site generator.
I would just start with plain Jekyll if I were you, but there are probably some great ideas you can take from Jekyll Bootstrap. For instance, if you like Twitter Bootstrap, it's a great idea to include that in your site. Also, those rake tasks could be handy. It can be a pain creating new posts since the filename required by Jekyll is _posts/YYY-MM-DD-slug-of-the-post.md.
Jekyll is a static site generator.
Twitter Bootstrap is a HTML/CSS/JS framework that allows you to quickly create the most common GUI elements in your browser, like menu bars, tabs, buttons, etc.
Jekyll Bootstrap is a collection of turn-key Jekyll themes for Github pages, which are all based on the Twitter Bootstrap framework.
Note that Jekyll Bootstrap is no longer maintained. Therefore, these themes might not work as expected, because Github periodically upgrades their Jekyll version.
Jekyll is a compiler like for C++ or VB.NET. Jekyll-bootstrap is a open source project with Hello World website made using twitter bootstrap library (this is jquery library to make site responsive - adjust to screen size).
Now you can have your own site structure and use twitter bootstrap in any jekyll post or page as shown here. So don't go for 3rd party project where you've to spent time digging into code.
I started fiddling with Octopress recently, and I found a theme for Jekyll that I liked it.
The problem is that this theme doesn't have a similar structure that Octopress needs for themes.
I tried to clone the repo directly into my Octopress folder then use rake install['name-of-theme'] but that didn't work and I just got some errors about missing folders (source, sass).
So my question(s) is, how to install a theme for Jekyll with Octopress? is there a directory structure I need to follow? what are the minimum files requires to make it work?
I Googled a little bit but I didn't find anything related to converting a Jekyll theme.
Thanks.
You can't. The author of Octopress made his own theme layout and plugins to support it. Jekyll is meant for you to create your own theme layout as you wish (it's barebones). Think of Jekyll as a great framework to write your own static site, a store front or a wiki or a blog - from scratch. Octopress, on the other hand though, adds a framework on top of Jekyll: theme layout, a number of plugins defaulted for a blog site, SEO throughout the templates, a config file for controlling this framework-on-top-of-a-framework (Octopress framework on top of Jekyll framework). Basically, you can take Jekyll and write your own theme layout any way you wish; but with Octopress, you already have a strict theme layout to adhere to.
Octopress' rake install[] command to install a theme just copies a bunch of files to specific directories, following the authors specific theme format.
He's also changing the format from time to time as well, which usually breaks even older Octopress themes working on current Octopress sites (doesn't seem to worry about backwards compatibility). I know: I really tried some old responsive ones I found only to get errors with the latest Octopress as of April 2014.
Anyhoot, after many tries, I finally just sat down and copy-n-pasted the HTML into a new Octopress theme manually myself. Created my own "theme" to try to get some older Octopress themes working.
Still didn't like it as it was buggy (and I was trying several older Octopress themes); so, I gave up and just wrote my own Octopress theme from scratch and moved on. Personally, I don't like how Octopress' layout is, well, laid out. Far too many freakin incremental files. I basically just built my own from scratch and skipped several of the "custom" stuff. This allowed me the freedom of mocking up my own raw responsive set of HTML files and organize it how I wish (http://eduncan911.com).
I understand why he added the custom stuff in the last few months: for people that don't know much about frontend or just wanted a quick place to tweak this font, change that color, or just add a JS script to the custom footer and be done with a plugin.
Me? I already had a full HTML/JSS responsive HTML mockup I wanted to use. I only needed to utilitze Octopress' articles and show/hide the pagenation and comments. I didn't need that elaborate Octopress template layout. Though, now if anyone wants my theme, they can only copy exactly what I did and will need to modify it as they want. I did keep the SCSS generation though, as I like SCSS.
https://github.com/eduncan911/eduncan911.github.io/tree/source
I created an HTML website in dreamweaver it has a index page, nav-menu and around 10 other linked pages. I did not build the website from templates I just copied and pasted.
I want to upload this website using Wordpress and Ive never done it before. I'm still learning but need help figuring thing out;
I saw that in order to upload the page to Wordpress I need to create a so called theme and in order to do that I need to create different files like index.php, header.php, footer.php etc
My question is do I have to do that process with all my pages?
I mean about.html contact.html jobs.html?
What is the ideal way to do it?
A WordPress template is essentially a set of PHP pages and CSS that defines how your WordPress site looks. Template Development Link
Manually converting your site is going to take time. The advantage of the WordPress site will be that your site will be easier to update down the line.
How difficult building your template and pages is really going to depend on how clean your original css and pages are built.
First, build your template. You are going to try and pull your CSS and apply it to the template pages.
Next, you will need to use the WordPress GUI interface to add pages and include the content from your original site.
Again it is going to come down to how much of your formatting was done inline and how much you leveraged CSS in your presentation. A lot of table formatting for example will be more difficult to translate.