On the Foundation site I am working on, there is a dropdown topbar in a navigation partial that populates its links from several YML files in src/data (one per dropdown category). Each entry looks something like this:
link:
text: "Example Link"
url: "beta/page2.html"
external: false
The piece of the partial that generates each menu entry is as follows:
{{#each category}}
<li><a href="{{#unless external}}{{root}}{{/unless}}{{url}}" {{#if external}}target="_blank"{{/if}}>{{text}}</a></li>
{{/each}}
The goal is for the link to be relative to the site's root if external is false, and used as-is (and open a new tab) if external is true.
The problem is that internal links don't seem to generate properly when the page I am navigating from is in a subdirectory. For example, if I am on example.com/alpha/page1.html, the menu link above points to example.com/alpha/beta/page2.html instead of example.com/beta/page2.html.
How can I change my code to properly generate the links for the pages?
I figured out the issue. Inside the {{#each}} block, the Handlebars context changes, making variables like {{root}} only accessible through the parent context. The issue can be fixed by replacing {{root}} with {{../root}}.
From the Handlebars documentation:
The exact value that ../ will resolve to varies based on the helper that is calling the block. Using ../ is only necessary when context changes, so children of helpers such as each would require the use of ../ while children of helpers such as if do not.
Related
I've been having issues with this but I think is simple.
asp.net core 2.0 Razor Pages
I have a Users/index page and I added a link to take me to the child records under Entries Folder.
Structure is like
Pages
/Users
/Entries
Under /Pages/Users/index.cshtml
<a asp-page="./Edit" asp-route-id="#item.Id">Edit</a> |
<a asp-page="./Details" asp-route-id="#item.Id">Details</a>|
<a asp-page="~/Pages/Entries/" asp-route-id="#item.Id">Enter Child Records</a>
However, on the browser, looks like is not rendering the correct link. It staying under the default page.
I tried asp-page="../Entries/" and other combinations with no luck.
Can't believe this but this works.
<a asp-page="../Entries/Index" asp-route-id="#item.Id">test</a>
I think your own answer might add confusions to others. First of all, you're talking about LINKs to another page, not redirect to another page. Razor Pages have a designated function for page redirections.
About the asp-page tag helper, it's interpreted by the code-behind engine (e.g. C# syntax) and so the "~" doesn't work. Basically, asp-page is expecting a name. In your own examples:
<a asp-page="./Edit" asp-route-id="#item.Id">Edit</a> |
<a asp-page="./Details" asp-route-id="#item.Id">Details</a>|
will work, but they should be shortened as:
<a asp-page="Edit" ...>Edit</a> |
<a asp-page="Details" ...>Details</a>|
because they are in the same folder as your /Users/Index page. As you know the "./" part just means going up one level to your parent folder and so it's redundant. You don't want to instruct your engine to go up one level and then come down again to the same folder immediately.
When you need to switch to another containing folder, going up two levels and specify the new folder name. So, the "../NewFolder" works.
If it is at the web site root level, you can use the root syntax directly for faster routing. So both of these work the same if AnotherFolder is under root:
<a asp-page="../AnotherFolder/Index" ...>test</a>
<a asp-page="/AnotherFolder/Index" ...>test</a>
The asp-page tag helper is expecting a real page name at the last part and hence the quoted text must be ended with a page name. You cannot use asp-page="/Entries/" as in HTML URLs and expect the engine to default to Index page for you.
Lastly, to cover redirecting pages, code-behind has a function called return RedirectToPage(string pageName, ...), and its first parameter uses the same page routing syntax as the asp-page tag helper described above.
There is also a Redirect() function that works with pages outside your Razor Pages system, which can take any URLs as your browser or HTML code do. That's another story.
I'm having the following problem in my application.
When access a view, specifying only the controller, the entire layout of the master page is rendered correctly:
Eg:
localhost:50904/Contact
But when I specify the action, the layout of the master page is not rendered:
Eg:
localhost:50904/Contact/Index
localhost:50904/Contact/Success
I checked the HTML generated in both cases, and the generated HTML is correct. What can I be doing wrong?
Possibly you have references to .css files and those references are relative. Change the references to the .css files to start with / to make them rooted to the root of the site.
Press F12 and look for any errors in the console or network tabs.
You my find that the css or js files are not loading, check the paths if you see any errors.
This is the problem:
I have a menu link which I want to resolve to domain/course/2
This menu link is on a menu bar. The menu bar is visible on all pages of the web site including /home and /course/1
If I code the menu link like this:
href="/course/2"
then that works fine for navigation. However if I am on /domain/app_dev.php/course/1 then that style of doing the links loses the app_dev and I jump into production i.e. I go to domain/course/2 not /domain/app_dev.php/course/2. Not what I want.
However if I code the menu link like this:
href="course/2"
Then that does not break app_dev. However the navigation breaks. Because it is a relative path if I am in /course/1 when I click on that link I end up in /course/course/2 which of course (no pun intended) doesn't exist.
I can see how I can fix this by making my nav bar know what page (directory) it is being loaded on and set the links dynamically. But this feels a bit "hacky".
This must be a v. common problem with Symfony. How is it best solved?
Looks like you are generating links in "hardcode" style, instead of
href="/course/2"
you should use "path" function, so if you have the route name "closure" for your controller action, then you should use
href="{{ path('closure', {id: 2})}}"
Where "id" is expected action parameter. And I suppose you use Twig as template engine
Typo3 provides option to add multiple images to a page content, but all the images are wrapped under some default <div> tags. I want these images to be wrapped under <ul> and <li> tags instead and giving my own custom CSS ids and classes to it.
There are not many resources on TYPO3 for me to approach this issue. Can TYPO3 allow to use custom tags for the page content elements?
UPDATE
From Jost's answer was able to get my images displayed, but how do I split the image details?
My each image will have title, alt-text, image-path and image-link. Now, using TypoScript how do I retrieve this, because each details has to go in separate tags.
Check the TypoScript object browser. There you will find the object tt_content, which contains the rendering definitions for content elements. The rendering definition for images is found at tt_content.image.20, for example
tt_content.image.20.imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
The default definitions given there are usually provided by the static TypoScript of CSS-styled-content. You can overwrite them in your own TS, but when updating to a newer TYPO3-version, the default template may change, which could result in additional wrappers.
Update
Most content rendering in TYPO3 is defined in the TypoScript object tt_content. You can browse all TS-objects that will be used on a page by selecting the "Template" module and the page in question, and then choose "TypoScript Object Browser" in the selectbox at the top of the window. To understand what that stuff means, knowledge of TypoScript is necessary (Tutorial, Reference).
You can add your own TypoScript, which may override existing settings. You can do that in the Template-module too, but usually this is done by creating a file containing the script somewhere in the fileadmin folder and including it from the Template module.
The above enables you to edit the markup of the page. (Additional) CSS is usually defined in external files, that are included by a PAGE object (see the reference about that).
This post is a bit older but I want to add the following:
If you want to understand how the different content elements are wrapped, you may have a look into the css_styled_content extension. I assume that you have included the "Static Template (from extension)" in your main Typoscript template.
You can find the setup.txt here:
typo3/sysext/css_styled_content/static/setup.txt
There you´ll find the line Jost mentioned in line 860 (TYPO3 version 6.1), for example. And of course a lot of other definitions, too.
But check to read the documentation and tutorials on typo3.org.
HTH
merzilla
Starter Info: Working with Plone 4.0.7 on CentOS 5.5 with Python 2.6.6.
I've got a folder that contains a few pages and I want to have a navigation portlet on all of the child pages but not the parent folder. My first thought of how to do this was to add the navigation portlet to the parent folder, pointing to itself, and setting the start level to 1. This works for not showing the portlet on the parent, but none of the child Pages are showing the portlet. I assume this is because the Pages aren't a folderish content type so the start level doesn't apply to them. Does anyone know where I would start to look to create a work around for this?
Thanks
I can confirm the issue.
The problem seems to be, that pages/documents are not recognized as subsections but as an item of the containing folder.
You can counterproof that, if you add folders to your folder, with them the navigation will work as you expect.
As a workaround you could use CSS to hide the navi on the folder with sth like:
.portaltype-folder .portletNavigation { display: none; }
Actually your method is the right method:
add the navigation portlet in the parent folder
set the initial level to 1. If child pages don't diplay the portlet check if they block the parent portlet acquisition.
go to every child folder and block the portlet acquisition. If the number of child folder is hight, you can programmatically block the acquisition