I've installed TwigView inside my CakePHP application and I'm trying loading the elements header.twig.tpl and footer.twig.tpl inside the default template called default.twig.tpl.
It works fine with this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello world!</title>
</head>
<body>
{% element 'header.twig' %}
{{ test_var_from_controller }} <!-- this works and echoes "Hello world!" as expected -->
{% element 'footer.twig' %}
</body>
</html>
The problem starts when I try to use CakePHP default Helpers, they are simply ignored.
I'm not sure why, if I try:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello world!</title>
{{ html.css('styes.min') }}
</head>
The method is ignored without throw errors and the page still working like it was never called.
I've followed all the TwigView explanation but it still not working, what I'm missing?
I'm also trying using Twig functions and they seems to be not loaded for some reason:
{{ 'FOO'|low }}
Throws the error:
Fatal error: Call to undefined function low() in .../app/Plugin/TwigView/tmp/views/2d/4b/65accc...92.php on line 45
I've found the problem, i needed to load the Helpers inside AppController first
class AppController extends Controller {
public $viewClass = 'TwigView.Twig';
public $ext = '.twig.tpl';
public $helpers = array('Html', 'Form');
}
In CakePHP 3, if you are using the WyriHaximus plugin, you can put this in src/View/AppView.php
namespace App\View;
use WyriHaximus\TwigView\View\TwigView;
/**
* Application View
*/
class AppView extends TwigView
{
/**
* Initialization hook method.
* Use this method to add common initialization code like loading helpers.
* e.g. `$this->loadHelper('Html');`
* #return void
*/
public function initialize()
{
parent::initialize();
$this->loadHelper('Html');
$this->loadHelper('Flash');
$this->loadHelper('Url');
...
}
}
Related
I want make my own socket.io, but I can`t reolve this error. My programm based on
custom events in node.js. There is collector.js:
import EventEmitter from 'events'
const eventEmitter = new EventEmitter()
export default eventEmitter
eventEmitter.on('hi', () => {
console.log('hi, Leahim')
})
this is index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="./collector.js"></script>
</head>
<body>
<h1>Hello</h1>
</body>
<script type="module">
import eventEmitter from './collector.js'
</script>
</html>
The problem is included in tis error:
Uncaught TypeError: Failed to resolve module specifier "events". Relative references must start with either "/", "./", or "../".?
How can I fix that?
Thank you for listening to me.
I am using handlebars template in express and node. But seems like it cannot apply style in my template
here is my directory:
my template
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RYZE Report</title>
<link rel="stylesheet" href="./css/style.css" >
</head>
<body>
<h1>Hello hi</h1>
</body>
</html>
and in my app.js, I have this line
app.use(express.static(__dirname + '/public'))
Thank you
I have looked at the code and I made a couple of improvements to make this work, instead of compiling the document without any inputs, I have made a css input as the following in the template.hbs:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
{{css}}
</style>
<title>Hello, world!</title>
I have also edited the app.js to read the css along with the html and embed the css into it like so: app.js:
const template = fs.readFileSync('template.hbs', 'utf8');
const css = fs.readFileSync('./public/css/style.css', 'utf-8');
const DOC = Handlebars.compile(template);
and used the DOC as following:
DOC({css})
this will inline the css inside of the hbs file, I hope this answers your question
const { createElement} = React
const { render } = ReactDOM
const title = createElement(
'h1',
{id: 'title', className: 'header'},
'Hello World'
)
render(
title,
document.getElementById('react-container')
)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://facebook.com/react-15.1.0.js"></script>
<script src="https://facebook.com/react-dom-15.1.0.js"></script>
<meta charset="UTF-8">
<title>Hello World with React</title>
</head>
<body>
<div id = "react-container"></div>
<script src = "index.js"></script>
</body>
</html>
When I enter in my code, the local host:3000 server will not load. It says that React is undefined. Here is what I'm talking about Do I need to install something? I have node.js installed, and was working with it so I'm a bit confused. Thank you!
P.S - I used fb.me in the original script, but had to change it to facebook.com.
It seems like those *.js links are either broken or invalid.
https://facebook.com/react-15.1.0.js
https://facebook.com/react-dom-15.1.0.js
You can use other CDNs (such as UNPKG or cloudflare) as shown below. (same code as yours except script tags)
You can run the code below
const { createElement} = React
const { render } = ReactDOM
const title = createElement(
'h1',
{id: 'title', className: 'header'},
'Hello World'
)
render(
title,
document.getElementById('react-container')
)
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<meta charset="UTF-8">
<title>Hello World with React</title>
</head>
<body>
<div id = "react-container"></div>
<script src = "index.js"></script>
</body>
</html>
I recently took a course on back-end web developing.
As the title says, I don't get how can I use a header partial for the whole website but have different titles for each page. (because is included in the tag)
Is there any trick?
1st) In your Express route:
app.get("/", function(req, res){
res.locals.title = "Abel's Home Page"; // THIS LINE IS KEY
res.render("home.ejs");
});
2nd) In your views/home.ejs file:
<% include partials/header.ejs %>
3rd) In your views/partials/header.ejs file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= title %></title> <!-- THIS LINE IS KEY -->
<link rel="stylesheet" href="../style.css">
<link rel="shortcut icon" href="../logo_sm.png" type="image/x-icon">
</head>
<body>
Each page that includes the partial is free to pass data to said partial through parameters. See here for an example.
I have two meta tag in _Layout.cshtml master page and now i want to add meta tags in someone.cshtml view page.
and i also try with this code
put in _layout.cshtml master page #RenderSection("metatags",false);
put in someone.cshtml like #section metatags { <meta ... /> }
but not get success.
and also try with add meta tag jquery but not worked fine.
It should work.
Here's my master page _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
#RenderSection("metatags", false)
<title>My ASP.NET Application</title>
</head>
<body>
#RenderBody()
</body>
</html>
Here's the index.cshtml file
#section metatags
{
<meta name="test" content="test"/>
<meta name="test2" content="test"/>
}
<div>Page content</div>
The result
<html>
<head>
<meta charset="utf-8">
<meta name="test" content="test">
<meta name="test2" content="test">
<title>My ASP.NET Application</title>
</head>
<body>
<div>Page content</div>
</body>
</html>
I found a way that works for now.
This solution mostly use when multiple master page.
In the controllers / action assign whatever meta info you need for that view.
ViewBag.Title = "some title";
ViewBag.MetaDescription = "some description";
In the View or master page get whatever meta info you need for that view.
#if(ViewBag.MetaDescription != null)
{
<meta name="description" content="#ViewBag.MetaDescription" />
}
#if(ViewBag.MetaKeywords != null)
{
<meta name="keywords" content="#ViewBag.MetaKeywords" />
}
If are using nested layouts you'll need to follow this guideline:
#RenderSection in nested razor templates
The technique you're using should work, if it is not, maybe that's the reason.
But looking at the intended use in your own answer, if you only need to modify the keywords and description tags there are apis in NopCommrece for that.
In your master layout:
<meta name="description" content="#(Html.NopMetaDescription())" />
<meta name="keywords" content="#(Html.NopMetaKeywords())" />
and in the client cshtml files
#{
Html.AddMetaDescriptionParts(Model.MetaDescription);
Html.AddMetaKeywordParts(Model.MetaKeywords);
}
There are plenty of samples for this in the NopCommerce code.
here is a good sample on how to dynamically creating meta tags in asp.net mvc:
public string HomeMetaTags()
{
var strMetaTag = new StringBuilder();
strMetaTag.AppendFormat(#"<meta content='{0}' name='Keywords'/>","Home Action Keyword");
strMetaTag.AppendFormat(#"<meta content='{0}' name='Descption'/>", "Home Description Keyword");
return strMetaTag.ToString();
}
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
ViewBag.MetaTag = HomeMetaTags();
return View();
}
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
#Html.Raw(ViewBag.MetaTag)
</head>