I just started rails today and it's very interesting. However, I've come across a problem. Whatever goes into application.html.erb should be seen in other webpages; such as the links, navbar. The problem is what I've put into application.htlm.erb is not showing in the other pages. If I put 2 links into application it won't show on the other webpages, the only way I could see the links is because I manually inserted the code into the individual webpage. I don't know if it's something wrong with application.html.erb itself, but I have 2 files in the layouts folder: application.html, and application.html.erb.
I'm also watching a video that goes along with my project, which means that I pretty much copied whatever the teacher was saying.
I really want to move on, but this problem is putting me back. If anyone can help please respond!
There should only be application.html.erb in the layouts folder. The ERB extension is a rails filename extension that allows you to Embed Ruby code and PARTIALS.
application.html.erb is your master layout file, it renders partials and assembles the HTML structure in a modular way. It gets more apparent when your application grows!
Basically you are not supposed to edit application.html.erb directly unless you want to make a change to the existing HTML structure, which is basically
<html>
<head>
</head>
<body>
<%= yield %>
</body>
</html>
If I were you, I would read the Rails Docs about layouts. It explains how pages get rendered and shows you where to place your logic (in this case your links).
Related
I have my code with the following structure, where I only have a style.css, favicon.png, logo.png, and an external Javascript file in their respective folders.
index.html
assets
CSS
img
I'm looking to convert it to a template on GitHub, where a user can use it and change only the <title> of the head, the main <h1> and <h2> of the body, the logo.png (next to the <h1>) and the favicon.
I have no idea how to do it, as an example, I put this Github project, where using the template just edit .upptimerc.yml to configure your site, and Github Actions makes the deploy in Github Pages every time you modify it. While the source code is in another repository.
If someone could give me something to guide me or give me an example even with a "Hello world" HTML I would appreciate it. I couldn't find anything on the internet beyond the basics.
This is pretty much my first go at HTML and CSS. I thought I was getting a hang of it until I added more pages. I wanted each page to have the same top navigation bar format, but when I linked the same CSS Stylesheet to all of my pages it just doesn't want to work? How should I go about fixing this?
Also, somehow my google fonts link did work at first, but once I added in the pages and tried linking the single stylesheet to all the pages, it stopped working completely.
Here's what is going on:
index.html file code & link href to css
Preview of index.html/my homepage
menu.html file code & link href to the same css stylesheet
Preview of menu.html/menu page
My CSS stylesheet
The preview works with index.html, but when I navigate to the menu page, or contact page I have created through the preview, it completely breaks and doesn't have the navigation bar I created across all the pages at all.
Did I do something wrong here? I tried creating multiple CSS files and gave them different names since each page is going to look different anyways, but kept the html the same across all the other html pages and the css the same.
The reason why the css script is working for the index page only is because index.html is the only script that has the right directory to your css script. So the browser can't find the css script as a result. Remember that the other pages are not in the same location as index.html (they are in Pages instead of the root directory). All you would have you do is just change the directory path on the other scripts.
Add this on all your other scripts (excluding index.html):
<link rel="stylesheet" href="../CSS/style.css"/>
It should work after this.
Here is an example:
Your actual problem is not knowing how to navigate from one/folder to another. This link below will help you further on how to navigate around folders.
https://learn-the-web.algonquindesign.ca/topics/paths-folders/
Don't take out the files from Pages but leave them where they, all you need to do is to change the path to the different files. You'll see how I did on the screenshots above.
If I had more time I would go more in detail but this should be sufficient info for you to solve the problem and understand what mistakes you made. I hope this helps.
I'm trying to make a GitHub page. At the beginning, I use GitHub generator. I included Gemfile and _config.yml to generate SEO tag and it works as expected. The generated site will include the following section.
<!-- Begin Jekyll SEO tag v2.6.1 -->
<meta ...
<!-- End Jekyll SEO tag -->
Now, I've just updated my site to the new one using HTML template from HTML5 UP. It's up and run normally, however, I cannot find a way to make Jekyll generate SEO tag for my index.html file. I've tried to add triple dashes (front matter) to my index.html on the first line.
---
---
<!DOCTYPE HTML>
<!-- Other code below -->
The thing is, it partially break the site (page isn't rendered properly). Therefore, I've to copy/paste the generated tag and add them manually to my code. Is there a way to make Jekyll properly create SEO tags for my site? Or did my misunderstand something very basic here?
To be clear, I've very limited knowledge in web development, that's why I use a template in the first place. Here is my page in case it helps clarify the question https://hunghvu.github.io/ and here is its GitHub repository incase you want to know the file structure.
Update
(09/30)
I attempted to turn the index.html file into index.md while still keeping all the code (plus the tripled dashes). In a sense, it works. The page is generated, but still, it's not rendered properly as when I use html format. I'm aware that the way to actually build site using Jekyll is much different, but that does not answer my question.
In case it is necessary to show what I mean by saying "not properly rendered", I will update this question later on.
(09/31)
The picture below is how my page looks like when I add front matter and {% seo %}. Notice that when I first go to the page, the side bar is already in SOME OTHER WORK, or last section. It should be on the WELCOME. The WELCOME section is not rendered and sidebar functionality is broken.
Problem
GitHub pages gem is not included in your project, therefore GitHub is not running Jekyll build. Furthermore, you have nothing specified in your front matter. You also have no layout.
Solution
Include gem "github-pages", "~> VERSION", group: :jekyll_plugins in your Gemfile.
Notes
Consider using front matter and creating a layout file _layouts/default.html and moving everything except what’s in body (including SEO)to the layout file. The index.html should extend the layout by specifying layout property in front matter.
References
Front Matter: https://jekyllrb.com/docs/front-matter/
GitHub (step 9): https://docs.github.com/en/free-pro-team#latest/github/working-with-github-pages/creating-a-github-pages-site-with-jekyll
I am learning Symfony2, and I am making small tests.
Well I have made a small html for to test the twig templates.
<html>
<head>
<title>test00</title>
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="test">
<img src="test.png" /><br />
test
</div>
</body>
And the files are in the same directory of html.
Then copy all files (html, css and the images) to my test:
/var/www/Symfony/src/Test/TestBundle/Resources/views/Default
And rename the html to html.twig.
But fail when use this html as twig template, because the Symphony try to use "http://localhost/Symfony/web/test.png" as link the image.
And yes, I have read the documentation and know the "asset" and I can change the path to the files with some example
test.png')" /> and also copy all files to the web directory in the budle.
But I wonder "Is there any tool to convert html to twig?" because for example I can't say to my boss:
"The Symfony2 is great. But your designer must to learn Twig and when she finish the html with dreamweaver, she must change all of links to css and images for to make a template...and yes she can't see anything only can send to me to put in the web server to check if it is correct."
What do you hope that my boss will think about Symfony2? He will think this is crazy, this is twice of work.
I think the best it is a automatic tool to translate a html with relative paths to twig and something like that a package files to put in web dir. And the designer does'nt need to know anything only make pretty htmls with few weird things as put {{page_name}} instead the "Page name".
Regards.
From an html coders perspective, Twig is HTML. As long as templating language support is setup on your server, there is no difference between writing twig or HTML. The only difference would be the <h1>{{variables}}<\h1>. Your HTML coders should be aware of what variables they have access to. That being said, from a developers perspective, twig is a lot more so I'm not simplifying twig. But if someone knows HTML, they'll know what to do with twig.
Then copy all files (html, css and the images) to my test:
/var/www/Symfony/src/Test/TestBundle/Resources/views/Default And rename the html to html.twig.
Nope. Your html.twig files need to end up somewhere under views so the template processor can get to them. However, your css and images need to be copied to your root web directory. Same place where app.php lives.
But fail when use this html as twig template, because the Symphony try to use
"http://localhost/Symfony/web/test.png" as link the image.
It's is not symfony generating this link but your web browser. Use Control-U to examine the generated html source from within your browser. You will find that your links such as href="test.css" have not been changed. Twig will not change anything unless it has has some curly brackets around it.
So your designer can continue to use her current workflow and deliver a set of files. You just need to deploy the files to the correct locations.
Of course symfony/twig can do a lot more that simple variable replacements so eventually you might want to change things. But you can get started just fine.
I have a really hard time searching for this, because I have no idea how to call it.
I'll try to describe the process I want, and see if any of you know such an editor.
I have a website that has the same html component repeated in them, for example, a menu. I can define how the menu looks with css, but I can't (as far as I know) add the same piece of html to every html page with a simple line.
What I do, is copy the menu over to every place. If I change the menu, I need to do it all again.
I know this can be achieved by using a dynamic server, with something like php or jsp, but I don't need it to be dynamic.
I was wondering if there was a way to do this.
I thought possibly there was an editor, where I can edit html using includes, and then "compile" the htmls after modification to produce the htmls I will replace on my server.
Thanks
Have a look at server side includes ... create a menu.shtml page and then include it like so :
<!--#include virtual="/menu.shtml" -->
Its supported by most web servers out of the box (including IIS, Apache and lighttpd)
Have you heard about MasterPage Concept
The below link will give you a quick start
Master page are pages which will act as a frame for all other pages. You have to write it only one. And each page that is coming under that, will have to include the master page. Thats all!
You can do this with jquery
Assume you have page1.html page2.html etc.
You want in each of these pages your contactinfo. You can create a file with the name "info.txt". On the spot where you want this contact info, you put a div. as shown in this example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- page content -->
<div id="contact"></div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#contact").load("info.txt");
;
});
</script>
Whatever you place in 'info.txt' will be put on the spot of were you put
You could write a simple bit of js in an external file and then call it in each page to dynamically load the menu. You can then simply edit the menu by editting the JS file. all you'd need to do then is include the in the html and use document.getElementById("menu").innerHTML = menuHTML; where menuHTML is a variable containing the pure HTML code of the menu. You can then include the JS file and call it in the body onload