I'm trying to customize the swagger ui. I already override the template by adding drf-yasg/swagger-ui.html on templates.
When I tried to add a header tag It just add above it.
here's the code from swagger-ui.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>{% block title %} {{ title }}{% endblock %}</title>
{% block extra_head %}
{# -- Add any extra HTML heads tags here - except scripts and styles -- #}
{% endblock %}
{% block favicon %}
{# -- Maybe replace the favicon -- #}
<link rel="icon" type="image/png" href="{% static 'drf-yasg/swagger-ui-dist/favicon-32x32.png' %}"/>
{% endblock %}
{% block main_styles %}
<link rel="stylesheet" type="text/css" href="{% static 'drf-yasg/style.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'drf-yasg/swagger-ui-dist/swagger-ui.css' %}">
{% endblock %}
{% block extra_styles %}
{# -- Add any additional CSS scripts here -- #}
{% endblock %}
</head>
<body class="swagger-body">
{% block extra_body %}
{# -- Add any header/body markup here (rendered BEFORE the swagger-ui/redoc element) -- #}
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
{% endblock %}
<div id="swagger-ui"></div>
{% block footer %}
{# -- Add any footer markup here (rendered AFTER the swagger-ui/redoc element) -- #}
{% endblock %}
<script id="swagger-settings" type="application/json">{{ swagger_settings | safe }}</script>
<script id="oauth2-config" type="application/json">{{ oauth2_config | safe }}</script>
{% block main_scripts %}
<script src="{% static 'drf-yasg/swagger-ui-dist/swagger-ui-bundle.js' %}"></script>
<script src="{% static 'drf-yasg/swagger-ui-dist/swagger-ui-standalone-preset.js' %}"></script>
<script src="{% static 'drf-yasg/insQ.min.js' %}"></script>
<script src="{% static 'drf-yasg/immutable.min.js' %}"></script>
<script src="{% static 'drf-yasg/swagger-ui-init.js' %}"></script>
{% endblock %}
{% block extra_scripts %}
{# -- Add any additional scripts here -- #}
{% endblock %}
<a id="oauth2-redirect-url" href="{% static 'drf-yasg/swagger-ui-dist/oauth2-redirect.html' %}" class="hidden"></a>
{% if USE_SESSION_AUTH %}
<div id="django-session-auth" class="hidden">
{% block session_auth_button %}
{% csrf_token %}
{% block user_context_message %}
{% if request.user.is_authenticated %}
<div class="hello">
<span class="django-session">Django</span> <span
class="label label-primary">{{ request.user }}</span>
</div>
{% endif %}
{% endblock %}
{% if request.user.is_authenticated %}
<div class='btn authorize'>
<a id="auth" class="header__btn" href="{{ LOGOUT_URL }}?next={{ request.path }}" data-sw-translate>
{% block django_logout_message %}
Django Logout
{% endblock %}
</a>
</div>
{% else %}
<div class='btn authorize'>
<a id="auth" class="header__btn" href="{{ LOGIN_URL }}?next={{ request.path }}" data-sw-translate>
{% block django_login_message %}
Django Login
{% endblock %}
</a>
</div>
{% endif %}
{% endblock %}
</div>
{% endif %}
</body>
</html>
I tried adding a header that at extra body block, But it just add above the swagger header,
i just sufered with the same issue, i could solved it changing a variable of the swaggerUiConfig in the js section of the template. Inside the block "extra scripts" you need to overrite the attribute layout like this:
<script>
swaggerUiConfig.layout = "BaseLayout";
</script>
This will take of the black top bar fromt the UI.
Related
becuase i want to manuplate/add some html tags after html render and save into nunjucks (like before rendering);
nunjucks before render
<div class="ps-4">
<h1>{{heading}}</h1>
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
nunjucks after render and html modification
<div class="ps-4">
<h1>hello world</h1>
<img src="abc.png" />
<div class="px-4">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
<div>item 5</div>
</div>
</div>
and i want it like that
<div class="ps-4">
<h1>{{heading}}</h1>
<img src="abc.png" />
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
please solve and suggest any way to do this thing pleassssss
If you want the output to look like the original nunjucks logic you typed in, then you can try the following technique. On your HTML template within your nunjucks project...
<pre>
<code>
<div class="ps-4">
<h1>{{heading}}</h1>
<img src="abc.png" />
{% if isShowLi %}
<div class="px-4">
{% for item in items %}
<div>{{item.name}}</div>
{% endfor %}
</div>
{% endif %}
</div>
</code>
</pre>
{% asyncEach example in component.examples %}
{% include "./example.njk" %}
{% endeach %}
// example.njk
<article class="spectrum-CSSExample">
<h3 id="{{example.slug}}" class="spectrum-CSSExample-heading spectrum-Heading spectrum-Heading--sizeS">
{{example.name}}
<div class="{{ spectrum-StatusLight spectrum-StatusLight--sizeM spectrum-CSSExample-status spectrum-StatusLight--{{ util.getStatusLightVariant(example.status) }}">
{{example.status}}
</div>
</h3>
{# {% include "./exampleContent.njk" %} #}
</article>
In example.njk example is undefined. How can I pass example inside a include like this?
example is always undefined inside example.njk
I have this code:
<nav>
<ul>
{% for page in site.pages %}
{% if page.title %}
<li>{{ page.title }}</li>
{% endif %}
{% endfor %}
</ul>
</nav>
I don't have any pages with title yet but I may have in the future and tidy-html5, that I'm using to output html with indent, give warning that ul is empty. Without title check it output generated pages tags or global pages like sitemap or rss feed.
Is there a way to first filter array and then don't show nav if the array is empty, something like:
{% pages = [for page in pages if page.title] %}
{% if pages.length %}
<nav>
<ul>
....
</ul>
</nav>
{% endif %}
To get only pages with titles:
pages = site.pages.select{ |p| p.title }
So your code might look something like:
{% assign pages = site.pages.select{ |p| p.title } %}
{% if pages %}
<ul>
{% for page in pages %}
<li>...</li>
{% endfor %}
</ul>
{% endif %}
i am using CodeIgniter with Twig, i wonder how can i load only the content block
without refreshing the page. I've seen this topic has been discussed but with Sympony Framework which i'm not familiar with.
I want to load only the Block Content area without refresh, I've tried to load the controller with Ajax but it keeps loading the whole page - including the header, footer etc.
Thanks.
Here is the base file - base.twig :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ site_title }} | CRM</title>
{% include 'templates/css.twig' %}
</head>
<body class="skin-blue sidebar-mini" style="height: auto;">
<div class="wrapper">
{% include 'templates/header.twig' %}
{% include 'templates/side_bar.twig' %}
<div class="content-wrapper">
<!-- Main content -->
<section class="content">
<div id="{{ site_title }}">
{% block content %}
{% endblock %}
</div>
</section>
</div>
{% include 'notifications_modal.twig' %}
</div>
{% include 'templates/footer.twig' %}
</body>
</html>
Here is the controller - about.twig
class About extends MY_Controller {
public function __construct()
{
parent::__construct();
}
public function index()
{
$this->data['site_title'] = 'about';
$this->twig->display('about',$this->data);
}
}
And here is the view - about.twig
{% extends "base.twig" %}
{% block content %}
<div class="row">
<div class="col-md-12">
<h1>TO DO {{ site_title }}</h1>
</div>
</div>
{% endblock %}
I used isotope for my thumbnail images.
Everything works fine in my development server.
After I have updated my files in appfog using "af update".
The above page spits out this error in inspect element.
Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://neudev.hp.af.cm/static/plugin/css/isotope.css
Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://neudev.hp.af.cm/static/plugin/js/isotope.init.js
Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://neudev.hp.af.cm/static/plugin/js/isotope.js
Failed to load resource: the server responded with a status of 404 (NOT FOUND) http://neudev.hp.af.cm/portfolio/undefined?1367668124923
I try to check it inside appfog directory and i found out the files mentioned above do exists
advitor#ubuntu:~/workstation/neudev$ af files neudev app/neudev/staticfiles/plugin/js --all
====> [0: app/neudev/staticfiles/plugin/js] <====
camera.js 66.7K
camera.min.js 38.4K
isotope.init.js 808B
isotope.js 15.7K
jquery.easing.1.3.js 7.9K
jquery.min.js 91.7K
jquery.mobile.customized.min.js 17.1K
here is my template for the portfolio page
{% extends 'base.djhtml' %}
{% load humanize %}
{% block title %} | {{ title }}{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}defaults/css/pages/portfolio.css" />
<link rel="stylesheet" type="text/css" href="{{STATIC_URL}}plugin/css/isotope.css" />
{% endblock %}
{% block maincontent %}
<div class="row">
<div class="span12">
<div class="shelf">
<div class="shelfContainer">
<div class="tabbable tabs-left">
<!-- Only required for left/right tabs -->
<ul id="filters" class="nav nav-tabs">
<li class="active">
All
</li>
{% for c in cat %}
<li>
{{ c.title }}
</li>
{% endfor %}
</ul>
<div id="isotope-container" class="tab-content">
{% for p in folio %}
<div class="well well-small pull-left {{ p.category.id }}" style="margin-left: 20px">
<a href="#">
<img width="180px" src="{{ p.thumbnail.url }}" alt="{{ p.title }}" />
</a>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javascript %}
<script type="text/javascript" src="{{ STATIC_URL }}plugin/js/isotope.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}plugin/js/isotope.init.js"></script>
{% endblock %}
I don't know what is wrong here, i hope someone could help me.
Any help would be much appreciated.
I know now where i did wrong, I forgot to run collectstatic