I would like to define a list of featured category IDs within my homepage template. Is it possible to define a custom variable in the front matter? I can't seem to get it working:
Here is the default front-matter in templates/pages/home.html with my custom variable, featured_categories at the end:
---
products:
new:
limit: {{theme_settings.homepage_new_products_count}}
featured:
limit: {{theme_settings.homepage_featured_products_count}}
top_sellers:
limit: {{theme_settings.homepage_top_products_count}}
carousel: {{theme_settings.homepage_show_carousel}}
blog:
recent_posts:
limit: {{theme_settings.homepage_blog_posts_count}}
featured_categories: 'testing'
---
Then, in the template, this line is not producing any output:
{{featured_categories}}
Why doesn't this output the value testing? Ultimately, I would like featured_categories to be an array of category ID's. Is this possible to do using front matter?
It is not possible to declare a custom front matter variable as those have to be determined in the framework by BigCommerce. You can import handlebars yourself and define a variable, but it would execute client side and not server side for security reasons.
Related
I'm migrating from Jekyll to Eleventy, where previously my blog post links had the permalink in this style: /:title/
What I want: https://example.com/my-blog-post/ for posts/my-blog-post.md
What I get: https://example.com/posts/my-blog-post/ for posts/my-blog-post.md
How can I configure this in Eleventy? The official page on 11ty docs says it takes the name of the folder, which is posts in this case.
I want this /:title/ for all my markdown files. I can't manually set the permalink in all my files. Is there a way to do so for the entire posts collection?
I'm using this repo as the base theme.
So after searching a lot (not the docs), I finally found the solution in this article.
In the last part of that section, use this:
// posts.json (or whatever your collection name is)
{
// ...
"permalink": "/{{ title | slug }}/"
// ...
}
Excerpt:
Using directory data to manage defaults
By default, Eleventy will maintain the structure of your content files when generating your site. In our case, that means /_basic-syntax/lists.md is generated as /_basic-syntax/lists/index.html. Like Jekyll, we can change where files are saved using the permalink property. For example, if we want the URL for this page to be /basic-syntax/lists.html we can add the
following:
---
title: Lists
syntax-id: lists
api: "no"
permalink: /basic-syntax/lists.html
---
Again, this is probably not something we want to manage on a file-by-file basis but again, Eleventy has features that can help: directory data and permalink variables.
For example, to achieve the above for all content stored in the _basic-syntax folder, we can create a JSON file that shares the name of that folder and sits inside it, i.e. _basic-syntax/_basic-syntax.json and set our default values. For permalinks, we can use Liquid templating to construct our desired path:
{
"layout": "syntax",
"tag": "basic-syntax",
"permalink": "basic-syntax/{{ title | slug }}.html"
}
You can set up permalinks per page or per collection. Assume you create a posts folder, then add a posts.11tydata.json file with content to set up basic values for a collection.
{
"eleventyExcludeFromCollections": false,
"layout": "post",
"permalink": "post/{{ title }}/",
"tags": [
"posts"
]
}
In Chat-Demo, there is a syntax where the code (https://donejs.com/Guide.html#switch-between-pages) is split into two blocks: one for <chat-messages/> to load whenever page='chat', and another for <chat-home/> for home.
Those two blocks are very similar.
Imagine if there where not two, but, let's say, ten or more different components to load that way (for example, a big menu of options, each one linking to a different page/component).
Do I need to create as many "if" blocks as the number of options in the menu, or there is another more compact way to do this?
The multiple "if" blocks are an easy way to get up and running with an app quickly. However, it does not work well when your app begins to grow. There is a technique that I have used in apps which works really well. I have uploaded a version of the donejs chat demo with my customizations. I suggest you pull it down before reading further:
https://github.com/DesignByOnyx/donejs-with-route-config
There are 3 commits so you can see the changes between each step of the process. The most important parts are in the 3rd commit:
Generate the DoneJS chat app with no modifications: e0398af4c23207d527c054f1fb1ea65b419119a0
Add the home.component and messages component: 56c2202c117049f67ff7dc52b054ad30cc5b71eb
Add route-config, navigation component, dynamic loading, bundling: 4a924693bfd8a3469d69a6ccb5abe8675724e8a9
Description of Commit #3
The last commit contains all of the magic (and the result of many hours of work from my last project). You should start by looking at the src/route-config.js file, as it contains all of the information about routing and dynamic modules for the app. There are a couple things you should know:
The "modules" object is a simple mapping of url-friendly names to the module which they should load. You can rename these however you want.
NOTE: for each item, a separate bundle will be generated during the build process.
const modules = {
'home': '~/home.component',
'messages': '~/messages/messages',
};
The main export is an array of routes which will be registered for your app:
module.exports = [
{ route: '/', nav: 'Home', data: { moduleId: modules.home } },
{ route: '/chat', nav: 'Chat Messages', data: { moduleId: modules.messages } },
];
For each item in the array, there are 3 properties:
route: the parameterized route - you can include parameters like /user/{userId} for dynamic routing as described in the docs.
data: the default data for the route. Whenever the URL matches the route, the default data will be merged onto the app viewmodel. See the moduleId property on the app viewmodel.
nav (optional): if specified, the value will be used to generate a link in the main navigation component.
I'm newbie in drupal..
Here's the question, Is it possible to create html.twig in every pages?
Ex: aboutus.html.twig, contact.html.twig?
So that I can easily edit or adding content types for them..same as in default page.html.twig.
Looking at my twig debug information in the markup, it sure is possible what you are asking.
You can enable twig suggestions in development.services.yml with this lines:
parameters:
twig.config:
debug: true
While developing, you might also want to add:
cache: false
auto_reload: true
so you don't have to clear cache on every twig modification.
Anyway, after adding this and clearing caches, you will see that you can use something like html--front.html.twig or html--node--article.html.twig or any other combination usable with page.html.twig.
Take a look at this article to get the twig naming convention logic. There are at least three twig template types you have to know about: html.html.twig, page.html.twig and node.html.twig. They are nested.
Let's say your /aboutus page is /node/5
Use node--5.html.twig to alter it's layout.
if you want to overwrite a node your have to create a template.
there are two ways you can do this.
first:
create a node and overwrite it ( node--1.html.twig )
second: create a content-type and overwrite its template (more usefull in my opinion because you dont have a "static" node number.)
example:
name the content-type about-us. now you can write a template node--about-us.html.twig and use the field names u declaired: i.e. content.field_text1
I've seen a few answers on how to pass a parameter using iron:router as the third parameter, for example: href="{{pathFor 'article' _id=this._id }}"
What I would like to do is pass a parameter as the second variable (where 'article' is in the example above).
I have a collection of posts that contain a title, a body, and a type. There are three types of articles in the project I'm working on, and each type needs to be routed to a different template because the formatting is significantly different.
What I would like to be able to do is route to a particular url based on the type. An example that captures my intent but doesn't work would be this:
link
One of the "types" is "inquiry", and the route looks like this:
#route "inquiryPost",
path: "inquiry/:_id"
data: ->
Posts.findOne #params._id
waitOn: ->
[
Meteor.subscribe "posts"
]
I've tried using a helper to pass the value into the pathFor, but that didn't work either:
path: ->
type = #type
"pathFor '#{type}'"
...with this on the front end:
link
I can think of a few work arounds, but it seems to me like there should be an easier way to pass in parameters...
So, is it possible to pass in parameters into the second value of a pathFor?
Try with
<template name="example">
link
</template>
Where type is the helper
Template.example.examples({
type:function(){
return type;
}
})
Also you can try with this for example
link with many parameters
Here you where accessing for example to the route
/myRoute/type/rewr8671qew for example
I'm trying to change the order of a particular archive (custom type/taxonomy) to order by title rather that chronological. I've looked in archive.php and loop.php. How do i pass parameters to the default loop?
Try using the posts_orderby_request filter. You can check to see if the request is for your custom type, then return a different ORDER BY string. Look in wp-includes/query.php on line 2583.