I have a simple web page written in markdown where the title looks like this:
---
title: <h1 class="side">Text Title | </h1><h3 class="side">Text Subtitle</h3>
---
In the body of the page it displays correctly, but it shows the formatting in areas like the tab bar of the browser. I'd like to find a way to keep the formatting without having it displayed.
Just to be clear, the class="side" is a css <style> to display the headings inline, and the page is processed into html with the following result:
<title><h1 class="side">Text Title | </h1><h3 class="side">Text Subtitle</h3></title>
and the area in the body where the title is correctly displayed looks like this:
<header>
<h1>{{ page.title }}</h1>
</header>
You cannot have HTML within a title element.
If your title is stored somewhere and written out via server-side code, you will need to change your server side code to somehow strip the HTML.
You cannot style the <title> element - and using it outside the <head></head> is invalid HTML/XHTML
More info from the w3c
Related
So I've just published a website for the first time and I've come up with a problem. It looks like that the _Layout.cshtml page and the views conflicts with each other, because it doesn't load all of the CSS and JS. I get a few errors in the console tab which says:
"
HTML1503: Unexpected start tag,
HTML1512: Unmatched end tag,
HTML1506: Unexpected token.
"
When I go to the source of the page where the error occurs, the layout and the view page are combined together, it gives the error at the seconds head tags. The first first head tag is the one from the Layout page and the second head tags is from the view page. Thus having 2 head tags in 1 page and it conflicts.
Is there something I missed before publishing? Because on localhost it runs fine without these conflicts.
Hope someone can help me, thanks in advance! :)
I recommend you read through this MSDN article on Layout pages using Razor.
It sounds like you're repeating your header information.
From the article,
Many websites have content that's displayed on every page, like a
header and footer, or a box that tells users that they're logged in.
ASP.NET lets you create a separate file with a content block that can
contain text, markup, and code, just like a regular web page. You can
then insert the content block in other pages on the site where you
want the information to appear. That way you don't have to copy and
paste the same content into every page.
In other words, the layout page has all of the markup that you want repeated on every page. This way, you don't have to repeat it manually.
A content page can have multiple sections, which is useful if you want
to use layouts that have multiple areas with replaceable content. In
the content page, you give each section a unique name. (The default
section is left unnamed.) In the layout page, you add a RenderBody
method to specify where the unnamed (default) section should appear.
You then add separate RenderSection methods in order to render named
sections individually.
Since each page is likely to have multiple sections, you can use the RenderSection method to differentiate them in your layout.
Here's an example from the article:
<!DOCTYPE html>
<html>
<head>
<title>Multisection Content</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div>This content will repeat on every view that uses this layout.</div>
#RenderSection("header", required: false)
</div>
<div id="main">
#RenderBody()
</div>
</body>
</html>
As you can see, any header information will be loaded using the RenderSection method. On your view, you would define that section using code similar to this:
#section header {
<div>
This content will only repeat on the page that it is declared in.
</div>
}
So, when you run it, you'll get:
<!DOCTYPE html>
<html>
<head>
<title>Multisection Content</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div>This content will repeat on every view that uses this layout.</div>
<div>
This content will only repeat on the page that it is declared in.
</div>
</div>
<div id="main">
...
</div>
</body>
</html>
The required:false part of #RenderSection("header", required: false) means that you do not have to include the Section "header" in every view that uses the layout. It is optional. If you do not have required set to false, it will be required that you declare it on every page that uses the layout.
On a side note, make sure you only declare your css and javascript that in only one of these locations, preferably the layout page if it is going to be repeated. This does not mean, however, that you cannot have css and javascript in both. For example, if you are using bootstrap in your project, you would include that in your layout page so that you do not repeat the inclusion throughout your views. But, you may, for example, include a view specific javascript file in only your view and not the layout.
This export option:
#+TITLE: My title
Does two things:
adds a meta tag on the document's head: <title>My title</title>
adds a heading at the start of the generated content div: <h1 class="title">My title</h1>
I want 1 but do not want 2. Is it possible to configure this?
Something like this "should" work according to http://orgmode.org/manual/Export-settings.html#Export-settings:
#+OPTIONS: title:nil
#+HTML_HEAD: <title>My special title</title>
but in my setup this doesn't actually suppress the title. it does add an extra <title> to the head block though with the text you put in.
If you make the title blank, e.g.
#+TITLE:
then there is no title, but still apparently two titles in the head. Is that close to what you want?
[Org mode version 9.5.2]
Part of John Kitchin's answer helped me; the following achieves what you need:
#+TITLE: grtcdr's website
#+OPTIONS: title:nil
I'm using the AIR HTML control and I want to pass in a full HTML page string. A full HTML page simply meaning that the HTML markup has HTML begin and end tags. It looks like htmlText property accepts HTML formatted markup but might not be built to accept a full HTML page. A HTML formatted markup would be something like this:
<p>This is a paragraph. Here is <b>bold</b> text.</p>
Here is a full HTML page example:
<html>
<body>
<p>This is a paragraph</p>
</body>
</html>
Or would it be better to write the page to the file system and then load it through the location property? One thing to note is that I could be updating the HTML page a lot so I would like to avoid writing to the file system if possible.
I want to introduce hash links to the headings of a page into the menu of a web page. The web page is generated with Jekyll and it's default layout looks as follows:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div id="BigFatContainer">
{{ content }}
{% include footer.html %}
</div>
</body>
</html>
It is in the header that the menu for navigating to the different pages is located. I've been able to add a table of contents to the {{ content }} with the help of the following Kramdown command:
* Point at which the TOC is attached
{:toc}
One could use some ugly JavaScript hack to move this table of contents from the {{ content }} and into header.html but that'd be a bad solution. It's not possible to place the {:toc} macro inside header.html since that's not parsed by Kramdown, and even if you make sure that it's parsed by Kramdown using for example this plugin it outputs the TOC of header.md instead of the TOC for the content.
#miroslav-nedyalkov was on the right track here. Following his suggestion of looking at the Bootstrap documentation, I found that it uses a Ruby Gem - jekyll-toc that allows you to place a TOC anywhere in a layout file. You enable it in the front matter. I'm now successfully using:
<nav aria-label="Table of Contents">
{{ content | toc_only }}
</nav>
<section itemprop="articleBody">
{{ content }}
</section>
I would suggest you to use the approach Bootstrap website (scroll down and observe the right navigation area) is using - make your TOC as part of the content area, but style it to be placed on the side like main navigation. The main reason I'm suggesting you this approach is that you may (and most probably will) have more than one page. In this case you will need to display different page navigation for every page and display some navigation between the pages.
For more information you may refer to this article - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/
Why moving the toc block ?
This is correct to say that this toc is part of the page content. Semantically speaking.
You problem here is not at the document structure level but at the presentational one.
In this case the use of CSS is recommended to solve your problem.
I'm creating a simple personal website (using jekyll), and I have a problem in the "About Me" page. Every page of the website (including the about-me page in question) has a header on the top and a footer at the bottom. In the "About Me" page, I want the middle content section to be split vertically, with some text on the left and my picture on the right.
To achieve that, my "about-me.html" has the following two divs:
<div class='about_content' id='about_left'>
...
</div>
and
<div class='about_content' id='about_right'>
<span style="margin:0 10px; float:right">
<a href="/assets/picture.jpg" title="Gautam">
<img src="/assets/picture.jpg" width="240" height="320" alt="Gautam"/>
</a>
</span>
</div>
The about-me text that I want to show is in a markdown file called "about-me.md", but all my attempts to show those contents in the "about_left" div defined above have failed :(
One option is for me to not use markdown for the about-me text, but instead write plain HTML in the "about_left" div. I don't like this option.
Another option is to not use the "about-me.html" file at all, but instead embed an image tag inside "about-me.md" as suggested in this answer. This sort of works, but the text and the image are then not in separate divs; due to which the text extends under the image -> something I'd like to avoid.
Is there a way for me to keep my "about-me.html" file with the two divs, but still show the text from my "about-me.md" file inside the "about_left" div?
You can do something like this in your HTML file where you want the content of the Markdown file to show:
{% capture about %}{% include about-me.md %}{% endcapture %}
{{ about | markdownify }}