I'm trying to get Next to work with my django template.
My urls.py looks like this:
urlpatterns = [
path('admin/', admin.site.urls),
re_path('^(?!static).*$', index),
]
I'm basically redirecting every /foo/bar request to the index view, which renders the index.html template, which looks like this:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="application/javascript" src="{% static "dist/bundles/pages/_document.js" %}"></script>
</head>
<body>
Hey
</body>
</html>
So my question is, which one is the "main" next JS file, that should go inside my <script type="application/javascript" src="..."></script>?
Related
Using foundation 6. When I have watch running, whenever I make changes to my index.html file, it puts a copy in the dist folder with an added section. I already have a and don't need this!
How can I prevent this behaviour?
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SoapMaker</title>
<link rel="stylesheet" href="assets/css/app.css">
<style>
.bgimage{
background:url(./assets/img/soapBG2.jpg) no-repeat center top fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
</style>
<!-- <link rel="stylesheet" href="css/custom.css"> -->
</head>
<body class="bgimage">
Foundation site docs have great examples.
The Layouts folder contains a default.html file with the headers in it.
The Pages folder contains your pages with only content - no header stuff there.
If you look in default.html, you will see after the body tag several panini bracketed files to be included in every page including one called body.
I usually create header, menu, and footer files that will show on every page.
<body>
{{> header}}
{{> mainMenu}}
{{> body}}
{{> footer}}
<script src="{{root}}assets/js/app.js"></script>
</body>
Ideally, I want my index.html from this:
<!-- app/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Program With Erik Blog Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/example1.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/example1.js"></script>
{{content-for 'body-footer'}}
</body>
</html>
into production code. But for some strange reason, each time I call ember build, I do not get the expected production-looking code. Instead I get something like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
.
.
.
<!-- lots of code -->
It's the default firebase page!
What is happening? I've deleted the picture multiple times. But each time I call ember build it builds the firebase default page rather than my ember app index.html.
I'm new to ember and I've been fiddling around heavily with the config/environment.js and the firebase.js. Any thoughts on why this might be happening?
On initialising a firebase app, one is prompted:
? What do you want to use as your public directory? (public)
make sure to set the dist folder as the public directory, that is
? What do you want to use as your public directory? (public) dist
using the default public will cause the above behavior no matter how many times you build your Ember app.
To fix the problem, re-initialise the firebase app with the firebase init command, and set the right folder as the public directory.
I haven't used Django for a while, so I forgot many things of Django. When I click url link on this site, it moves to another pages, but the pages don't work properly. But if I reload the page or retype the same url, the pages work.
I wrote like these,
slideUp header
or
carousel
I read several pages, but I don't know what to do. Would you please help me?
index.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en-EN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- for IE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Welcome to my Samples!</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<style type="text/css"></style>
</head>
<body>
<div>
<span>Welcome to my samples!!</span>
<dl>
<dt>Bootstrap</dt>
<dd>affix</dd>
<dd>carousel</dd>
<dt>BxSlider</dt>
<dd>responsive</dd>
<dt>Magic</dt>
<dd>slideUp header</dd>
</dl>
</div>
<!-- JavaScript -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript" ></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js type="text/javascript" ></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript"></script>
</body>
</html>
url.py
from django.conf.urls import include, url
from django.contrib import admin
admin.autodiscover()
import hello.views
# Examples:
# url(r'^$', 'gettingstarted.views.home', name='home'),
# url(r'^blog/', include('blog.urls')),
urlpatterns = [
url(r'^$', hello.views.index, name='index'),
url(r'^bxslider/$', hello.views.bxslider, name='bxslider'),
url(r'^affix/$', hello.views.affix, name='affix'),
url(r'^carousel/$', hello.views.carousel, name='carousel'),
url(r'^slideup_like_magic/$', hello.views.slideup_like_magic, name='slideup_like_magic'),
url(r'^db', hello.views.db, name='db'),
url(r'^admin/', include(admin.site.urls)),
]
Django-1.9.2
////// Additional //////
This is what I see when I move page from http://bananaman.herokuapp.com/.
And this is what I am supposed to see, for instance, http://bananaman.herokuapp.com/slideup_like_magic.
I haven't bothered to work through everything that is going on, but it looks like the issues you are experiencing are due to jQuery Mobile's link hijacking. It doesn't look like you have your data-* attributes correct from one page to the next.
I think you should start by pulling out jQuery Mobile and make sure everything is working correctly. Then add jQuery Mobile back in ensuring you have set up the page with the correct data-role attributes.
I am wanting to use Google Adsense with an Ember site I'm working on. However, if I just copy the code block I get from Google I get this error:
Error: `SCRIPT` tags are not allowed in HTMLBars templates (on line 3)
After doing some searching, it seems some people has the same issue, but I have not found a solution for this. Does anybody have any ideas?
Put external scripts in your app/index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TmpApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/tmpapp.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/tmpapp.js"></script>
{{content-for 'body-footer'}}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12345678-1', 'auto'); // get the exact number from your Google Analytics admin screen
ga('send', 'pageview');
</script>
</body>
</html>
Notice the script is below the content-for 'body-footer'? Remember to use your own Google Analytics code from your admin section in Google Analytics.
I've executed the following command to build ember for production environment. However when I opened the dist folder, clicked the index.html it returned a blank page. compared to as when I run ember server.
The command I've used to generate the dist folder
ember build --environment production
Here's how I do it dist folder -> click the index.html.
Here's the result.
Here's the contents of the index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TodoMvc</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/" />
<meta name="todo-mvc/config/environment" content="%7B%22modulePrefix%22%3A%22todo-mvc%22%2C%22environment%22%3A%22development%22%2C%22baseURL%22%3A%22/%22%2C%22locationType%22%3A%22auto%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22todo-mvc%22%2C%22version%22%3A%220.0.0+8f1032d8%22%7D%2C%22contentSecurityPolicyHeader%22%3A%22Content-Security-Policy-Report-Only%22%2C%22contentSecurityPolicy%22%3A%7B%22default-src%22%3A%22%27none%27%22%2C%22script-src%22%3A%22%27self%27%20%27unsafe-eval%27%22%2C%22font-src%22%3A%22%27self%27%22%2C%22connect-src%22%3A%22%27self%27%22%2C%22img-src%22%3A%22%27self%27%22%2C%22style-src%22%3A%22%27self%27%22%2C%22media-src%22%3A%22%27self%27%22%7D%2C%22exportApplicationGlobal%22%3Atrue%7D" />
<script src="/ember-cli-live-reload.js" type="text/javascript"></script>
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/todo-mvc.css">
</head>
<body>
<script src="assets/vendor.js"></script>
<script src="assets/todo-mvc.js"></script>
</body>
</html>
Here's the error message
I was doing it the wrong way. I deployed the app to an http web server. turns out by clicking the index.html. I'm accessing it via the file protocol