受新冠肺炎 (COVID-19) 发展态势影响,为防范感染风险,保障支持专家的健康安全,我们减少了服务团队的当值人手。感谢您的耐心等待,联系产品专家所需的时间可能比平常更长。如需其他支持,请访问发布商中心帮助中心

个性化您的 RSS 报道样式

重要提示:此功能仅适用于特定的内容版块,这些版块必须已配置为偏好直接从 Feed 呈现报道。

如需自定义 RSS 报道在 Google 新闻中的显示样式,您可以使用发布商中心内提供的报道模板或 CSS 选项。

使用 CSS 自定义您的报道

作为发布商,您可以使用“报道样式”功能自定义 RSS 报道的呈现效果。若要开始此流程,请按以下步骤操作:

  1. 登录发布商中心
  2. 选择您的出版物。
  3. 点击 Google 新闻
  4. 点击 Feed 报道
  5. 在您的刊物的 CSS 输入框中输入相应 CSS。
  6. 点击保存并预览以保存和预览所做的更改。
  7. 保存 CSS 后,右侧的预览面板会显示您所做的样式更改的效果。
    • 提示:您可以在 Android 或 iOS 设备上使用 Google 新闻设计人员模式来预览已保存的样式。对样式所做的更改最多可能需要 1 分钟才会显示在设计人员模式中。
  8. 要公开显示 CSS 样式,请点击发布
    • 新发布的样式会在 2 小时内反映在 Google 新闻中。

Google 新闻 HTML

Google 新闻不会原样呈现发布商在其 Feed 中使用的 HTML。当 Google 新闻将发布商生成的报道添加到库中并将其转换为客户端可以读取的数据时,它无法区分某些标记。所以,如果您为会转换成同一个标记的 2 个不同标记设定样式,Google 新闻便会报告语法错误。例如,如果同时为 <div> 和 <p> 标记添加样式,便会产生语法错误。

下面是 Google 新闻对发布商生成的报道 HTML 会做的一些更改:

发布商标记 Google 新闻标记
<div> <p>
<em> <i>
<strong> <b>
<small> <cite>
<strike> <s>
<del> <s>

允许使用的元素选择器

HTML 元素

Google 新闻发布商中心支持以下 HTML 标记:

  • <a>

  • <b> | <strong>

  • <blockquote>

  • <cite> | <small>

  • <del> | <s> | <strike>

  • <div> | <p>

  • <em> | <i>

  • <h1>

  • <h6>

  • <ol>

  • <q>

  • <sub>

  • <sup>

  • <u>

  • <ul>

重要提示:两个标记之间的“|”表示,由于 HTML 元素会发生更改(参见上文),系统仅会为其中一个标记设定样式。

Google 新闻元素

在 Google 新闻发布商中心内,您可以使用自定义的 Google 新闻元素来设置报道的样式。请查看下面列出的可用元素:
Google 新闻元素 说明 屏幕截图示例
<ns-caption-copyright> 图片的版权信息 1
<ns-caption> 图片下方的说明文字 2
<ns-edition-name> 出版物名称标题 3
<ns-author-timestamp> 作者和发布时间标题文字 4
<ns-author-timestamp-separator> 作者和发布时间之间的点 5
<ns-slideshow-copyright> 幻灯片下方的版权信息 6
<ns-slideshow-caption> 幻灯片下方的说明 7
<ns-subtitle> 报道的副标题 8
<ns-title> 新闻报道的标题文字 9
<ns-header-divider> 报道标题和作者时间戳之间的分隔线 10
<ns-logo> 报道顶部的徽标 11

CSS 样式示例

通过修改下方示例中所示的 CSS,您可为您的 Google 新闻报道中的某些元素设定样式:

CSS 示例

/* 所有链接均显示为红色。*/
a { color: #cc0000; }
/* 所有报道文字均显示为黑色、水平居中并且位于白色背景上。*/
p {
color: #000000;
-ns-block-align: center;
/* 为“p”标记设置 background-color 会设定整篇报道的背景。*/
background-color: #FFFFFF;
/*“p”标记中的字体设置会成为“默认”样式,并会被其他标记中的样式规则覆盖。*/
font-weight: 300;
font-size: 14sp;
font-style: normal;
vertical-align: baseline;
}
/* 还可为 Google 新闻专用元素设置样式!*/
ns-title {
font-weight: 700;
text-decoration: underline;
}
/*
* 使用属性“class="style-id:firstHeaderOne"”设定所有标记的样式,让文字显示为红色。
* 受影响 HTML 的示例:<h1 class="style-id:firstHeaderOne">
*/
[style-id="firstHeaderOne"] { color: #cc0000; }
/*
* 版块专用样式替换值。请使用相应版块的名称。
* 例如:要让“热门新闻”版块中的所有链接显示为灰色,请这样设置:
*/

a [section="Top News"] { color: #0c0c0c; }
/* 样式 ID 专用样式可与版块样式替换值结合使用。*/
[style-id="my-style-id"] [section="Top News"] { background-color: #cc0000; }
/* 您还可为在平板电脑上呈现的报道编写自定义样式。*/
[style-id="my-style-id"] [section="Top News"] [device="tablet"] { background-color: #cc0000; }

Google 新闻的专用 CSS 扩展程序

样式 ID 选择器

如需将某种样式应用于 style-id:my-style-id 类中的所有元素,请使用样式 ID 选择器,而非元素选择器:
[style-id="my-style-id"] { color: #cc0000; }

版块选择器

版块选择器必须与样式 ID 选择器或元素选择器结合使用。您可以针对版块的专用样式替换值使用版块选择器:

/* 将所有版块设置为白底黑字。*/

p { color: #000000; background-color: #FFFFFF; }

/*

* 将“热门新闻”版块设置为黑底白字。

*“section=”后面的值必须是有效的版块名称。

*/

p [section="Top News"] { color: #FFFFFF; background-color: #000000; }

设备选择器

设备选择器必须与样式 ID 选择器或元素选择器结合使用。您可以针对设备的专用样式替换值使用设备选择器:

/* 为所有设备设置白底黑字。*/

p { color: #000000; background-color: #FFFFFF; }

/*

* 让报道在平板电脑设备上以黑底白字形式显示。

* 此选择器目前只能使用“all”和“tablet”这两个值。

*/

p [device="tablet"] { color: #FFFFFF; background-color: #000000; }

允许使用的属性声明和值

Google 新闻仅允许以下 5 类 CSS 属性声明:

关于“dp”和“sp”。

使用的测量单位是密度无关像素 (dp) 而不是像素 (px),因为不同的设备具有不同的像素密度。使用 dp 能够确保样式在像素密度不同的设备上获得相同的显示效果。

缩放无关像素 (sp) 通常与 dp 相同,但也取决于用户的字体大小设置。如果用户将字体放大,则 sp 的大小也会随之增大。

如需详细了解 dp 和 sp,请查阅 Material Design 参考指南

可用的区块样式

名称
line-height decimal-number | percentage
text-align left | right | center | justify
-ns-block-align left | right | center
-ns-display visible | gone

margin

margin-right

margin-left

margin-top

margin-bottom

dp | sp {1, 2, 4}

dp | sp

dp | sp

dp | sp

dp | sp

padding

padding-right

padding-left

padding-top

padding-bottom

dp | sp {1, 2, 4}

dp | sp

dp | sp

dp | sp

dp | sp

文字样式

名称
font-family <family-name>
font-size dp | sp
font-weight bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-style normal | italic
letter-spacing dp | sp
text-decoration none | underline | line-through
text-transform capitalize | uppercase | lowercase | none
vertical-align baseline | super | sub

HR 样式

名称
-ns-hr-width dp | sp
-ns-hr-align left | right | center
-ns-hr-thickness dp | sp

区块和文字样式

名称
background-color <hex-color>

Span 和 HR 样式

名称
color <hex-color>

 

立即前往发布商中心进行操作

该内容对您有帮助吗?
您有什么改进建议?
搜索
清除搜索查询
关闭搜索框
Google 应用
主菜单
搜索支持中心
true
100499
false