无头模式下的摇尾预览。
wagtail-headless-preview的Python项目详细描述
Wagtail Headless Preview
概述
wagtail作为后端，前端有一个单独的应用程序（例如一个单页的react应用程序），编辑器不再能够预览他们的更改。这是因为前端不再由Wagtail直接控制。因此，预览数据需要向前端应用程序公开。
此包通过将预览路由到指定的前端url，在无头设置中使用时启用wagtail页面的预览。
设置
使用pip安装：
pip install wagtail-headless-preview
安装模块后，将wagtail_headless_preview添加到设置文件中已安装的应用：
# settings.pyINSTALLED_APPS=[...'wagtail_headless_preview',]
运行迁移：
$ ./manage.py migrate
然后使用HEADLESS_PREVIEW_CLIENT_URLS设置配置预览客户端url。
对于单个站点，配置应该如下所示：
HEADLESS_PREVIEW_CLIENT_URLS={'default':'http://localhost:8020/',}
对于多站点设置，请将每个站点添加为单独的条目：
HEADLESS_PREVIEW_CLIENT_URLS={'default':'http://localhost:8020/','site1.example.com':'http://localhost:8020/','site2.example.com':'http://localhost:8021/',}
也可以使用HEADLESS_PREVIEW_LIVE设置启用实时预览功能：
# settings.pyHEADLESS_PREVIEW_LIVE=True
注意：您的前端应用程序必须设置为实时预览，此功能通常需要Django Channels或其他websocket/async库。
用法
将HeadlessPreviewMixin添加到页面类：
fromwagtail_headless_preview.modelsimportHeadlessPreviewMixinclassMyWonderfulPage(HeadlessPreviewMixin,Page):pass
我的前端应用程序将如何显示预览内容？
这取决于你的项目，因为它将取决于你的前端应用程序的要求。
下面的示例使用wagtail api端点访问预览- 您的应用可能会选择使用GraphQL访问页面预览。
示例
此示例设置一个api端点，该端点将返回页面的预览，然后在简化的演示前端应用程序上显示该数据。
- 将
wagtail.api.v2添加到已安装的应用：
# settings.pyINSTALLED_APPS=[...'wagtail.api.v2',]
- 在项目目录中创建一个
api.py文件：
fromdjango.contrib.contenttypes.modelsimportContentTypefromwagtail.api.v2.endpointsimportPagesAPIEndpointfromwagtail.api.v2.routerimportWagtailAPIRouterfromwagtail_headless_preview.modelsimportPagePreviewfromrest_framework.responseimportResponse# Create the router. "wagtailapi" is the URL namespaceapi_router=WagtailAPIRouter('wagtailapi')classPagePreviewAPIEndpoint(PagesAPIEndpoint):known_query_parameters=PagesAPIEndpoint.known_query_parameters.union(['content_type','token'])deflisting_view(self,request):page=self.get_object()serializer=self.get_serializer(page)returnResponse(serializer.data)defdetail_view(self,request,pk):page=self.get_object()serializer=self.get_serializer(page)returnResponse(serializer.data)defget_object(self):app_label,model=self.request.GET['content_type'].split('.')content_type=ContentType.objects.get(app_label=app_label,model=model)page_preview=PagePreview.objects.get(content_type=content_type,token=self.request.GET['token'])page=page_preview.as_page()ifnotpage.pk:# fake primary key to stop API URL routing from complainingpage.pk=0returnpageapi_router.register_endpoint('page_preview',PagePreviewAPIEndpoint)
- 注册api url，以便django可以将请求路由到api:
# urls.pyfrom.apiimportapi_routerurlpatterns=[...path('api/v2/',api_router.urls),...# Ensure that the api_router line appears above the default Wagtail page serving routepath('',include(wagtail_urls)),]
有关配置wagtail api的更多信息，请参阅Wagtail API v2 Configuration Guide
- 接下来，在项目根目录中添加一个
client/index.html文件。这将查询api以显示我们的预览：
<!DOCTYPE html><html><head><script>functiongo(){varquerystring=window.location.search.replace(/^\?/,'');varparams={};querystring.replace(/([^=&]+)=([^&]*)/g,function(m,key,value){params[decodeURIComponent(key)]=decodeURIComponent(value);});varapiUrl='http://localhost:8000/api/v2/page_preview/1/?content_type='+encodeURIComponent(params['content_type'])+'&token='+encodeURIComponent(params['token'])+'&format=json';fetch(apiUrl).then(function(response){response.text().then(function(text){document.body.innerText=text;});});}</script></head><bodyonload="go()"></body></html>
- 安装django cors头文件：
pip install django-cors-headers - 将cors config添加到您的设置文件中，以允许前端访问api
CORS_ORIGIN_ALLOW_ALL=TrueCORS_URLS_REGEX=r'^/api/v2/'
然后跟着setup instructions for django-cors-headers的其余部分。
- 正常启动站点：
./manage.py runserver 0:8000 - 在
http://localhost:8020/服务前端client/index.html- 这可以通过在客户机目录中运行
python3 -m http.server 8020来完成
- 这可以通过在客户机目录中运行
- 在wagtail管理界面中，编辑（或创建）并预览使用
HeadlessPreviewMixin
预览页面现在应该显示预览的api响应！
这是一个真正的前端将接管和显示预览，因为它将在现场看到。
学分
欢迎加入QQ群-->： 979659372
