I am somewhat new to AEM and Sightly. I have written a 'page' component to house my page content. I have a number of devices with different CSS under /etc/designs/myapp as follows:
/etc/designs/myapp
- /128/style.css
- /240/style.css
etc etc..
Back in my page component, I have a number of different HTML files that I use to trigger the correct CSS via a Sling selector. For example:
/apps/myapp/components/page
- 128.html
- 240.html
The purpose of these files is to include the HTML <head> section with the CSS as an inline style (cannot link to external CSS due to device limitations).
The problem that I am having is that if I place 128/style.css inside the component itself, the include works. If I have it under /etc/designs/myapp, I can't get it to include properly. I have tried using ${currentDesign.path # appendPath='/128/style.css'} and I have tried explicitly referencing the whole path.
Here is an example of 128.html, under the page component:
<html>
<head><!--/*
*/--><div data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap></div><!--/*
*/-->
<title>${currentPage.title}</title>
<div data-sly-unwrap data-sly-include="/etc/designs/myapp/128/style.css"></div>
</head>
<body class="main" role="document" data-sly-include="body.html"></body>
</html>
I realise that I need a <style></style> section wrapping any CSS that is included, but for now, I am just trying to get a page to include from /etc/designs.
Any help would be greatly appreciated.
From the definition of data-sly-include: https://docs.adobe.com/docs/en/aem/6-1/develop/sightly/block-statements.html#include
data-sly-include: Replaces the content of the host element with the markup generated by the indicated HTML template file (Sightly, JSP, ESP etc.) when it is processed by its corresponding template engine. The rendering context of the included file will not include the current Sightly context (that of the including file); Consequently, for inclusion of Sightly files, the current data-sly-use would have to be repeated in the included file (In such a case it is usually better to use data-sly-template and data-sly-call)
It's not meant to be used for the type of inclusion you are trying to do since you are not calling any renderer. I think you should use client libraries and include your CSS files only, here is the documentation about this : http://blogs.adobe.com/experiencedelivers/experience-management/sightly-clientlibs/
You should define a client library category for each of your styles and call the right clientlib when you need it using <meta data-sly-call="${clientLib.css # categories='category.style.128'}" data-sly-unwrap></meta>
Hope this helps.
Related
I'm trying to extract just the html, without the encapsulating <!doctype>, <html> and <body> tags.
I've seen this question asked before many times, and the answer is always to exclude the "fullpage" plugin.
However, that plugin is no longer used in tinymce 6.
It seems that the classic editor version of tinymce now always uses an <iframe>, and those unfortunate encapsulating tags are passed along as a consequence.
For the sake of robustness I don't want to have to strip them out in the back end if I can help it; is there a way to extract just the html content in tinymce 6?
You would need to provide more details on what you are doing when you extract the content from TinyMCE.
In my quick testing simply using getContent() to extract the data from TinyMCE does not include any of those tags:
https://fiddle.tiny.cloud/MChaab/3
We have been having discussions in our product dev team regarding html maintainability and reuse. To set the context, we started with HTML5/CSS3 front end with plain JS under Play MVC, which in turn uses RESTful backend. Then we thought of adding AngularJS to the spin and to adopting a hybrid approach only to realize that two strong MVC frameworks don't necessarily work together and you have to pick one. So for the performance and type-safety among other issues, we decided to go with using Play framework and Scala based templates.
Here's the challenge: We would like to create reusable web components just like Apache Tiles, so that common elements such as header, menus, footer, etc. can be reused. These components are ready to go in Play to which dynamic content could be added to serve the entire page.
Can this be done? If yes, how?
Secondly, play templates seem to take you back in the time since they don't allow the separation of concern in html. Therefore for re-designing or improving html content, the html developer will have to deal with the template or merging new html with existing templates. How to make this process easier?
I'm don't know exactly how Apache Tiles works, but if I properly understand, it offers a way to create pages using smaller components (like header, menu, footer, etc) and some sort of include mechanism to glue these components together and then compose the page.
That said, you can achieve the same thing using Twirl. You just need to declare reusable blocks that can be used inside the same page, or you can have something like Rails partials that can be reused across different pages.
Let's see an example. Consider that you have the following files:
File app/views/partials/header.scala.html:
<header>
<h1>My Header</h1>
</header>
File app/views/partials/navigation.scala.html:
<nav>
<ul>
<li>Home</li>
<li>Profile</li>
<li>FAQ</li>
</ul>
</nav>
File app/views/partials/footer.scala.html:
<footer>
Some copyright info
</footer>
File app/views/main.scala.html:
#(title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("stylesheets/main.css")">
<script src="#routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
</head>
<body>
#partials.header()
#partials.navigation()
#content
#partials.footer()
</body>
</html>
The files above defines not only some reusable partial templates (header, navigation and footer), but also a common layout (main) that all the pages of your application can reuse. Now, lets see a page that uses the structure above:
File app/views/users/profile.scala.html:
#(user: models.User)
#main(title = "User Profile Page") {
<h2>This is the profile page of #user.username</h2>
}
And there is more: since views are compiled to Scala code, you can import code written in Scala/Java and call it directly from your views, something like Rails view helpers:
File app/views/helpers/DateHelpers.scala:
package views.helpers
object DateHelpers {
def formatToISO8601(date: Date) = {
??? // format the date
}
}
Let's use this helper in our app/views/users/profile.scala.html page:
#(user: models.User)
#import controllers.DateHelpers._
#main(title = "User Profile Page") {
<h2>This is the profile page of #user.username.</h2>
<p>User since #formatToISO8601(user.createdAt)</p>
}
And there are other approaches to consider:
Ping-Play: Big Pipe Streaming for the Play Framework
You can create a Play module that integrate with Apache Tiles. I'm pretty sure this is possible.
A quick answer would be the following. If you are comfortable with Yeoman, you can keep most of the UI part in existing HTML, while rendering some pages with Scala templates. I would recommend Play-yeoman, which may help such that you can--with minimum effort--reuse UI components.
For instance, you may easily convert a NodeJS+Angular app into Play+Angular. The Play-yeoman plugin helps a lot. But it is not so flexible as it does not support any arbitrary Yeoman configuration, just Angular.
I am just starting out with Scala and Lift and I apologize ahead of time about this pretty basic question but how do I "import" or rather embed HTML file into a layout/template?
Basically I have a bunch of layouts and each of them has hard coded footer. I want to extract footer into a separate HTML and then reference it back in all layout files.
Check out the "starting" template for Lift: https://github.com/lift/lift_25_sbt/
In Lift Basic https://github.com/lift/lift_25_sbt/tree/master/scala_210/lift_basic you can see an example of a footer that can be put around many other HTML-s: https://github.com/lift/lift_25_sbt/blob/master/scala_210/lift_basic/src/main/webapp/templates-hidden/default.html
To use this footer, you access it like in https://github.com/lift/lift_25_sbt/blob/master/scala_210/lift_basic/src/main/webapp/index.html :
<div id="main" class="lift:surround?with=default;at=content">
Another link to read about this: http://simply.liftweb.net/index-3.3.html#toc-Subsection-3.3.3
BTW, starting with the lift_basic github template is a good idea anyway.
If you are just looking to pull in an HTML file, like a footer, you can use the embed snippet, as specified here.
So, if you have a file in the root of your webapp named footer.html, you can embed it with this code:
<div data-lift="embed?what=/footer"></div>
The templating engine will also allow you to use other directives like surround if you want to insert content at a particular point in the middle of an existing HTML file.
I'm trying to figure out exactly what css is included by the standard call to currentDesign.writeCssIncludes(pagecontext); found in headlibs.jsp. The documentation states simply that it is
Convenience method that writes the CSS include strings to the response.
Looking at what it seems to do, it will include /etc/designs/currentdesign.css which is built off the design components css, and /etc/designs/currentdesign/static.css, which is just a static file. But is this all that is will include?
In particular, what I'd like to do is include a clientLib-processed css file as part of my design. One way to do this is to manually build out the css include:
<link rel="stylesheet" href="<%= currentDesign.getPath() %>/myclientlib.css" />
But I'd prefer to let that get generated automatically, so that my designers have flexibility to structure the css files differently for different designs (i.e., for the "base" design they are fine with just a static.css file, but for the "fancy" design they want to use LESS css and break up the files more granularly). And it would be helpful to put design-specific css info with the components they affect, rather then needing to separate those.
You can use the <cq:includeClientLib> tag, combined with themes and/or categories, to mix and match bits of CSS.
But you may find it somewhat limiting; for instance, you can't specify a media attribute. If you need to do this, or your designers don't structure their CSS in a way that fits the themes/categories model, your fallback is the technique you've identified in your question, using <link> directly.
Update
An excellent question about themes! I have only seen them used in passing.
You can define a theme by just adding a new folder/node under /etc/designs/yourproject/clientlibs/themes, as a sibling to default.
You can pull in the clientlibs for a theme with the <cq:includeClientLibs> tag, perhaps under the control of some conditional logic. For instance, in one of my projects I have a theme called authoring which I only want to apply to the author instance; I pull it in with this code in headlibs.jsp:
<c:if test="${ (global['wcmmode'] eq 'EDIT') || (global['wcmmode'] eq 'PREVIEW') }">
<cq:includeClientLib theme="apps.myproject.authoring" />
</c:if>
I have not seen any documentation that would apply theme automatically to a particular subtree of the content tree, or based on the presence of a tag.
There is that cryptic statement "The theme name is extracted from the request." in the Adobe docs, which is backed up by this statement in the Sling docs, "ThemeResolverFilter Provides the Theme for the request. The theme is provided as a request attribute." So perhaps tacking &theme=apps.yourproject.foo onto a query string would apply that theme.
The list of CSS files is based on the property 'cq:designPath' of the page.
I read that Jahia CMS uses 960gs framework as default for page layouts, also I read that all divs defining rows should be nested into a "special" div which has class equals to container_16. So I decided to find a module which in its view renders html for that special div. I tried file content search for "container_16" and found a bunch of css files and that's all, no view for any module showed up. And it made me confused and I kinda want to find a module which provides a basic html tages like "body" tag.
Does anybody knows the name of the jahia module
The module you're looking for is called "grid" and the source code is available here : http://subversion.jahia.org/svn/jahia/trunk/modules/grid/
Inside the row.jsp file you will find the following div :
<div class="container_16">