Symfony结合Encore时如何根据URL动态设置页面title和meta标签
可以实现,共有两种常用实现方式,可根据项目场景选择:
方案1:子模板重写Block(推荐,灵活性最高)
这种方案适合页面多、每个页面meta和title差异大的场景,只需要先改造基础模板,将title和meta区域封装为可重写的block即可。
第一步:修改基础模板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> {# 将title设置为可重写block,保留默认值 #} <title>{% block title %}Homepage{% endblock %}</title> {# 新增自定义meta的block预留位置 #} {% block custom_metas %}{% endblock %} {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} </head> <body> <div id="app"> {% block body %}{% endblock %} </div> {% block javascripts %} {{ encore_entry_script_tags('app') }} {% endblock %} </body> </html>
第二步:子模板重写对应block
不同路径对应的子模板继承基础模板后,直接重写对应block即可,比如/profile路径对应的子模板:
{% extends 'base.html.twig' %} {% block title %}个人中心{% endblock %} {% block custom_metas %} <meta name="description" content="用户个人中心,支持修改个人信息、查看订单等操作"> <meta name="keywords" content="个人中心,账号设置,我的订单"> {% endblock %} {% block body %} {# 页面主体内容 #} {% endblock %}
方案2:基础模板全局路径匹配(适合规则统一的场景)
如果不想每个子模板单独配置,可直接在基础模板中通过全局的app.request对象获取当前路径,做规则匹配后动态输出内容。
示例代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> {% set current_path = app.request.pathinfo %} {% if current_path starts with '/profile' %} <title>个人中心</title> <meta name="description" content="个人中心专属描述"> {% elseif current_path == '/' %} <title>首页</title> <meta name="description" content="首页专属描述"> {# 复杂正则匹配可以用matches过滤器 #} {% elseif current_path matches '#^/article/\d+$#' %} <title>文章详情页</title> <meta name="description" content="文章详情页面"> {% else %} <title>默认页面标题</title> <meta name="description" content="默认站点描述"> {% endif %} {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %} </head> <!-- 后续body部分保持原有逻辑即可 -->
两种方案对比
- 子模板重写方案:灵活性更高,支持每个页面自定义完全不同的title和meta内容,适合中大型项目
- 全局路径匹配方案:配置集中维护成本低,适合页面数量少、匹配规则统一的小型项目
内容的提问来源于stack exchange,提问作者S S
相关产品推荐
相关产品推荐

