如何将swagger-ui模板与DRF和Django-Rest-framwork-Swagger集成？
[英]How to integrate swagger-ui template with DRF and Django-Rest-framwork-Swagger?
问题描述
I am using Django & DRF to write REST APIs. 
我正在使用Django和DRF编写REST API。 Recently I integrated django-rest-framework-swagger to automatically populate the API docs. 最近，我集成了django-rest-framework-swagger以自动填充API文档。
Today, I came across swagger-ui template [ https://github.com/jensoleg/swagger-ui] and now want to replace default swagger theme with this one. 今天，我遇到了swagger-ui模板[ https://github.com/jensoleg/swagger-ui] ，现在想用此模板替换默认的swagger主题。
What I tried already? 我已经尝试过了吗？
I copied all the contents of the dist directory into /venv/lib/python2.7/site-packages/rest_framework_swagger/static/rest_framework_swagger directory. 我将dist目录的所有内容复制到/venv/lib/python2.7/site-packages/rest_framework_swagger/static/rest_framework_swagger目录。 But it didn't work (UI doesn't look good at all). 但这没有用（UI看起来一点也不好）。
1 个解决方案
解决方案1
0 2016-12-16 03:11:53
To customize django-rest-swagger ui template, all you need to do is include rest_framework_swagger/index.html in your root template directory. 要自定义django-rest-swagger ui模板，您需要做的就是在根模板目录中包含rest_framework_swagger/index.html 。 In my case, I had all of this under my own templates directory which was just the under the actual project folder. 就我而言，所有这些都位于我自己的templates目录下，而该目录恰好位于实际项目文件夹下。
This index.html file should look similar to this: 该index.html文件应类似于以下内容：
{% extends 'rest_framework_swagger/index.html' %}
{% load staticfiles %}
<!-- Your custom code -->
To see their already existing template: 要查看其现有模板，请执行以下操作：
{% load staticfiles %}
{% spaceless %}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>{% block title %}Swagger UI{% endblock %}</title>
{% block style %}
<link href="//fonts.googleapis.com/css?family=Droid+Sans:400,700" rel="stylesheet" type="text/css"/>
<link href="{% static 'rest_framework_swagger/css/highlight.default.css' %}" media="screen" rel="stylesheet" type="text/css"/>
<link href="{% static 'rest_framework_swagger/css/atelier-dune.light.css' %}" media="screen" rel="stylesheet" type="text/css"/>
<link href="{% static 'rest_framework_swagger/css/rest_framework_swagger.css' %}" media="screen" rel="stylesheet" type="text/css"/>
<link href="{% static 'rest_framework_swagger/css/screen.css' %}" media="screen" rel="stylesheet" type="text/css"/>
{% endblock %}
</head>
<body>
{% block body %}
{% block header %}
<div id="header">
<div class="swagger-ui-wrap">
{% block branding %}
<a id="logo" href="http://swagger.wordnik.com">swagger</a>
{% endblock %}
{% block api_selector %}
<form id="api_selector">
<div class="input icon-btn">
<img id="show-wordnik-dev-icon" src="{% static 'rest_framework_swagger/images/wordnik_api.png' %}" title="Show Wordnik Developer Apis">
</div>
<div class="input"><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
<div class="input"><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
<div class="input"><a id="explore" href="#">Explore</a></div>
</form>
{% endblock %}
</div>
</div>
{% endblock %}
{% block django_rest_swagger %}
<div id="django-rest-swagger">
<div class="swagger-ui-wrap">
<a href="https://github.com/marcgibbons/django-rest-swagger/">Django REST Swagger</a>
</div>
</div>
{% endblock %}
<div id="message-bar" class="swagger-ui-wrap"></div>
<div id="swagger-ui-container" class="swagger-ui-wrap"></div>
<script>
window.static_url = "{{ STATIC_URL }}";
</script>
<script src="{% static 'rest_framework_swagger/lib/shred.bundle.js' %}" type="text/javascript"></script>
<script src="{% static 'rest_framework_swagger/lib/jquery-1.8.0.min.js' %}" type="text/javascript"></script>
<script src="{% static 'rest_framework_swagger/lib/jquery.slideto.min.js' %}" type="text/javascript"></script>
<script src="{% static 'rest_framework_swagger/lib/jquery.wiggle.min.js' %}" type="text/javascript"></script>
<script src="{% static 'rest_framework_swagger/lib/jquery.ba-bbq.min.js' %}" type="text/javascript"></script>
<script src="{% static 'rest_framework_swagger/lib/jquery.cookie.js' %}" type="text/javascript"></script>
<script src="{% static 'rest_framework_swagger/lib/handlebars-1.0.0.js' %}" type="text/javascript"></script>
<script src="{% static 'rest_framework_swagger/lib/underscore-min.js' %}" type="text/javascript"></script>
<script src="{% static 'rest_framework_swagger/lib/backbone-min.js' %}" type="text/javascript"></script>
<script src="{% static 'rest_framework_swagger/lib/swagger.js' %}" type="text/javascript"></script>
<script src="{% static 'rest_framework_swagger/swagger-ui.min.js' %}" type="text/javascript"></script>
<script src="{% static 'rest_framework_swagger/lib/highlight.8.0.pack.js' %}" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
window.swaggerUi = new SwaggerUi({
url: '{{ swagger_settings.discovery_url }}',
apiKey: '{{ swagger_settings.api_key }}',
dom_id: 'swagger-ui-container',
supportedSubmitMethods: {{ swagger_settings.enabled_methods }},
onComplete: function (swaggerApi, swaggerUi){
log('Loaded SwaggerUI')
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
},
onFailure: function (data) {
log('Unable to Load SwaggerUI');
},
docExpansion: '{{ swagger_settings.doc_expansion }}',
csrfCookieName: {{ django_settings.CSRF_COOKIE_NAME }}
});
$('#input_apiKey').change(function () {
var key = $('#input_apiKey')[0].value;
log('key: ' + key);
if (key && key.trim() != '') {
console.log('added key ' + key);
window.authorizations.add('key', new ApiKeyAuthorization('Authorization', '{{ swagger_settings.token_type }} ' + key, 'header'));
}
});
{% if swagger_settings.api_key %}
window.authorizations.add('key', new ApiKeyAuthorization('Authorization', '{{ swagger_settings.token_type }} ' + '{{ swagger_settings.api_key }}', 'header'));
{% endif %}
{# Add version to Accept header, if AcceptHeaderVersioning is used. #}
{% if swagger_settings.api_version and rest_framework_settings.DEFAULT_VERSIONING_CLASS == 'rest_framework.versioning.AcceptHeaderVersioning' %}
window.authorizations.add('version', {
apply: function(obj, authorizations) {
$.each(obj.headers, function(k, v) {
if (k.toLowerCase() === "accept") {
if (v.indexOf('; version=') === -1) {
obj.headers[k] += "; version={{ swagger_settings.api_version }}";
}
return false; // break.
}
});
return true;
}
});
{% endif %}
window.swaggerUi.load();
});
</script>
{% endblock %}
</body>
</html>
{% endspaceless %}
This library code is found in rest_framework_swagger/base.html and their rest_framework_swagger/index.html simply looks like this: 可以在rest_framework_swagger/base.html找到此库代码， 它们的 rest_framework_swagger/index.html看起来像这样：
{% extends 'rest_framework_swagger/base.html' %}
{# Override this template in your own templates directory to customize #}
NOTE: This solution works well with rest_framework_swagger 0.3.x. 注意：此解决方案与rest_framework_swagger 0.3.x一起使用效果很好。 Their latest rest_framework_swagger (2.x), has a breaking change and I strongly recommend not to use it as you cannot do much customizations (eg. can't use YAML strings). 他们最新的rest_framework_swagger（2.x）发生了重大变化 ，我强烈建议您不要使用它，因为您不能做太多自定义操作（例如，不能使用YAML字符串）。 I am using 0.3.x for my project and it's working absolutely fine. 我在我的项目中使用0.3.x，并且运行正常。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.