i have my deafult layout and i whant to make a page
with a layout and inside the layout a component that will be change insdie and chacnge the url to
how i do that with nuxt?
somthing like this pic:
i have my base layout in red
and i have a page layout in blue
now i have a links ander the Dashbord and i want whnan i click on the links the black box inside change only by other component and the url chacnge to
but i didnt the nuxt call again to the blue layout
I had a similar issue and solved by nesting pages using <nuxt-child/>.
GIF: How it works
GitHub: Nuxt.js Nested Routes Example Repository (not official)
Create a parent page like pages/group-foo.vue:
<template>
<div>
<!-- ... -->
<nuxt-child />
</div>
</template>
Then, create a directory with the same name as the parent page: pages/group-foo/.
Also, see these official documents:
Nested Routes
Dynamic Nested Routes
API: The Component
Related
for your understanding i attached w3school screenshot.
enter image description here
if u have ever visited w3school website u will understand my requirement easily.
i want to create these html sidebar dynamic from my admin dashboard. first i will create one sidebar title name then insert content according to title name and so on..... for best understanding you can assume that i want to create w3school clone dynamic from where i can dynamic create sidebar and content. i read about react router dom and many more but not able to create like this.
You can use react-router for navigation and then render according to the route
https://codesandbox.io/s/c2zs4
here is the example I found, it used react-router for navigation and render components according to the route.
add in _app.js file
you can put a header here
<div className="flex">
<div className="W-2/6>
<Sidebar/>
</div>
<div className="w-4/6">
page component here
</div>
</div>
and footer here
I used tailwind CSS
I want to ajax for blocks that without layout
Such as
extends layout
block content
p xxxx
I want to get the content in block
if !layout
include layout
The solution
If you don't want the standard pug layout then create a file that doesn't have extends layout in it:
doctype html
html(lang='en-us')
head
title Page Title
body
div Content goes here
You don't need to do anything in your app.js file to make this happen. You've probably figured out that none of the statements in your question work. This is all controlled in the pug template file.
I have three Pug files in a Node.js/Express application which follows the following layout:
//layout.pug
html
head
title= title
link(rel="stylesheet", href="link")
script(src="links")
// many css and javascript imports
body
header
// header section
block content
footer
// footer section
// more script imports
//index.pug
extends layout
block content
//some content
include slider
//slide.pug
div(class="xxx")
//slider contents
The include keyword actually works here and it renders the slider.pug but the problem I'm facing is that it does not render the slider.pug page as expected. The slider page is rendered in a way that it does not load required styles and javascript files so the result is a messed up html inside a nicely rendered one (index.pug in this case is the nicely rendered one).
I've tried adding the extend layout line to the slider.pug but it also failed.
What is the appropriate way to include a pug file that is meant to rely on the resources included in the layout page such as css and javascript inside another pug file?
I need to make a footer in Liferay and use theme for it. What's the simpliest way to do it?
I have created new theme, filled _diffs folder with other folders, but it's empty and I couldn't find relevant docs about this. Should I copy all basic files there? What should I change to create footer?
In Liferay, theme's portal_normal.vm serves as the template to
construct HTML structure of the page. There you define your header,
body and footer includes.
When you will look at the portal_normal.vm of classic theme, you will observe following HTML snippet:
<footer id="footer" role="contentinfo">
<p class="powered-by">
#language ("powered-by")
Liferay
</p>
</footer>
This is the footer of the page. This is what you need to implement. However, it's not necessary to use footer tag at all, as you can simply use div or table based structure with bootstrap or customized CSS classes for your footer, it's upto your requirement.
Remember! Classic theme is just like a sample provided by Liferay, so, it's not good idea to directly customize it.
Everybody needs a whole customized view of the site, and for this the best idea is to create a custom theme (that's what you are doing!), that will give you full control over your look-n-feel.
To kick-start, you can initially copy required folders from classic theme to your customized theme's (_diffs folder) and start changing bit by bit.
I setup a custom content definition, query and projection inside Orchard (1.8) and just about everything with it works great, including overriding the display view on the projection page's URL. The only issue I'm running into is when I put that same projection in a widget, I can't seem to figure out how to override the view for it. The automatically generated HTML is this:
<p class="text-field"><span class="name">Name:</span> <span class="value">/** Title from content item **/</span></p>
<p>more</p>
<p>asdfasdfasdrerfwerqaq324f421 more</p>
<p class="date-time-field date-time-field-date">
<span class="name">Date:</span>
<span class="value">/** Date from content item **/ </span>
</p>
I've tried using the Shape tracer to create an alternate view, but even when I only have #Display(Model.Content) in the new view, it still puts all of that extra stuff in it which is more than I need to show on this view. The shape tracer says the active template is my new one with only that value in it, so I'm not sure where all the extra HTML is coming from here (though it does show on the HTML tab of the Shape tracer).
How can I override the view for this widget?
If the extra HTML is only appearing when you post the projection as a widget it is probably due to wrapper tags added through code or through the widget wrapper template. Try either of these methods:
Check Widget.Wrapper.cshtml to see if that view template contain the extra HTML. I don't remember if this shape shows up in the shape tracer, it might show up under the wrappers section.
You can also try the trick below - this can remove unwanted markup in some cases, I use it for the menu navigation widget. It removes any wrappers that were added through code. Make your widget template look like this:
#Display(Model.Content)
#{
Model.Metadata.Wrappers.Clear();
}