Drupal 8网站实现百度熊掌号的页面改造

By 大伟哥 |

百度推出熊掌号很长时间了，虽然大伟哥一直想积极响应百度的号召，带着火热的基情投入熊掌号的怀抱，无奈人到中年琐事缠身，却有些力不从心，在申请帐号并通过了验证之后，一直没有对博客进行页面改造，自然也没办法进行内容提交了。不过伴随着明月登楼持续鼓吹熊掌号的好处，大伟哥实在是不能眼看着便宜都被别人占去啊，无论怎么样都得抽时间把页面改造弄好才行。

大伟哥先在是各大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的内容：

Schema.org Metatag：

This project extends Drupal's Metatag module to display structured data as JSON LD in the head of web pages. Either hard-code properties or identify patterns using token replacements. Using the override system in Metatag module you can define default structured data values for all content types, override the global content defaults for a particular content type, or even override everything else on an individual node to provide specific values for that node.

试用结果发现，这个模块确实可以插入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编程知识才行。

另外，其他CMS程序的百度熊掌号页面改造实现方法可以参考下面链接：

WordPress 如何用好百度熊掌号
Typecho 博客站点的百度熊掌号页面改造教程
推荐两款zblogPHP站点百度熊掌号插件

网站建设
Drupal

评论

添加新评论

此字段内容将保密，不会被其他人看见。
关于文本格式
  • 不允许使用HTML标签。
CAPTCHA
7 + 7 =
计算出这道简单的算术题并键入答案。例如、1+3,就输入 4。
发布评论前，请通过下面的验证，以免被当作垃圾评论机器人屏蔽。