hugo won't render single page layout, instead uses _default single layout - hugo

)
I'm trying to create my own theme for hugo.io. So far, everything works fine. My only problem is, that I can't get hugo to render the custom layouts for single section content.
For posts this works fine:
The index.html gets called correctly
The single.html inside the "layouts/posts" gets called correctly
For tutorials, the list layout works correctly
The permalinks for all files and lists work correctly
The problem:
* For tutorials, the single layout doesn't call the "layouts/tutorials/single.html" layout. Instead it uses "layouts/_default/single.html"
I tried the following:
add type= "tutorial" preface setting to all tutorial .md files
add layout= "tutorial" preface setting to all tutorial .md files
add a "tutorial.html" file inside the "layouts/_default" folder (also tried naming it "tutorials.html)
add a "tutorial.html" file inside the "layouts" folder (same as above)
sadly, none of this works
My setup of content:
content
|__ posts
|__ new_post.md
|__ tutorials
|__ new-tutorial.md
My setup of layouts (inside my theme folder):
layouts
|__ _default
|__ list.html
|__ single.html
|__ posts
|__ list.html
|__ single.html
|__ tutorials
|__ list.html
|__ single.html
|__index.html
My single tutorial content (new-tutorial.md):
+++
title = "My new Tutorial"
date: 2019-10-04T14:10:46+02:00
draft: false
type: tutorial
layout: tutorial
+++
# Custom Content Headline
There is no error message from hugo.
I expect hugo to open the page "http://localhost:1313/tutorials/new-tutorial/ with the layout that lies in the file "layouts/tutorials/single.html"

You should not specify type: tutorial and type:tutorial in new-tutorial.md in your case.
Hugo will use layouts/tutorials/single.html by default for tutorial section, see https://gohugo.io/templates/lookup-order/#examples-layout-lookup-for-regular-pages
Final result for new-tutorial.md will look like
+++
title = "My new Tutorial"
date: 2019-10-04T14:10:46+02:00
draft: false
+++
# Custom Content Headline

Already solved the issue, the problem is in the type definition. Hugo by default gives the elements inside the tutorials folder, the type tutorials, if you change it to tutorial, you must make a subfolder with the tutorial htmls, that are the new type.
layouts
|__ _default
|__ list.html
|__ single.html
|__ posts
|__ list.html
|__ single.html
|__ tutorials
|__ list.html
|__ single.html
|__ tutorial
|__ list.html
|__ single.html
|__index.html
like it says in the documentation
In case I am not making my self clear, you can read about it here and here

Related

Angular directive templateUrl trying to GET from Express

I'm trying to get a third-party Angular directive (ngCart) to work with my Angular application. It seems like the ngcart directives are looking for a templateUrl as a relative path to the directive, and instead it seems like Express is trying to serve up the files instead of the directive finding the HTML file at the relative templateUrl path.
Project structure
projectName
| - bower_components/
| - node_modules/
| - public/
| - css
| - index.html
| - app.js (angular app)
| - src/
| - server.js (express app)
| - routes/
| - models/
| - package.json
server.js
...
app.use("/", express.static("public"));
app.use('/bower_components', express.static(__dirname + '/../bower_components'));
app.listen(8000, function () {
console.log("App is listening");
});
third-party directive file causing issues:
templateUrl: function(element, attrs) {
if (typeof attrs.templateUrl == 'undefined') {
return 'template/ngCart/addtocart.html'; // This is the relative path that's freaking out
} else {
return attrs.templateUrl;
}
}
The console error I'm getting is:
GET http://localhost:8000/template/ngCart/addtocart.html 404 (Not Found)
It seems like express is trying to serve up the HTML file in the template folder inside the third-party directive, but I just want it to be a relative path to the HTML file without express being involved.
As pointed out by #Claies in the comments, someone brought this concern up with the creator of ngCart (thread found here), to which he responded saying that you basically are supposed to copy the template files into a folder called "template" in your main public directory. It isn't documented anywhere in the ngCart documentation though, so hopefully this can help someone in the future.
It appears this is the most common way to bring in third-party angular directives that have their own template files.
Update:
I'm no expert in AngularJS, I've been fighting this exact issue with a programming buddy all afternoon.
Eventually we tripped across another question on SO which describes a vastly more elegant solution.
(I've also commented on the GitHub issue tracking page, for future reference.)
In short:
<ngcart-summary template-url="/libraries/ngCart/template/ngCart/summary.html"></ngcart-summary>

Express and Angular directory structure

I want to build a website with Express and Angular (no SQL) so I started wondering what is the right structure for this kind of app.
For Angular there is a directory structre I really like from here:
app/
----- shared/ // acts as reusable components or partials of our site
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
---------- article/
--------------- articleDirective.js
--------------- articleView.html
----- components/ // each component is treated as a mini Angular app
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
----- app.module.js
----- app.routes.js
assets/
----- img/ // Images and icons for your app
----- css/ // All styles and style related files (SCSS or LESS files)
----- js/ // JavaScript files written for your app that are not for angular
----- libs/ // Third-party libraries such as jQuery, Moment, Underscore, etc.
index.html
For Express I don't really no where it should be because I have no a lot of experience with Express, where can I put express with the correct structure.
If your express backend acts as an api server, you can simply put it with app's parent folder side by side, i.e.
backend/
----gruntfile.js
----express.js
----router/
----package.json
----node_modules/
frontend/
----app/

Apache FallbackResource and request path behaviour

I'm making a simple website with angularjs on a Apache 2.4 webserver. My website folder looks like this:
APACHE24\HTDOCS\TEST
| .htaccess
| index.html
|
+---js
| angular-route.js
| angular.min.js
| app.js
|
\---partials
show-gem.html
I setup some routes, like these ones:
$routeProvider.when("/gem/:gemId", {
controller: "ShowGemController",
controllerAs: "showGemCtrl",
templateUrl: "partials/show-gem.html"
});
And i enabled FallbackResource /test/index.html into my .htaccess file.
Question:
Whenever I manually enter the URL I get the right page (e.g. I write http://localhost:8080/test/gem/123 and I get the corresponding page), but how can this happen? Shouldn't I be redirected to index.html since /test/gem/123 is not an existing resource? And how can angular know it should display that particular template?
FallbackResource is, essentially, a short-hand method for rewriting your URIs. As such, there won't be any redirection to index.html, but the URI you request will be mapped to index.html, where Angular can process it.
For more information, refer to the following article:
http://fideloper.com/apache-fallbackresource
I've always preferred to use mod_rewrite to handle this, as it's a lot more fine-grained, and gives you control.

Google App Engine import libraries from parent folder

So my directory structure looks something like this:
\Project-Dir\
|- lib\
| |- flask\
| |- ...
|- module1_dir\
| |- __init__.py
| |- app.yaml
| |- app.py
| |- ...
|- module2_dir\
| |- __init__.py
| |- app.yaml
| |- app.py
| |- ...
|- ...
Inside app.py
sys.path.insert(0, os.path.abspath(os.path.join(os.path.dirname(__file__), '../lib')))
I have two modules inside the same root directory. They are both deployed to App Engine together. They also share the same libraries. The libraries are all pretty beefy so I'm trying to place them in a shared directory (lib).
I'm running dev_appserver.py from \Project-Dir\ and passing the two .yamls. My sys.path is set up fine to include the lib\ directory. And yet the sandbox seems to stubbornly insist that the libraries in lib\ just don't exist.
I'm sure I'm just missing something small like a config change somewhere. Or does App Engine really just flat-out not support such a setup?
EDIT: The imports work fine when I run it outside of dev_appserver.py.
I spoke to a Google support engineer, after facing the same problem. Unfortunately, GAE does not support this kind of setup.
When you use the Modules API, module 1 and module 2 run inside separate Python virtual environments as separate self-contained instances. They cannot 'see' the contents of their parent directory. Modifying sys.path doesn't make a difference.
There are two solutions:
(a) Duplicate your 'lib' folder by placing it inside both 'module1_dir' and 'module2_dir'.
(b) Place the module files directly in the root directory.

How to manage ng-includes in ui-router based project

Here's my issue:
My project is mainly contained in index.html, with ui-router placing the various pages in a <div ui-view></div> section.
In one my other pages, let's call it page1, I have an ng-include to a partial in the same subdirectory. However, when I try to include this partial using
<div ng-include="'page1Partial.html'"</div>
I get a console error that
GET http://localhost/myProj/v3/myproj/app/index/page1Partial.html 404
This is obviously because ui-router moved my page into index.html and it's looking for the ng-include based on that directory.
I really don't want to move the partial to the index folder, as that structurally makes no sense my project. I also, don't want to type out a whole hardcoded path to this same directory (which could potentially change in the future). I want to be able to refer to this partial in a relative, simple and safe way.
What is the best way to efficiently and quickly manage this issue?
I've included what my file structure looks like:
myproj
|-- app
| |-- index
| | |-- index.html
| | |-- index.js
| |-- page1
| | |-- page1.html
| | |-- page1.js
| | |-- page1Partial.html
| |-- page2
|-- common
| |-- resources
| | |-- page1resources.js
| | |-- page2resources.js
If your project is in fact a single-page app (user opens index.html and all other pages are dynamically included using ui-router), you'd save yourself much hassle by simply putting your single point of access (index.html) right in the root folder of your application. All relative paths would then have the root folder as context.
When creating such single-page applications, it is quite common to create index.html automatically during build (see index task in Gruntfile.js in ngBoilerplate).
If you cannot (or don't want to) put your index.html in your root folder, you could just rewrite URLs (in your server) to make it appear to be there. In Apache, you could use mod_rewrite for that:
RewriteEngine on
RewriteRule ^/$ /app/index/index.html [QSA]
(you'd then access your app at http://localhost/myproj/.)

Resources