I have some trouble. I have a first page in Meteor
.
and my second page and it in same folder with my first page
.
My first page html:
<body>
<div class="container">
<header>
<h1>Todo List</h1>
</header>
{{> test}}
</div>
</body>
<template name="chuong">
<ul>
{{#each chuongs}}
<li>{{Chuong_ID}}, {{Truyen_ID}}</li>
{{/each}}
</ul>
</template>
My firts page in javascript:
import { Template } from 'meteor/templating';
import { Chuong } from '../api/chuong.js';
import './doctruyen.html';
Template.chuong.helpers ({
chuongs() {
return Chuong.find({});
},
});
My second Page in html:
<body>
<h1>MY SECOND PAGE</h1>
</body>
in first page, when I click items will show the second page....
Thanks for help!
It's best to use a router to have multiple, linked pages in Meteor. While there are a few you could use, my preference (and a common standard) is iron:router.
There are pretty good examples on the above-linked page and in the Iron Router Guide, but here are some entry-level concepts to get your mind around things:
You don't need to put <body> tags everywhere. Any <body> tag in an HTML file will be inserted into all rendered pages by default. The same is true of <head> tags.
Each "Page" needs a template (as you've successfully defined with Template#chuong). I like to put my templates all in their own HTML files, but you can put templates anywhere inside your "client" directory. You can also add common layouts which you'll read about in the Iron Router documentation.
Each "Page" also needs a "Route", which can be defined in a javascript file anywhere in your project, excluding server-only directories (like the "server" and "private" folders, for example.
Once the above is handled, you should be able to link between pages the same way you usually would, using standard anchor tags (href="/routename").
Related
I am using a WordPress theme named "Delaware" which utilizes WP Bakery as its page builder.
The issue with it is that some of their custom elements in WP Bakery don't offer the option to change the heading tag.
Is there any way I can change it by editing the core files or theme editor?
Here's what the inspect element shows:
<div class ="box-title"><h2>Chloe Smith</h2><div class="border"></div>
Or how can I locate the file from where it is coming so that I can edit it?
Domain name: aidenfinserv.com
It is not easy to locate your file unless you give access to a developer. You probably need to make use of add_filter for one of the hooks using this code: https://kb.wpbakery.com/docs/filters/wpb_widget_title/ which goes into your functions.php
I also have a vanilla JavaScript solution for you at the moment which I have tried. You can paste the JavaScript part in your Theme options custom JS or script.js file.
const boxTitlesh2 = document.querySelectorAll(".box-title h2");
document.addEventListener("DOMContentLoaded", () => {
boxTitlesh2.forEach((boxTitleh2) => {
const boxTitleh3 = document.createElement("div"); // Replace with your custom element
boxTitleh3.innerText = boxTitleh2.innerText; // You can replace it with your custom text.
boxTitleh3.setAttribute("class","custom-heading"); // Better for styling purposes
boxTitleh2.insertAdjacentElement('beforebegin', boxTitleh3);
boxTitleh2.remove();
});
});
<div class="box-testi" style="">
<div class="box-title">
<h2>Prisha Matondkar</h2>
<div class="border"></div>
<p class="sub-title">Sydney, Australia</p><span class="dl-icon-quote svg-icon"></span></div>
<p>Highest Quality Accounting Services, They'll Assign Dedicated Accountants to you unlike some other companies. And The Accountants were always cheerful to Listen to my queries. Will Prefer Aiden Finserv instead of hiring our own accounts team</p>
</div>
<div class="box-testi" style="">
<div class="box-title">
<h2>Chloe Smith</h2>
<div class="border"></div>
<p class="sub-title">Chicago, USA</p><span class="dl-icon-quote svg-icon"></span></div>
<p>Aiden Finserv Client Dashboard for accounting services is one of the most unique things among any Accountant Firm. I can manage everything and its easier to have everything stacked up in one place. I have worked with 8+ Accountant firms and has never
seen anything like this.</p>
</div>
Live output:
My meteor application has the following basic layout:
<template name="layout">
{{> header}}
{{> yield}}
{{> footer}}
</template>
My header template contains a full-width header:
<template name="header">
<div>
<!--implementation of full-width header-->
<h1>{{pageTitle}}</h1>
<!--insert custom html here, e.g. search input or options (see screenshot)-->
</div>
</template>
Then, I have multiple yield templates, that's where the main content goes.
For each of my yield templates, I want to be able to load custom content "into" my header template:
set the pageTitle attribute, so I have a custom title on every routed page
insert some html content, e.g. to do show some extended options (in this example it's about filtering the result of the query, but basically it's html content)
What's the best way to do this?
For a better understanding I include a screenshot of how the page looks like:
EDIT
I came up with the following. I add another base template to the layout, let's call it headerYield:
<template name="layout">
{{> header}}
{{> headerYield}}
{{> yield}}
{{> footer}}
</template>
All the custom markup would go there, with the disadvantage, that I need 2 custom templates for each view.
This question isn't clear. Is the question how can I include a header template? If so then this would be the answer...
<template name="header">
<div> <!-- abosolute position full div --> </div>
<!-- markup here brah -->
</template>
Now if the question is how can I include a page title? If so then this would be the answer...
Router.route('/user', {
onAfterAction: function() {
document.title = 'page title';
}
});
This assumes you have the iron router package installed. Iron router just controls what template gets rendered when looking at particular pages. For example the route "/user" could be sent to any template that you choose. If you want information on how to install iron Router or what it can do you can see their documentation. It's necessary for meteor applications:
iron router
Update:
After looking at your profile your other questions include iron router so you have used it before. So now I am really confused as to what your question is.
I'm still learning the ins and outs of Meteor. I'm using iron router and am routing pages successfully. The layout page where my routes go looks basically like this. They're loading under a header and title with some buttons in it:
<template name="layout">
<div class="container">
... // some buttons here
... // more buttons
</div>
<h3>Header Title</h3>
<div class container>
{{> yield}}
</div>
</template>
I've got the layout template as my default:
Router.configure({
layoutTemplate: 'layout'
});
As you can see my routes are loading in the layout template but there's one page I'd like to route to a completely blank template, but right now the it's inside the layout template. Can I have a routes go to different {{> yield}} tags in some way?
You're looking for Route Controllers:
http://iron-meteor.github.io/iron-router/#creating-route-controllers
This will allow you to specify a layoutTemplate on a particular group of routes, rather than globally. You can then create different groups for different sets of routes requiring different layout templates (and other things, too).
I am new to Meteor. I have a website that I want to convert into meteor. Do I have to set up a router, and change all of the links? Or can I use the existing href links that navigate between the html pages? Will images be a problem? Will the css and javascript in each of the page headers work?
If you have Routes you should define it using the meteor package iron:router, here is common tutorial
so if you have something like myUrl/about.
you should do something in meteor like this.
Router.route('about',function(){
this.render('about') //and you should have a <template name="about></template>
})
About images, you should put images under the /public directory, check more on the official meteor docs structuringmyapp.
If you web use jquery plugins you should use a onRendered function
Template.example.rendered(function(){
//initialize jquery plugins
})
All this because like you say on the question, you have Routes, if you don't have routes.
If you want to test it on a live editor you can use Meteorpad.
I recommend you to read the discoverMeteor book or install the 2 example from meteor, also the Meteor tutorials Begginers its a good option here
Add iron:router to route your website.
// Router Example
Router.configure({
layoutTemplate: 'Layout' //Layout is a template for your website
});
Router.map(function() {
this.route('index', {path: '/'}); // Index is an another template
});
Layout template should have {{> yield}} tag
<template name="Layout">
// Include header in separate template
{{> yield}}
// Include footed in separate template
</template>
<template name="index">
<!-- Page content -->
</template>
to execute JQuery ready function by
Template.Layout.onRendered({
//JQuery content HERE
});
Hope this will enough for simple website
I have a template in Laravel that uses Blade. I would like to share that template with WordPress. Is it possible? I want to do it because I have a lot of if/then logic in the templates and I don't want to maintain two versions of the template if I don't have to.
Here is a overly simplified example:
site.blade.php
<!doctype html>
<html>
<body>
#include('layouts.site.header')
#yield('content')
</body>
</html>
site.header.blade.php
<header>
<img src="{{$imageUrl}}">
</header>
Any way to use the site.blade.php template in WordPress? Or if not, is there a way to get the HTML output from site.header.blade.php into WordPress efficiently?