I have 2 HTML files, suppose one.html and two.html. In one.html I want to include two.html.
In JSF I can do it like that:
It means that inside one.xhtml file, I can include two.xhtml.
How can we do it in *.html file? in thymeleaf
you can do it easily. could you share your header.html file?
or, let me show a bit like I do for my projects
in header.html put in side the <body> a code:
<div th:fragment="client_header">
<p>This is for client</p>
</div>
<div th:fragment="admin_header">
<p>This is for admin</p>
</div>
and let's say you want to add client_header into the index.html. Do follow these in your index.html page (inside <body>)
<div th:replace="includes/header :: client_header">
</div>
note: includes/header before :: refers the html path (excludes .html) and client_header after :: refers the part in header.html you want to insert.
I hope you understand everything that I have explain here.
In one.html you can include two.html by following this steps:
Place both pages under the resources folder, something like /resources/one.html, /resources/two.html
Include two.html in one.html by adding this line in one.html:
<div th:insert="two :: two"></div>
Include this bit of code in two.html just after the <body> tag:
<div th:fragment="two">
This should include the bit of code surrended by the <div th:fragment="two">into one.html
More info in the thymeleaf documentation
Related
Going through the docs, it seems like Sapper's template.html only has these tags available:
%sapper.base%
%sapper.styles%
%sapper.head%
%sapper.html%
%sapper.scripts
What I'd love to have is the current page's slug to use it like so:
<!-- bottom of template.html -->
<img src="https://piratepx.com/page={currentPageSlug}"
alt="" style="display:none;"/>
</body>
</html>
It doesn't need to be available to JS, just added in the HTML.
I'm exporting to static and this would be a trivial task with most Static Site Generators but I can't find the obvious solution with Sapper.
Considering you are using Sapper I would do this in _layout.svelte instead:
<script>
import { stores } from '#sapper/app';
const { page } = stores();
$: currentPageslug = $page.params.slug
</script>
<img src="https://piratepx.com/page={currentPageSlug}" alt=""/>
With this technique you can also add a default value, or some condition in case there is no slug.
I am currently adding globalization to an existing web app which uses devextreme to present the page, as below:
<body>
<div id="viewport" class="dx-viewport">
<div class="startPage dx-content-background" data-options="dxContent : { targetPlaceholder: 'content' } ">
<div class="content">
<h1>Registration</h1>
<div class="regForm" id="registrationForm" />
<div class="regButton" id="registrationButton" />
<div class="loadIndicator" id="loadIndicator" />
<div class="registrationSucceeded" id="registrationSucceeded" />
<div class="returnToMainPageButton" id="returnToMainPageButton"/>
</div>
</div>
</div>
The entries are translated as expected but I can't figure out how to translate the heading as DevExtreme doesn't provide a straight 'Text' widget. If I set it to use a TextArea, for example then it does work but then obviously doesn't look like a header.
So, how can I translate the header text (or any other that is held in the HTML page)?
Maybe the official DevExtreme localization topic will be usefull for you.
So, how can I translate the header text (or any other that is held in the HTML page)?
You can use a text binding to provide content based on current locale.
I'm trying to allow content editors to be able to choose the main banner image on a page by having it chosen through a Media Picker property.
I've tried the standard inline XSLT of:
<umbraco:Item runat="server" field="banner" xslt="concat('<img src="', umbraco.library:GetMedia({0},0)/umbracoFile, '" />')" xsltDisableEscaping="true" />
But in my simple template of:
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<header class="home-header">
<div class="logo-wrapper">
<umbraco:Item runat="server" field="banner" xslt="concat('<img src="', umbraco.library:GetMedia({0},0)/umbracoFile, '" />')" xsltDisableEscaping="true" />
</div>
</header>
</asp:Content>
The rendered HTML comes out at:
<header class="home-header">
<div class="logo-wrapper">
</div>
</header>
I've read about using a macro to render images but my Umbraco knowledge is limited. If someone could provide steps for actually adding an XSLT macro, I'd be happy to try that out.
Unfortunately we are stuck on Umbraco v4.9 for now too so no <umbraco:Image /> tag for me.
I suggest you use a c# Umbraco macro instead of xslt. Umbraco 4.9 can do that.
An macro can in a differt file or simple use a inline macro:
<umbraco:Macro runat="server" language="cshtml">
#if (#Model.visual != "")
{
<img src="#Model.Media("banner", "umbracoFile")" class="foto" />
}
</umbraco:Macro>
Same as <img src="#node.Media("banner", "umbracoFile")" />
If anyone else finds this and you are not using MVC you can use this approach inside your template to get the image path you selected from the media picker
<umbraco:Item field='headerImage' runat='server'xslt='umbraco.library:GetMedia({0},true())/umbracoFile'xsltDisableEscaping='true'></umbraco:Item>
Where headerImage is the alias for your attribute name in your document type. This will render something like "/media/1002/sample.jpg" for instance
My company has common header that developed in php. I need to import that page into my layouts page in the project. The header can me called "company.com/inc/custom/footer2sn/"
How can call this?
If your page is to include is a static HTML page you can use Partial.
Simply change the somepage.html to somepage.cshtml.
Example:
#Html.Partial("~/Path/to/somefile.cshtml")
Trying to render a normal HTML file will give you an error such as Page cannot be found or no rendering engine could be found.
SO if you have a static HTML page, change the extension to CSHTML and use #Html.Partial()
OR
If the header you want to include is a PHP file it is possible as long as you have a server that is up and running and ready to serve the generated HTML from the PHP page.
You could write a custom HTML Helper
public static class MyHelpers
{
public static HtmlString RenderPHP(this HtmlHelper helper, string path)
{
var requestContext = helper.ViewContext.RequestContext;
UrlHelper url = new UrlHelper(requestContext);
var client = new WebClient();
var returnString= client.DownloadString(new Uri(string.format("Http://{0}{1}", requestContext.HttpContext.Request.Url.Host, url.Content(path))));
return MvcHtmlString.Create(returnString);
}
}
In short, this simply takes the HTML generated from the PHP page and injects it into a section within your page.
To use this inside your page use Razor Syntax like so:
<div id="phpPage">
#Html.RenderPHP("company.com/inc/custom/footer2sn/somepage.php"). <!-- Note this must on a server capable of rendering the php -->
Source
You can use Html.RenderPartial:
#{ Html.RenderPartial("SomeView"); }
But, it's better to have your layouts inherit each other hierarchically, and put your HTML directly in the layer it belongs to for common layout elements:
_Layout.cshtml
<!doctype html>
<html>
<head>
...
</head>
<body>
<header>
...
</header>
#RenderBody()
<footer>
...
</footer>
</body>
</html>
_TwoColumnLayout.cshtml
#{ Layout = "~/Views/Shared/_Layout.cshtml"; }
<div id="container">
<div id="content">
#RenderBody()
</div>
<aside id="sidebar">
...
</aside>
</div>
You can keep building layers like this as deep as you need. Just set Layout to the template it should inherit from and then put #RenderBody() where the content of the next child template or view should go.
Basically I want to "outsource" some of the content pages into single .html files. The pages are located at the same server and should be loaded normally by a link:
<li>Link1<span class="icon"></span></li>
The content of the link1.html page:
<!-- page -->
<div data-role="page" class="pages" id="link1">
<!-- header -->
<div data-role="header"> Menu
<div class="headerlogo"></div>
</div>
<!-- /header -->
<div data-role="headerimage" class="headerimage"><img src="images/headerimages/bild1.jpg" /></div>
<div data-role="content">
<h3>Link1</h3>
<p></p>
</div>
<!-- /content -->
</div>
<!-- /page -->
When I am clicking on the link in the menu, the content is shown fine. But the URL is changed in a way that may cause troubles.
What I want is: http://example.com/#link1.html
But what I get is: http://example.com/link1.html
So the problem is, that if someone tries to reload the page http://example.com/link1.html, he/she only gets the content of link1.html without all js/css things.
What I am doing wrong?
Thx
Stefan
You'll need to include the jquery mobile code in the head of link1.html and every other external file if you're going to take this approach.
Edit - This may actually achieve what you're trying to do.
$(document).on('mobileinit', function () {
$.mobile.pushStateEnabled = false;
});
Make sure the event handler is placed before jQuery Mobile is loaded.