In my meteor project I can separate the javascript files in the client and server directories. But I cannot find a solution for all the html templates I need to define.
The problem I have now is that I need to embed this svg image in a template too, which is a huge image. So now I have this html file which is now 2 times 'huge' :)
The reason I need to have this svg inline in my html/template is because I need to style it with css. Any suggestions ?
You can put the .html files anywhere! Besides the server directory, of course. The natural place to store them is the client folder, and a good practice is to keep each template in a separate file. The Javascript code related to that template (data helpers, events, callbacks) can then go to a file with the same name and with extension .js instead of .html. These are the basics if you want to keep your project tidy.
Related
I am currently in the process of designing and refining a landing page. Over the time, many things have been added and handling the amount of sections and modals is not as it easy as it used to be.
Coming straight to my question: Is there a simple solution to use templates in your normal web design flow to create static web sites. I do not need the advantages of a static site generator, like also compiling my sass or minifying my js files. Interpolation and a config file are also not needed nor wanted. Do you know any system that only allows me to split my html file into multiple components which will then be saved in different html files?
P.S. I am not looking for a Javascript template engine. The creation should happen once and produce a normal html file.
You can use a template engine like pug with client tool.
Example with pug:
Step 1: Install pug-cli
npm install -g pug-cli
Step 2: Code html using pug syntax (very easy to learn). Ex: Split home page file into multiple components (header, footer in folder template_parts):
<!DOCTYPE html>
html(lang="en")
head
meta(charset="UTF-8")
title Document
body
include template-parts/header.pug
h1 Home page
include template-parts/footer.pug
Step 3: Run pug-cli to auto convert html code
$ pug -w ./ -o ./html -P
Change ./ after -w by location of pug files, ./html after -o by location of html files after convert.
Without using PHP includes, I'm not sure if this can be accomplished without using some form of JS Templating engine as:
The majority of the web's content has a simple and declarative way to load itself. Not so for HTML
You should check out:
Metalsmith
An extremely simple, pluggable static site generator.
Handlebars
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration.
If you're using GULP/GRUNT in your workflow anyway there are include plugins:
npmjs search for 'gulp include'
npmjs search for 'grunt include'
Best solution for that is to use server side rendering as the previous answare said.
But checkout this attaribute powered by w3schools it might help you.
I know this answare is to late. but it might help others.
Thanks.
I'm making a "this day in history" sort of site in gh-pages, using javascript to pull the day's entry for the front page and a collection to store all the other entries indexed by date.
The entries are text files.
I've made markdown files as stubs to pull in the text files. I don't want to replicate the text files if possible, because then any typos I would have to remember to fix in two places.
As far as I can see, there are two ways to include the text files in the template:
{% include date.txt %} which requires the txt files to be in the _includes directory, thus not generated into the site and not available to the javascript on the front page
{% include_relative date.txt %} which requires the txt file to be in the collection folder, which is also not generated unless it has a yaml header, in which case it would be difficult to extract the text from the generated html.
Is there another way I'm missing for jekyll to include plain text files without them having to be in special _folders?
I'm using github pages, so plugins are out.
I think there is no other way to include text files through liquid. It is part of the way it separates published files from the pieces that go together to make the files.
The way forward is to adapt the javascript to read the text from a raw blob from the github repository.
But using an http request to raw.githubusercontent.com gives a Cross Origin Resource Sharing error.
So next way is to make a new collection with a new layout to output the input files as they are.
I am trying to create a custom gitbook theme and in that I also want to change the layout so that the book I create using the theme have the layout that I want. I copied the default templates dir in my assests dir of the custom theme and then modified the layout.html and header.html files as I wanted. Then to include the modified template files, I added the following attribute to the index.js file
module.exports = {
book: {
assets: "./assests",
templates: {
"layout":"templates/layout.html",
"header":"templates/includes/book/header.html",
},
......
......
However with this configuration, the generated book is not picking the template file changes. However I do see the css/js changes that I had done.
For the record, layout and header template files do exist if you're going the "unadvised" (emphasizing the unadvised nature of this) route of:
Add "theme": "./customtheme" to your book.json file.
Create your customtheme folder in the root with the files from the Gitbook repo
Edit from there
This is so far the only way I've found edit your favicon, sidebar, header, and layout files. It's not recommended because you're no longer using the files in the repo, so updates could break it, but some things either aren't easy or possible to make changes without doing something messy and hacky like this. Hopefully simple things like updating a favicon, header, or sidebar could be made to be easier in the future. I've only found this solution after many, many google searches and plugin comparisons, so maybe some one has a better solution that I haven't found yet.
Templates "layout" and "header" don't exist. You can only change:
site: template for the website
glossary: template for the glossary
langs: template for the choice of languages
page: template for the ebook
Changing templates is really not advised, you should use plugins to only extend html,css,js using: https://github.com/GitbookIO/plugin/blob/master/index.js#L2
where to place the js_plugins and css_plugins?
I want to create a html/css template.some css files and are coded myself,such as
css/my.css
js/site.js
but sometimes I want to use some existed css or js plugins from other people who had shared on web,such as
1.some plugins only have css,no js needed. (ex:css3_button.css)
2.some plugins have both css and js. (ex:jquery.prettyphoto.js && jquery.prettyphoto.css)
for these plugins ,where should i put them in my template folder?
i do it like this bellow, but i don't think my structure is good enough.
index.html
css
....my.css
js
....my.js
css_plugin
....css3_button
........css3_button.css
js_plugin
....jquery_prettyphoto
........jquery.prettyphoto.css
........jquery.prettyphoto.js
how to place these files, to ensure the easy managing in the feature?
I use static folder, which includes folders for CSS, images and JavaScript. You can also add a folder for your plugins, where each plugin will be in its own folder.
You can replicate your general structure inside each plugin folder, but most plugins come pre-organized, and changing their structure is not always easy.
example
index.html
static
...js
...css
...img
...plugins
......myFavoritePlugin
.........css
.........js
.........img
......myFavoritePlugin2
.........css
.........js
.........img
Keeping the plugin files together makes their maintenance easier, but it affects performance. It is best practice to combine CSS and JavaScript files when deploying on production machines. You can have best of both worlds if you use build scripts, such as ant
I am familiar with theming and using template hints in the Magento back office to locate .phtml files.
What I am not really familiar with are the core files such as app/code/core/Mage/Catalog/Model
What I need to do is override a core file like I would a core phtml file by copying it to 'my theme'.
I basically want to amend some labels which appear on the order summary page of the Magento checkout process - domain.com/checkout/cart/
I followed the trail to the phtml files using template hints. Within the app/design/frontend/default/mytheme/template/checkout/cart I found the code
renderTotals(); ?>
Now I managed, by accident, to stumble upon two of the files I wanted to change:
/httpdocs/app/code/local/Mage/Sales/Model/Quote/Address/Total/Grand.php
/httpdocs/app/code/local/Mage/Sales/Model/Quote/Address/Total/Shipping.php
I made local copies of these files (http://www.magentocommerce.com/wiki/how_to/how_to_create_a_local_copy_of_app_code_core_mage) to override the default labels, like I would if I was overriding a template file.
My question is, how can you locate core files which pertain to the 'stuff' you want to change, located in function calls such as renderTotals(); ?> in the phtml files?
Not being able to pinpoint stuff like I can with template hints is slowing me down, and I am struggling to find a solution as I am not up on all the vocab surrounding Magento yet.
Hope this makes sense and thanks in advance!
From the same settings page where you turn on Template Path Hints, also turn on the "Add Block Names to Hints" setting. This will show you PHP class names such as: Mage_Sales_Model_Quote_Address_Total_Grand to which you can deduce the folder path (underscores represent a subfolder, and the last piece represents the file name).
If you're getting a block such as Mage_Sales_Model_Quote_Address_Total_Default then sometimes it just takes a little common sense to see that it's pulling in other files from the same folder (such as Grand.php and Shipping.php). But there are generally only a couple files in the same folder, so this is pretty easy to see.
As Sid Vel said, a good Search Project functionality is helpful. But if you find yourself looking at Abstract.php of some class, often you need to look in a subfolder in that directory with the proper name to find the concrete implementations. But still, it gets you very close to where you need to be.
I always use Dreamweaver's site / directory search function. It will scan through all the files in the Core folder and tell you where the function is from. In your case, I would search for "renderTotals". You need to enable PHTML editing in Dreamweaver.
Most IDE's will allow this kind of search option. In Aptana you can Ctrl + Click on the function to open the file it is coming from. Magento takes ages to index itself on Aptana, due to its sheer size.