In a Meteor app, I have the structure:
<main template>
<side menu></side menu>
<delegate to different content template/>
</main template>
In the side menu I put helper functions to change words/icons/etc based on routes. (clicking links in the different templates changes the current route)
How do I force those helpers to run on route change? It seems like I cannot...
Related
In Next Js project I have a blog page. This loads at mywebsite.com/blog. I then have pagination in place which when navigating and want to use mywebsite.com/blog/page/2 etc for SEO reasons.
Current structure:
pages/
--- blog/index.js
--- blog/page/[page].js
Can I use / inherit index.js to use in [page].js rather than having the same file essentially twice? I need to getServerProps in both pages of course.
Or is there a recommended setup in how to achieve this>
If you need to use getServerSideProps method this is the only way to use in a next js project but If you don't need to use it on every single blog/[page].js
component , you can use queries with useEffect hook to update data with pagination on the page .
Note
If you use queries with useEffect hook to fetch data when paginating the getServerSideProps method will only run once in initial page load .
I need to create a new export action for the page app in magnolia cms that would always export selected page elements to a YAML file.
I would like to override the class definition and the dialog definition for the existing export action since I do not need a dialog that lets me select YAML or XML. It will always be YAML in my case.
I setup a new Maven module and created a new action for the Page app.
How do I configure a custom class for this action? How do I get the current context of the page in my class?
You have to remove the dialog attached to the action first. If you plan to have a custom action then simply do not configure one. We already have two actions for those two cases. If you are interested in YAML export use the following: info.magnolia.ui.framework.action.ExportYamlAction
My action configuration for exportYAML2
My actionbar configuration for exportYAML
* repeating the content of the comment below since I could not post pictures in the comment *
I configured two actions for exporting the YAML configuration of the node.
The second one (exportYAML2) using ExportYamlActionDefinition does not show up in the actionbar for the page even though I added it as an item.
Is there anything else I need to configure for it?
exportYaml with class info.magnolia.ui.framework.action.OpenExportDialogActionDefinition works. exportYaml2 with class info.magnolia.ui.framework.action.ExportYamlActionDefinition doesn't work. Availability for it is set to info.magnolia.ui.framework.availability.IsNotDeletedRule.
It is solved.
There are two things I needed to configure for a custom action in the pages app in magnolia.
configuration app modules>pages>apps>pages>subApps>browser>actions>MyAction withe class={custom or common class from https://documentation.magnolia-cms.com/display/DOCS61/Action+definition }
modules>pages>apps>pages>subApps>browser>actionbar>sections>pageActions>groups>uniquegroupname>items-MyAction
Using the Ghost blog routes.yaml file it is possible to use the collections block to create a custom collection made from some tag(s) and / or other data. You can also tell this collection to use a custom theme template see:
https://docs.ghost.org/tutorials/creating-content-collections/
https://docs.ghost.org/concepts/routing/#content-structure
For instance:
collections:
/example/:
permalink: /example/{slug}/
controller: channel
filter: tag:example-tag
template:
- example
All of the above works and my collection properly uses my new example theme file.
The issue is that unlike the tag page (for example-tag) my new custom collection does not have a readily documented way to work with the title etc.
It does not pull the title / meta description from the tag used to build the collection (which would be great for collections built from single tags). In an attempt to work around that I tried some {{#has}} statements but I can't figure out what context the custom route would fit into.
With the above example routes.yaml the title for the custom collection ends up as 'My Site Name (Page 1)' — and there is no Meta Description.
This issue also extends into the Open Graph data which lists an identical title as well as no description for the custom collection.
My guess is that it may be possible to use a data property attached to the routes.yaml file to achieve this (see: https://docs.ghost.org/concepts/routing/#data) but I haven't found a solution as of now.
While my initial attempts at googling for a solution came up empty, this is the best reference I have seen to the issue:
https://forum.ghost.org/t/dynamic-routing-page-post-data-context-in-default-hbs-nested-navigation-on-custom-collections/4204
https://github.com/TryGhost/Ghost/issues/10082
I found a way to work around.
You create a page called example in the Ghost Admin tool.
Customize routes (instead of collections) in the routes.yaml as following:
routes:
/example/:
controller: channel
filter: tag:example-tag
template: example
data: page.example
The page.example will use the metadata of this page in the Ghost.
This is possible only with workaround described in issue: https://github.com/TryGhost/Ghost/issues/10082
Generally do following:
create page Example (with slug example) and fill metadata title & description you want
in routes.yaml alter your collection definition /example/ add following:data: page.example to link your collection root with specified page
now in your template definition example.hbs you could use e.g. {{#page}} {{content}} {{/page}} tag to insert content from your page. You can do it also in default.hbs template which is included from your example.hbs. So replace: <title>{{meta_title}}</title> in default.hbs with following:
{{#unless page}}
<title>{{meta_title}}</title>
{{else}}
{{#page}}
<title>{{meta_title}}</title>
<meta name="description" content="{{meta_description}}"/>
{{/page}}
{{/unless}}
This will set specific title/description for your collection root pages in general way. It is possible to generate schema.org metadata in the similar way. Unfortunately Facebook and Twitter metadata is not so simple to do because, {{ghost_head}} tag in default.hbs already inserts site metadata to this page. Last note: besides {{meta_title}} and {{meta_description}} I suppose you could use all metadata fields defined here.
In default.hbs I added the following block:
{{{ block "metaTitle"}}}
and eg. in post.hbs I filled that block as follows:
{{!< default}}
<div class="content-area">
<main class="site-main">
{{#post}}
{{#contentFor "metaTitle"}}
<title>{{title}}</title>
{{/contentFor}}
...
For other pages like page.hbs, blog.hbs, author.hbs I did the same. I think that solution is more flexible because we have more control over title value.
I'm currently in the process of updating a website so that it supports Wordpress Blocks (5.0+) via Advanced Custom Fields. I have a block which needs some JS and was wondering if there is a way to implement a JS callback either via acf_register_block() or register_block_type() so that a JS function is called when the block is added to a page in the CMS?
For anyone else looking, the easiest way so far would be to call the existing JS function for your block from within the block render template itself, however it should only call the function if the admin page is showing (so that it doesn't show inline scripts on the front end).
eg.
function slider_block_html(){
//html output here
if(is_admin()){
echo "<script>sliderInit();</script>";
};
}
I'm currently migrating my HTML website into a WordPress theme.
My current HTML website makes full use of jQuery's .load() function, by where I change the content of the page (via a DIV), using .load() based on my side menu options selected by the user.
For example:
HTML Code:
<div id="sidebar">
<ul id="themenu" class="sf-menu sf-vertical">
<li>Home</li>
<li>About Us</li>
</ul>
</div>
jQuery Code:
$("#themenu li a, #subcat li a").click(function(){
var toLoadCF = $(this).attr("href")+" #contentfooter";
$('#contentfooter').fadeIn("slow",loadContent);
function loadContent() {
$("#contentfooter").load(toLoadCF);
}
return false;
});
So using this as an HTML situation, the user clicks on the "About Us" menu option, which would basically in turn load the "about-us.html" file based on a href tag for About Us.
Now in the WordPress world, I have created a custom page template for About Us called "about-us.php" that is linked to a WP Admin dashboard page called "aboutus" (permalink), so my a href value is "url/aboutus/"
Based on this, how can I achieve the same result in WordPress to emulate my HTML coding using jQuery .load?
Please be aware that I have added all the necessary info in my header.php, index.php and sidebar.php files.
I'm just unsure how to reference the a href file, so that my about-us.php file is loaded using jQuery's .load().
I'm not too sure how to approach this from a WordPress perspective.
First off I'd go about making the site fully functional WITHOUT the javascript loading. This'll get your navigation and site layout proper before you get fancy and will also provide a fallback for crawlers and for when your JS breaks.
Next, make a subset of templates, or modify your existing templates, to react to a GET var in the URL to exclude everything but the main content area of the template. For the Ajax load you won't need things like the header, foot and sidebar.
Then I'd use jQuery to grab navigation links click events, modify the request URI to put a GET var in, and then make the request using .load().
A side benefit of this is when you turn on caching (yes, you want to run your site with caching, its wordpress, its far from "light") your Ajax requested pages will also be cached for tighter load times and less resource usage.
I assume since you've done it before that you know how to handle the jQuery action binding, request and response parsing.