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

投稿   大伟哥博客  2018-01-12 07:27:07  186 人阅读  24 条评论

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

Drupal 8网站实现百度熊掌号的页面改造教程 建站经验 第1张

大伟哥先在是各大 Drupal 群里问有没有人实现了 drupal 8 网站的熊掌号页面改造,想学习一下,但是很遗憾,没人回应,不知道是解决方法太简单还是熊掌号没有太大用途,大神们都不把这种小问题看在眼里。既然没人帮忙,大伟哥只好做第一个吃螃蟹的人了。

一、百度熊掌号页面改造的要求及分析

按照百度熊掌号的说明,所谓的页面改造,是要在页面的源代码的head 部分里,加入熊掌号ID 声明、Canonical 标签,以及一个结构化的 JSON_LD 数据标签,样式如下:

  1. <script src="//msite.baidu.com/sdk/c.js?appid=熊掌ID号">
  2. <link rel="canonical" href="http(s)://xxx"/>
  3. <script type="application/ld+json">
  4.     {
  5.         "@context""https://ziyuan.baidu.com/contexts/cambrian.jsonld",
  6.         "@id""https://内容url网址",
  7.         "appid""熊掌ID号",
  8.         "title""内容标题",
  9.         "images": [
  10.             "https://内容图片1.png",
  11.             "https://内容图片2.png",
  12.             "https://内容图片3.png"
  13.             ],
  14.         "description""内容简介",
  15.         "pubDate""2017-06-15T08:00:01(内容发布时间)",
  16.         "upDate""2017-06-16T01:02:03(内容更新时间)",
  17.         "lrDate""2017-06-17T09:10:11(最新回复时间)"
  18.     }
  19. </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 变量:

  1. file: /theme/daweibro/daweibro.theme:
  2. function daweibro_preprocess_html(&$variables) {
  3.     if ($node = \Drupal::request()->attributes->get('node')){
  4.     $variables['pubDate'] = \Drupal::service('date.formatter')->format($node->getCreatedTime(), 'custom', 'Y-m-d\Th:i:s');
  5.     $variables['upDate'] = \Drupal::service('date.formatter')->format($node->getChangedTime(), 'custom', 'Y-m-d\Th:i:s');
  6.     $variables['description'] = \Drupal::service('token')->replace('[node:summary]', ['node' => $node,]);
  7.     $variables['description'] = html_entity_decode($variables['description']);
  8.     $variables['description'] = strip_tags($variables['description']);
  9.   }
  10. }

接下来我们需要修改 html--node--%.html.twig,把熊掌号ID 和JSON_LD 数据输出到网页的头部。这个文件在你的主题目录里不一定有,如果没有的话,可以复制本主题的 html.html.twig 的文件,如果本主题连这个文件也就有,就去找父主题甚至 classy 主题里面的文件,并重命名为 html--node--%.html.twig,在 <head> 与 </head> 标签之间加入下面的代码:

  1. file: html--node--%.html.twig:
  2.     <script src="//msite.baidu.com/sdk/c.js?appid=1585812004044365"></script>
  3.     <script type="application/ld+json">
  4.       {
  5.         "@context""https://ziyuan.baidu.com/contexts/cambrian.jsonld",
  6.         "@id""{{ url('<current>') }}",
  7.         "appid""1585812004044365",
  8.         "title""{{ head_title|safe_join(' | ') }}",
  9.         "images": [],
  10.         "description""{{ description }}",
  11.         "pubDate""{{ pubDate }}",
  12.         "upDate""{{ upDate }}"
  13.       }
  14.     </script>

完成之后,清理一下缓存,再刷新一下内容页面,查看源代码就能发现熊牚号页面改造需要添加的元素,都已经正确出现了。

最后解释一下,主题的预处理函数非常强大,可以把 Drupal 8 采用的 twig 模板需要的变量准备好供 twig 引擎调用。大伟哥只是大概了解 html 和 css,没有系统学习过 php 编程,这些代码基本是都是通过挪用/修改 Drupal 里面现成的代码不断测试之后才实现的。有空还是要学习一些 php 编程知识才行。

其他 CMS 程序的百度熊掌号页面改造实现方法

历史上的今天:

文章标签: ,   ,   ,  
原文地址:https://www.daweibro.com/node/186
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 大伟哥博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
大伟哥博客

相关文章 分类热门分类热评最新问答

 发表评论(本站有缓存,一般1个小时后可看到您的评论)

中国赞表情摊手表情吃瓜表情笑哭表情偷笑表情衰表情汗表情思考表情费解表情抓狂表情晕表情流泪表情疑问表情嘻嘻表情吃惊表情鼓掌表情

  1. 唯历史
    唯历史 @回复

    百度了一下,才发现drupal这么牛呀

    • 懿古今
      懿古今2018-01-13 19:48  回复

      @唯历史[偷笑] 白宫官网已经从drupal转到WordPress了

    • 大伟哥博客
      大伟哥博客 作者回复2018-01-14 17:03  回复

      @唯历史各有各的好,不用纠结。用合适的工具做合适的事情就可以了。反过来,程序功能再强大,没有好的内容、运营和推广,然并卵。

  2. 马超金博客
    马超金博客 @回复

    看起来好麻烦啊

  3. 励志语录
    励志语录 @回复

    熊掌号不喜欢注册 [困]

  4. 瓜瓜哥哥
    瓜瓜哥哥 @回复

    或许多年以后百度会成为历史是

  5. Mr.Li
    Mr.Li @回复

    我做了半年百家号,最近两天盈利了6毛多 [黑线] ,现在这些什么号越来越多,都来不及消化了 [思考]

  6. 8S分享网
    8S分享网 @回复

    没玩过这个程序,不知道有没有人喜欢折腾这个程序了

  7. 银色月航
    银色月航 @回复

    支持大伟哥!~~

  8. 雅兮网
    雅兮网 @回复

    好多博客系统啊,WordPress还没玩转呢

  9. 桓宇SEO博客
    桓宇SEO博客 @回复

    表示根本没听过这个平台

  10. 靠谱学生兼职网
    靠谱学生兼职网 @回复

    变来变去的,我看也未必是什么好东西。百度站长哪去了?

  11. 姜辰
    姜辰 @回复

    = =其实,没啥必要搞这个。

    引入的JS会让网站慢得多。

  12. 历史趣谈LishiQtan
    历史趣谈LishiQtan @回复

    这是个什么程序,我怎么没有听说过

  13. 手机赚钱
    手机赚钱 @回复

    来看看有什么新东西可以学的

  14. 西枫里博客
    西枫里博客 @回复

    我没搞明白熊掌号的推广渠道在哪里?手机百度吗?

  15. 小苍老师
    小苍老师 @回复

    32个赞

  16. 明月登楼
    明月登楼 @回复

    厉害了!这个博客平台我就没有搞定过!╯□╰!