基于Hexo博客开通熊掌号及页面改造


熊掌号.png

# 注册熊掌号
关于注册熊掌号这一步,网上的教程已经很详细了,我在这里就不在叙述。依然不会的可以看这里,注意在填写注册信息的时候,填上自己网站主页的URL就好(URL一定要写正确,最好是打开你的网站复制粘贴)。

在申请开通熊掌号搜索资源服务时,一般会耗时一到两个工作日,申请之前一定要按照熊掌号落地页体验规范优化网站,否则不容易通过。而且网站的访问速度也是提升申请成功概率的一个重要因素(连续两次被拒换来的经验啊…蓝瘦香菇(づ╥﹏╥)づ)。

# 页面改造

页面改造主要包括两部分:

粉丝关注改造这个的作用主要是在页面中添加关注按钮。让用户在浏览您的页面时,通过关注按钮成为您的粉丝。效果如下:

QQ截图20180313201712.png

以及结构化改造这个的作用主要是使您提交的内容能在搜索结果中以结构化样式展现。同时每天还会从您提交的新增内容中随机抽取5条在您的手机百度熊掌号主页中展现。效果如下:


效果图.png

粉丝关注改造

这里只介绍基于H5页面的改造(原因就不解释了,如果你很想知道的话。( ﹁ ﹁ ) ~→ Guess)

添加熊掌号ID声明

将以下代码添加到页面的<head>标签中(这里具体添加至/blog/next/layout文件夹下的_layout.swing文件中)

1
<script src="//msite.baidu.com/sdk/c.js?appid=*************"></script>

这里的id以熊掌号id

添加关注功能代码

一下一共有三种展示bar(挑选自己喜欢的样式),将对应的代码添加到上一步的文件中。

吸顶bar
1
<script>cambrian.render('head')</script>

添加至<body>标签中。


up.png
文章段落间bar
1
<script>cambrian.render('body')</script>

添加至 段落之间


mid.png
底部bar
1
<script>cambrian.render('tail')</script>

添加至 文章结束位置


down.png

我们还可以使用padding-left、padding-right属性设置边距(需要自取)

以吸顶bar为例

1
2
3
<div style="padding-left: 17px; padding-right: 17px;">
<script>cambrian.render('head')</script>
</div>

添加完成之后可以先使用hexo s命令,在本地预览一下。

结构化改造

添加canonical标签

将以下代码添加至/blog/next/layout文件夹下的_layout.swing文件中

1
<link rel="canonical" href="http(s)://xxx"/>

这里的地址填写你的站点地址即可

添加JSON_LD

关于这一点,我几乎查遍了所有关于页面改造的文章,可惜一篇“对口味”的文章都没遇见,遇到的都是基于Wordpress的,而且还有好几个版本O__O “…
无奈只能自己折腾了。很幸运,最后被我折腾出来了(折腾的过程中IT微客网的VIE也给了不小建议,真的非常感谢)
首先我们先来了解下官方给出的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="application/ld+json">
{
"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
"@id": "https://ziyuan.baidu.com/college/articleinfo?id=1464",
"appid": "1594371542399137",
"title": "百度移动搜索落地页体验白皮书——广告篇2.0",
"images": [
"https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png",
"https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png",
"https://m.baidu.com/static/index/plus/plus_logo.png"
],
"description": "优质合理的广告作为信息的补充,广受用户喜欢。2017年初百度用户体验部针对用户进行了满意度调研,发现很多恶意低质的广告严重破坏着用户的搜索体验。",
"pubDate": "2017-06-15T08:00:01",
"upDate": "2017-06-16T01:02:03",
"lrDate": "2017-06-17T09:10:11"
}
</script>

1
2
3
4
5
6
7
8
9
@context:	必选字段,	请保留 “https://ziyuan.baidu.com/contexts/cambrian.jsonld”,若需要校验数据的schema,则可替换为schema地址
@id: 必选字段, 当前网页的url
appid: 必选字段, 熊掌号ID
title: 必选字段, 标题,建议长度:20个字符以内
images: 可选字段,搜索结果结构化信息展示,仅允许提供0张,1张图或3张图,更多要求请见结构化展现图片要求
description:可选字段,内容摘要:120个字符以内
pubDate: 必选字段, 内容发布时间
upDate: 可选字段,内容更新时间,如内容为首次创建,请填写与pubDate相同的时间;如页面是问答、论坛类,请填写用户可看到的第一个回答对应的时间
lrDate: 可选字段,最新回复时间,如页面是问答、论坛类且有回复信息,请在此字段填写最新一条回复对应的时间

这里的可选选项,可以根据自己的意愿选择

这里贴出我的配置

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 熊掌号页面改造  -->
<script type="application/ld+json">
{
"@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
"@id": "{{ page.permalink }}",
"appid": "熊掌号id", //这里根据自己的填写
"title": "{{ page.title }}", // 这里的变量都是直接调用的hexo page中的变量
"images": [{{ page.image }}],
"description": "{{ page.description }}",
"pubDate": "{{ date(Date.now(), "YYYY-MM-DD\THH:mm:ss") }}"
}
</script>

其中最麻烦的一个选项是pubDate,由于hexo中的时间显示的格式跟这个不一样,无法直接调用page.date。尝试了n多方法终于使用以上的方法校验成功了。

每一次折腾,都是一个学习的过程。希望这些经验能够帮到你们。 本人并非大佬,如果有错还望及时指教。

有收获再赞赏哦🤭
------ 本文结束感谢您的阅读-------------
0%