Opencart Twig中如何仅在所需页面的head标签添加元素？

针对你的需求，这里有三种实用的实现方法，都是Opencart环境下Twig的常规操作：

方法一：控制器标记+模板判断（最灵活） #

1. 在目标页面控制器中添加标识变量
   打开产品页控制器文件 catalog/controller/product/product.php，找到index方法，在输出模板的代码前，添加一个标记变量：

   // 放在$this->response->setOutput($this->load->view(...))之前
   $data['is_product_page'] = true;
   

2. 在header.twig中判断加载
   打开common/header.twig，在<head>标签内添加条件判断：

   {% if is_product_page %}
       <link rel="stylesheet" href="{{ asset('catalog/view/theme/你的主题名/css/product-custom.css') }}">
       <script src="{{ asset('catalog/view/theme/你的主题名/js/product-custom.js') }}"></script>
   {% endif %}
   

   其他页面只要在对应控制器中添加类似的标记变量，就能在header里实现按需加载。

方法二：Twig Block块扩展（模板层面解耦） #

Opencart的模板支持Twig的继承机制，你可以通过定义空block来实现页面专属内容注入：

1. 在header.twig中定义自定义block
   在<head>标签内添加一个空的block：

   {% block custom_head_content %}{% endblock %}
   

2. 在Product.twig中扩展该block
   打开product/product.twig，在模板开头继承基础布局后，重写这个block：

   {% extends 'common/layout.twig' %}
   
   {% block custom_head_content %}
       <link rel="stylesheet" href="{{ asset('catalog/view/theme/你的主题名/css/product-custom.css') }}">
       <script src="{{ asset('catalog/view/theme/你的主题名/js/product-custom.js') }}"></script>
   {% endblock %}
   

   这种方式不需要修改控制器，完全在模板层面完成专属内容的添加。

方法三：Opencart原生Asset添加（最省心） #

Opencart自带了document对象来管理页面的样式和脚本，直接在控制器中调用即可自动注入到header：
打开产品页控制器catalog/controller/product/product.php，在index方法中添加：

// 添加专属样式
$this->document->addStyle('catalog/view/theme/你的主题名/css/product-custom.css');
// 添加专属脚本
$this->document->addScript('catalog/view/theme/你的主题名/js/product-custom.js');

这种方法不需要修改任何模板文件，Opencart会自动把这些资源加到页面的<head>中，只有当前页面加载时才会引入，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Brandon Backes