I'm looking to add the homepage slider to a different page. So what I did was create a page called 'Homepage', set it as the homepage, and call a custom snippet so that I can use the {{{page.content}}} from that page on the homepage.
Problem is, when doing that, the carousel does not work when calling this:
{{#if carousel.slides.length}}
{{> components/carousel}}
{{/if}}
It seems that it doesn't see the carousel.slides.length.
Any ideas? Thanks!
After some more research, I figured it out.
You can use YAML / Front Matter
https://stencil.bigcommerce.com/docs/using-yaml-front-matter#syntax
in my page.html file, I added this to the top:
{{# if page.title "==" 'Homepage'}}
---
carousel: true
products:
featured:
limit: {{theme_settings.homepage-show-featured-products}}
new:
limit: {{theme_settings.homepage-show-new-products}}
---
{{/if}}
What that achieves is when the Homepage page loads, it puts that at the top which adds carousel functionality.
Related
I want to create a landing page for a documentation and I dont any layout option. How can I create a landing that points to a Vue component directly?
---
layout: none
---
<Landing />
<script setup>
import Landing from "./components/Landing.vue"
</script>
I want one page to be empty. Just my component.
As it turns out there is no way to implement a page without layout page, home or doc in vitepress. More info.
I want to go to my search page in nuxt myApp.com/search?parameter=1 from my main page. In the main page I can go to search page in two ways, by using a nuxt-link:
<NuxtLink
:to="`/search?parameter=${number}`"
>
</NuxtLink>
Or I can go with a method:
goToSearch() {
this.$router.push(`/search?parameter=${this.number}`);
},
When I use the nuxt-link and land on search page the url is correct with parameter: myApp.com/search?parameter=1
But when I use my method which is conencted to a button in the page and I land on search page the url becomes myApp.com/search which is problematic for me!
Please note I have two have both the method and the nuxt-link. How can I fix it so when I use the method and go to search page I keep the parameters?
You should use this, as mentioned in the documentation
<nuxt-link :to="{ path: 'search-page', query: { search: number } }">
Try search page
</nuxt-link>
You can also use it this way, depending on what you're trying to achieve.
<button #click="$router.push({ path: 'search-page', query: { search: number } })">
Try some other way
</button>
A correct /pages/search-page.vue page can be found here.
In my nuxt.config.js I added loading: '~/components/LoadingBar.vue'.
After deploying the site my custom page transition works, but only when the first page visited is different from the home page.
For example, if you visit this link and navigate from there to /About, or /Portfolio, you'll see my custom transition (blur effect + loading circle).
Now, click on the logo (my name, above the "Home" menu item): my custom page transition inexplicably resets to default Nuxt page transition, with the white loading bar at the very top of the page.
Not sure if that's a known bug with Nuxt.js, I can't think of anything in my code that could cause something like that. How do I fix it?
The page reloads once you click on the logo,
it seems you are using a simple <a> link instead of <nuxt-link>.
Set a name like this for your home route in router.js
{
name: 'home',
path: '/',
component: Index
}
then <nuxt-link :to="{ name: 'home' }">logo</nuxt-link>
I'm trying to use my own Custome Layout of the vuepress as following steps:
Start from Homepage style in the VuePress Document, this is working well.
Make the T4V4Home.vue for special layout as coping from Home.vue on the theme/components folder which is ejected, and add a <h1> This is T4V4Home !</h1> in these <template> for an indication as follows.
<template>
<main
class="home"
aria-labelledby="main-title"
>
<h1> This is T4V4Home !</h1>
<header class="hero">
Add layout: T4V4Home as follow as the step of Custom Layout for Specific Pages in the VuePress Document, in the Readme.md, but <h1> This is T4V4Home !</h1> doesn't appear, seems old "Home.vue" is still used.
---
layout: T4V4Home
home: true
#heroImage: /ueda4googleplaystore.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:
So, remove home: true as follows, but the standard Page layout is used unexpectedly as follows.
---
layout: T4V4Home
#home: true
#heroImage: /ueda4googleplaystore.png
heroText: Hero Title
tagline: Hero subtitle
actionText: Get Started →
actionLink: /guide/
features:
How can I activate and use my Custom Layout T4V4Home? Thank you for your suggestions!
Where are you putting your Custom Layout component?
The Custom Layout is working fine for me with VuePress 1.3.0.
Create a SpecialLayout.vue files at .vuepress/components/SpecialLayout.vue, and copy everything in the Home.vue into it. And then add a line <h1>This is a test</h1> into it.
Change the Frontmatter in the README.md accordingly.
---
layout: SpecialLayout
heroImage: https://vuepress.vuejs.org/hero.png
heroText: test
tagline:
actionText: Quick Start →
actionLink: /guide/
features:
- title: Feature 1 Title
details: Feature 1 Description
- title: Feature 2 Title
details: Feature 2 Description
- title: Feature 3 Title
details: Feature 3 Description
footer: Made by with ❤️
---
And I successfully get the new HomePage
However, I'm not sure this is exactly what you are looking for, because as you can see in the screenshot above, you'll lose the NavBar at the top of the page because of Custom Layout.
If you want to preserve the NavBar, I suggest you try out Theme Inheritance.
Put your customized homepage component at .vuepress/theme/components/Home.vue. Yes, it needs to be named as Home.vue to replace the one in the default theme.
Create a index.js file at .vuepress/theme/index.js with content
module.exports = {
extend: '#vuepress/theme-default'
}
And don't forget to change the README.md back to normal.
Hi Any idea how I can load dojo-laced html file dynamically into contentpanes?
I am able to load non-dojo html into content pane using href.
When I loaded dojo-laced html file, I can see text in html tags but not text in dojo scripts. Where did I go wrong?
The scripts I put here are:-
widget.set('href','dojotext.html')
Another problem in jsfiddle is that pressing button 1 will not update, unlike in my environment.
and funny thing is that border container and comtent panes are not displayed, unlike in my environment too.
Here are my links in jsfiddle
- main page for testing loading
- dojo content to be loaded
Please advise. Thanks
Clement
First of all, your ContentPanes and BorderContainer are not being displayed because you're not parsing them.
In your code, you can run parser manually:
ready(function () {
parser.parse();
// ...
});
Regarding your first question, it seems that you didn't read the documentation:
<div id="foo" data-dojo-type="dijit/layout/ContentPane" href="/some/page.html">
<script type="dojo/method">
alert ('Hello World!');
</script>
</div>
Code from: ContentPane documentation