百度推出熊掌号很长时间了，虽然大伟哥一直想积极响应百度的号召，带着火热的基情投入熊掌号的怀抱，无奈人到中年琐事缠身，却有些力不从心，在申请帐号并通过了验证之后，一直没有对博客进行页面改造，自然也没办法进行内容提交了。不过伴随着 明月登楼持续鼓吹熊掌号的好处，大伟哥实在是不能眼看着便宜都被别人占去啊，无论怎么样都得抽时间把页面改造弄好才行。
大伟哥先在是各大 Drupal 群里问有没有人实现了 drupal 8 网站的熊掌号页面改造，想学习一下，但是很遗憾，没人回应，不知道是解决方法太简单还是熊掌号没有太大用途，大神们都不把这种小问题看在眼里。既然没人帮忙，大伟哥只好做第一个吃螃蟹的人了。
一、百度熊掌号页面改造的要求及分析
按照百度熊掌号的说明，所谓的页面改造，是要在页面的源代码的head 部分里，加入熊掌号ID 声明、Canonical 标签，以及一个结构化的 JSON_LD 数据标签，样式如下：
- <script src=“//msite.baidu.com/sdk/c.js?appid=熊掌ID号”>
- <link rel=“canonical” href=“http(s)://xxx”/>
- <script type=“application/ld+json”>
- {
- “@context”: “https://ziyuan.baidu.com/contexts/cambrian.jsonld”,
- “@id”: “https://内容url网址”,
- “appid”: “熊掌ID号”,
- “title”: “内容标题”,
- “images”: [
- “https://内容图片1.png”,
- “https://内容图片2.png”,
- “https://内容图片3.png”
- ],
- “description”: “内容简介”,
- “pubDate”: “2017-06-15T08:00:01（内容发布时间）”,
- “upDate”: “2017-06-16T01:02:03（内容更新时间）”,
- “lrDate”: “2017-06-17T09:10:11（最新回复时间）”
- }
- </script>
通过分析可以看到，整段个代码都是要添加到 head 标签里面的，因此大伟哥第一个想法，就是直接修改内容主题的模板，一般是由 /theme/theme_name/templates/html–node–%.html.twig 文件控制节点内容的 head 头部部分。在这个文件里，只要相应加入这些代码和正确的 twig 函数变量，就可以了。
目前的 drupal 8 网站，借助 metatag 模块，本身就用 Canonial 标签，所以这个可以不用另外添加，另外 JSON_LD 里面，images 部分是可选的，大伟哥的博客的内容里图片并不多，所以没有打算提交这个内容，另外 lrDate 也是可选的，去掉。
二、百度熊掌号页面改造测试过程
经过几天的测试，大伟哥发现在 node 内容里面的几个变量，不能在html head 里面正常获取，比如内容发布时间这个变量，在 node 模板里可以用 {{ date }} 获得正确的内容创建时间，但是在 html 模板里就不行，取得的是清除缓存以后再次生成页面的时间。同样，内容的概述也没法获得，反复测试好多次都不行，这使得大伟哥几乎要放弃通过修改 Drupal 主题模板来实现熊掌号页面改造这个思路了。
换一个思路试试看。如果自己不会开发模块的话，看看 Drupal 官网里有没有现成的模块吧。通过搜索，大伟哥发现一个叫做 Schema.org Metatag 的模块，能够在页面的头部插入 JSON_LD 结构化数据，而且可以直接调用 token 的内容：
试用结果发现，这个模块确实可以插入 JSON LD 数据，但是和熊掌号要求的样式还有一些区别，默认设置生成的数据不能符合熊掌号的要求。如果要使用这个模块来完成熊掌号页面改造，需要对这个模块里面的 schema article 子模块做些修改，或者以这个子模块为参考，开发一个新的子模块，这对大伟哥来说，就有点难度了。而且就算是用这种方式实现了熊掌号的页面改造，额外安装这些模块也显得有些“重”了。
两个思路似乎都有可能解决这个问题，但又都差了最后那么一步。最终大伟哥还是回到了第一个思路，因为这种方式不用安装额外的模块，显得比较轻量级。那如何取得我们想要的 twig 函数变量呢？可以在主题的 theme_name.theme 文件里使用预处理函数定义 twig 变量 {{ pubDate }}，{{ upDate }} 和 {{ description }}。
三、Drupal 8 网站百度熊掌号页面改造最终方案
通过多次测试，最终大伟哥使用 metatag 模块加入权威链接地址，并修改两个主题文件插入了熊掌号ID 声明和 JSON_LD 数据，实现了 Drupal 网站的百度熊掌号的页面改造。
首先，安装并启用 metatag 模块，在 Global 全局配置的高级部分，权威链接那里填入当前内容页的 token 值：[current-page:url:absolute]，这样就实现了 Canonical 标签这一部分。
其次，是修改主题的 .theme 文件，例如大伟哥的主题名称是daweibro,我们需要在 daweibro.theme 文件里通过预处理函数（preprocess）定义好 twig 变量：
- file: /theme/daweibro/daweibro.theme:
- function daweibro_preprocess_html(&$variables) {
- if ($node = \Drupal::request()->attributes->get(‘node’)){
- $variables[‘pubDate’] = \Drupal::service(‘date.formatter’)->format($node->getCreatedTime(), ‘custom’, ‘Y-m-d\Th:i:s’);
- $variables[‘upDate’] = \Drupal::service(‘date.formatter’)->format($node->getChangedTime(), ‘custom’, ‘Y-m-d\Th:i:s’);
- $variables[‘description’] = \Drupal::service(‘token’)->replace(‘[node:summary]’, [‘node’ => $node,]);
- $variables[‘description’] = html_entity_decode($variables[‘description’]);
- $variables[‘description’] = strip_tags($variables[‘description’]);
- }
- }
接下来我们需要修改 html–node–%.html.twig，把熊掌号ID 和JSON_LD 数据输出到网页的头部。这个文件在你的主题目录里不一定有，如果没有的话，可以复制本主题的 html.html.twig 的文件,如果本主题连这个文件也就有，就去找父主题甚至 classy 主题里面的文件，并重命名为 html–node–%.html.twig，在 <head> 与 </head> 标签之间加入下面的代码：
- file: html–node–%.html.twig:
- <script src=“//msite.baidu.com/sdk/c.js?appid=1585812004044365”></script>
- <script type=“application/ld+json”>
- {
- “@context”: “https://ziyuan.baidu.com/contexts/cambrian.jsonld”,
- “@id”: “{{ url(‘<current>’) }}”,
- “appid”: “1585812004044365”,
- “title”: “{{ head_title|safe_join(‘ | ‘) }}”,
- “images”: [],
- “description”: “{{ description }}”,
- “pubDate”: “{{ pubDate }}”,
- “upDate”: “{{ upDate }}”
- }
- </script>
完成之后，清理一下缓存，再刷新一下内容页面，查看源代码就能发现熊牚号页面改造需要添加的元素，都已经正确出现了。
最后解释一下，主题的预处理函数非常强大，可以把 Drupal 8 采用的 twig 模板需要的变量准备好供 twig 引擎调用。大伟哥只是大概了解 html 和 css，没有系统学习过 php 编程，这些代码基本是都是通过挪用/修改 Drupal 里面现成的代码不断测试之后才实现的。有空还是要学习一些 php 编程知识才行。
桂公网安备 45010502000016号