I would like to export my Next.js project for the use with a Template Engine. (In my case "twig") I replaced all the texts in my HTML with the {{ ... }} twig markdown.
When I run next build && next export the HTML is generated as intended. The problem now is, that when I render e.g. the "index.html" with the twig renderer the texts are replaced again bei the markdown {{ ... }} from the .../index.js code. (Since this calls createElement and replaces all creates the tags for faster loading)
Now my question is: is it possible to disable the generating of the .js file for every page sothat I can change the .html file without it being overwritten?
P.S. The build is running as a SSG (Static Site Generator) eventhough I am not using getInitalProps, getStaticProps, getStaticPaths or getServerSideProps which I find strange. And I have no configuration in the next.config.js file.
Thank you so much in advance!
Related
I am using GitHub pages to publish files from a project. These files are Java source code files, which I have been able to add as static files into Jekyll as a collection. I would need to apply a layout to these files for, e.g., code formatting. I am unable to do this.
My static source code files are in a collection defined in _config.yml:
collections_dir: material
collections:
cse-solutions:
output: true
This part of my site works fine: .java-files under material/_cse-solutions appear on the static site into /cse-solutions.
However, I would need to include a title and code formatting. For this I am trying to apply a layout to these static files. My current effort is the following. First, in _config.yml I set
defaults:
- scope:
path: ""
type: "cse-solutions"
values:
layout: java-code
Then I have a file _layouts/java-code.html with contents, for simplicity at this point
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test title </title>
</head>
<body>
<h1> Test code page heading </h1>
{{ content }}
</body>
</html>
However, this layout has no effect on the .java files on the site. To be honest, if the layout were effective, I do not know whether the output would even have .java-suffix. Still, I can not find any corresponding .html-pages on the site either.
Can this be done? If it can, what am I doing wrong?
EDIT: I suspect Jekyll just ignores layout for static files. Using jsonify from Liquid I can actually print the value of this collection, and there I can see that the system has correctly set, for these static files:
”layout”:”java_code”
But there is absolutely no effect in the formatting of these files.
(The underscore, that is, java_code instead of java-code is not an error here, because I noticed that some parts of Jekyll do not like dashes in identifiers, so I changed dashes to underscores everywhere. I think Ruby does not allow dashes in identifiers.)
I think you may be over complicating things a bit. If I understand correctly, you are trying to simply display the actual source code on your page correct? For example you would like your code to look like:
class HelloWorld
{
public static void main(String args[])
{
System.out.println("Hello, World");
}
}
If this is the case, you can simply save the written source code as a markdown file (.md) and let the kramdown mardkown converter handle displaying it correctly. To do this you need to make sure that you have the following in your _config.yml file:
kramdown:
# Use GitHub flavored markdown, including triple backtick fenced code blocks
input: GFM
# Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting
syntax_highlighter: rouge
This will make sure kramdown is enabled and will use rouge for syntax highlighting if you would like.
Then for each page you want, simply create a pagename.md file and add at least the following front matter at the very top of the page:
---
layout: java-code
title: "Here is my source code page"
---
This tells jekyll to use the "java-code" layout you already made and to define the title for the page as whatever you put in the quotes. After the front matter, simply copy your source code into a code block for markdown. It is very simple, all you need to do is have a line with ``` before and after you code. You can optionally have the first line be ```java to tell rouge to highlight for java syntax to make it easier to read.
You can put any markdown text outside of the code block that you would like as well. That means you can have a description of the code, or even break the code into segments with text descriptions before each part.
To put it all together you file should look something like:
---
layout: java-code
title: "Here is my source code page"
---
Here is my simple "Hello, world" program:
```java
class HelloWorld
{
public static void main(String args[])
{
System.out.println("Hello, World");
}
}
```
Check out the docs page for posts on jekyll's website for more info, and if you are unfamiliar with markdown there are tons of guides on writing with it if you do a quick google search (its how stackoverflow answers are formatted!).
I have a home.md file whose content I am rendering in home.html using {{page.content}}. I also want to use content of another markdown file, news.md. How can I access the content of news.md in home.html?
I tried using {% import "news.html" as news %} in home.html but got a TemplateNotFound error.
<div>
{{news}}
</div>
To include a Markdown file at an arbitrary position inside another Markdown file, first install the mdx_include Python-Markdown extension. Then update the Pelican configuration (e.g., pelicanconf.py) to load it:
MARKDOWN = {
# ...
'extensions': ['mdx_include']
}
Now you can use the following syntax to place the target file in the desired location:
This is some content in your Markdown file.
{! file_path_or_url_to_another_Markdown_file !}
This is text that will appear after the included file.
This functionality is orthogonal to Pelican but is discussed nonetheless in the Including Other Files section of the documentation.
I'm trying to put some Twig code in a JSON tag in my page (technically ld+json but the results are the same), and here's what I'm encountering:
When I try to paste/move twig code, it doesn't show.
When I write my code, it disappears on format and save.
The problem does not occur on a .html file with the same render.
The problem only occurs on .html.twig file extensions.
I'm guessing there is kind a JSON validation for Twig elements, but how can I disable it ?
My example code :
{% set foo = 'bar' %}
<script type="application/json">
</script>
If I disable the Twig support in the plugins, the problem disappears (but I lose twig support which I don't want), so I'm sure it comes from this plugin.
By default, Jekyll uses *.html, however, the program I use (Sublime Text 3) has an a package that adds Liquid syntax support but it will only auto detect and do the code suggestions if the file has the extension *.liquid. The other problem is, Jekyll is looking for default.html as well as the other layouts. How do I make Jekyll look for *.liquid files instead like default.liquid?
In the bottom right hand corner of sublime it will have the name of the filetype being used, for example 'HTML'. If you click this you can change it to liquid.
What worked for me is to rename files to *.liquid.html and then
update the front-matter to use the new name, e.g.,
Including abc.liquid.html in default.liquid.html
=== default.liquid.html ===
---
---
{% include file.liquid.html %}
Using layout default.liquid.html in a Blog Post
---
layout: default.liquid
title: "My post title"
date: 2021-01-24 19:00
---
So I have a website set up and I wish to dynamically load other .html files into a div. Each .html file contains some content but 1 .html file contains its own angularjs directives.
I was using ng-bind-html along with $scope.content = $sce.trustAsHtml(data); but I have discovered that this prints out the html raw (does not process any angular directives).
I've tried to use the various solutions on stack overflow but none have worked for me.
Website: http://algorithmictrading.azurewebsites.net/
App.js: http://algorithmictrading.azurewebsites.net/js/app.js
Example of .html pages being loaded:
http://algorithmictrading.azurewebsites.net/includes/home.html
http://algorithmictrading.azurewebsites.net/includes/about_us.html
.html page that contains angular directives:
http://algorithmictrading.azurewebsites.net/includes/download.html
As you can see, if you navigate to the website and click on the 'download' tab, the content is loaded but the angular in the drop down menu is not handled. The test button I added should also produce an alert box.
Right now, the code is based off this thread:
call function inside $sce.trustAsHtml() string in Angular js
Thanks!
I found that angular was stripping out the directives from html strings if I didn't pass them through the $sce.trustAsHtml method before passing them into the template:
$sce.trustAsHtml('<a href="/some-link" directive-example>link to add</a>');
This combined with a watch/compile on the element's content you're inserting html into seems to do the trick:
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope);
});
Take a look at this example: http://plnkr.co/edit/VyZmQVnRqfIkdrYgBA1R?p=preview.
Had the same problem this week and the best way I found to make it works was creating a custom directive called "BindComponent".
Change the ng-bind-html directive to a custom directive, and inside the link method you put this:
element.html(markupModel);
$compile(element.contents())(scope);
The markupModel can be a string with html code or you can use $templateCache($templateCache docs) to get the code from a .html file.