Odoo 11.0 仅在呈现模板时将 css/scripts 或其他内容加载到 <head>
Odoo 11.0 load css/scripts or something else into <head> only when a template is rendered
我被这个问题困住了。
我有 2 个不同的模块,它们有不同的想法,所有两个都需要 Safari iOS WebApp 的标签,用于将网页添加为本机 APP:
<link rel="apple-touch-icon" href="ic_launcher-web.png"/>
<meta name="apple-mobile-web-app-title" content="Title"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
但问题是所有两个都被加载,因为我继承了 web.assets_frontend 并将它们添加到其中,这将把它们添加到 <head></head>
。
可以动态加载资源或者css和js资源吗?
诸如.. 当控制器呈现网页的相关模板时加载此模板?
仅在呈现模板 1 时将其添加
<template id="for_app_1">
<link rel="apple-touch-icon" href="ic_launcher-web1.png"/>
<meta name="apple-mobile-web-app-title" content="Title 1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
</template>
仅在呈现模板 2 时将其添加
<template id="for_app_2">
<link rel="apple-touch-icon" href="ic_launcher-web2.png"/>
<meta name="apple-mobile-web-app-title" content="Title 2"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
</template>
我找到了 addons/web/views/webclient_templates 的解决方案。xml
如您所见,他们定义了一个 <t t-set='head'>
并在其中定义了一个 <t t-call-assets>
,它调用上面定义的名为 assets_common
的模板。
因此,对于此 t-set='head'
和 t-call-assest
,他们仅在呈现模板 web.login_layout
时才将声明的 assets_common 放入 head 中!
<template id="web.login_layout" name="Login Layout">
<t t-call="web.layout">
<t t-set="html_data" t-value="{'style': 'height: 100%;'}"/>
<t t-set="head">
<t t-call-assets="web.assets_common" t-js="false"/>
<t t-call-assets="web.assets_frontend" t-js="false"/>
<t t-call-assets="web.assets_common" t-css="false"/>
<t t-call-assets="web.assets_frontend" t-css="false"/>
</t>
<t t-set="body_classname" t-value="'container'"/>
<div class="row">
<div class="col-md-6 col-md-offset-3 o_database_list">
<div class="text-center">
<img t-attf-src="/web/binary/company_logo{{ '?dbname='+db if db else '' }}"/>
</div>
<t t-raw="0"/>
<div class="text-center" t-if="not disable_footer">
<t t-if="not disable_database_manager">
<a class="" href="/web/database/manager">Manage Databases</a> |
</t>
<a href="https://www.odoo.com" target="_blank">Powered by <span>Odoo</span></a>
</div>
</div>
</div>
</t>
</template>
这里的 web.assets_common 声明了对模板 login_layout.
有用的所有 css 和 javascript
<template id="web.assets_common" name="Common Assets (used in backend interface and website)">
<t t-call="web.less_helpers"/>
<link rel="stylesheet" type="text/css" href="/web/static/lib/jquery.ui/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="/web/static/lib/fontawesome/css/font-awesome.css"/>
<link rel="stylesheet" type="text/less" href="/web/static/lib/bootstrap-datetimepicker/src/less/_bootstrap-datetimepicker.less"/>
<link rel="stylesheet" type="text/css" href="/web/static/lib/select2/select2.css"/>
<link rel="stylesheet" type="text/css" href="/web/static/lib/select2-bootstrap-css/select2-bootstrap.css"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/fonts.less"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/navbar.less"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/mimetypes.less"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/modal.less"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/animation.less"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/rainbow.less"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/datepicker.less"/>
<!-- And ore stuffs -->
</template>
因此,如果您只需要在精确模板中加载某些特定资产,您只需在模板内部的顶部元素中设置内部定义,然后在其中调用包含您需要的资产的模板。
参考:https://www.odoo.com/documentation/11.0/reference/javascript_reference.html#assets-management
我被这个问题困住了。 我有 2 个不同的模块,它们有不同的想法,所有两个都需要 Safari iOS WebApp 的标签,用于将网页添加为本机 APP:
<link rel="apple-touch-icon" href="ic_launcher-web.png"/>
<meta name="apple-mobile-web-app-title" content="Title"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
但问题是所有两个都被加载,因为我继承了 web.assets_frontend 并将它们添加到其中,这将把它们添加到 <head></head>
。
可以动态加载资源或者css和js资源吗? 诸如.. 当控制器呈现网页的相关模板时加载此模板?
仅在呈现模板 1 时将其添加
<template id="for_app_1">
<link rel="apple-touch-icon" href="ic_launcher-web1.png"/>
<meta name="apple-mobile-web-app-title" content="Title 1"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
</template>
仅在呈现模板 2 时将其添加
<template id="for_app_2">
<link rel="apple-touch-icon" href="ic_launcher-web2.png"/>
<meta name="apple-mobile-web-app-title" content="Title 2"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
</template>
我找到了 addons/web/views/webclient_templates 的解决方案。xml
如您所见,他们定义了一个 <t t-set='head'>
并在其中定义了一个 <t t-call-assets>
,它调用上面定义的名为 assets_common
的模板。
因此,对于此 t-set='head'
和 t-call-assest
,他们仅在呈现模板 web.login_layout
时才将声明的 assets_common 放入 head 中!
<template id="web.login_layout" name="Login Layout">
<t t-call="web.layout">
<t t-set="html_data" t-value="{'style': 'height: 100%;'}"/>
<t t-set="head">
<t t-call-assets="web.assets_common" t-js="false"/>
<t t-call-assets="web.assets_frontend" t-js="false"/>
<t t-call-assets="web.assets_common" t-css="false"/>
<t t-call-assets="web.assets_frontend" t-css="false"/>
</t>
<t t-set="body_classname" t-value="'container'"/>
<div class="row">
<div class="col-md-6 col-md-offset-3 o_database_list">
<div class="text-center">
<img t-attf-src="/web/binary/company_logo{{ '?dbname='+db if db else '' }}"/>
</div>
<t t-raw="0"/>
<div class="text-center" t-if="not disable_footer">
<t t-if="not disable_database_manager">
<a class="" href="/web/database/manager">Manage Databases</a> |
</t>
<a href="https://www.odoo.com" target="_blank">Powered by <span>Odoo</span></a>
</div>
</div>
</div>
</t>
</template>
这里的 web.assets_common 声明了对模板 login_layout.
有用的所有 css 和 javascript<template id="web.assets_common" name="Common Assets (used in backend interface and website)">
<t t-call="web.less_helpers"/>
<link rel="stylesheet" type="text/css" href="/web/static/lib/jquery.ui/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="/web/static/lib/fontawesome/css/font-awesome.css"/>
<link rel="stylesheet" type="text/less" href="/web/static/lib/bootstrap-datetimepicker/src/less/_bootstrap-datetimepicker.less"/>
<link rel="stylesheet" type="text/css" href="/web/static/lib/select2/select2.css"/>
<link rel="stylesheet" type="text/css" href="/web/static/lib/select2-bootstrap-css/select2-bootstrap.css"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/fonts.less"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/navbar.less"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/mimetypes.less"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/modal.less"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/animation.less"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/rainbow.less"/>
<link rel="stylesheet" type="text/less" href="/web/static/src/less/datepicker.less"/>
<!-- And ore stuffs -->
</template>
因此,如果您只需要在精确模板中加载某些特定资产,您只需在模板内部的顶部元素中设置内部定义,然后在其中调用包含您需要的资产的模板。
参考:https://www.odoo.com/documentation/11.0/reference/javascript_reference.html#assets-management