博文

文档 v4

08yt

Textrim v4 的完整文档、配置、教程、使用方法以及其他设置模板功能和外观的技术信息。

Textrim v4 是一个免费的Blogger主题,适用于所有利基,如个人博客、新闻、教育、健康、教程等。它针对页面速度、SEO和战略性广告位进行了优化。请在下方免费下载最新版本的Textrim Blogger主题。

您可以自由下载、使用和修改此主题。

免费版本:请勿删除页脚的版权链接

高级(付费)版本:页脚的版权链接可以删除或修改。

教程仅提供印尼语版本。请使用Google翻译。

Textrim v4 文档和教程

Textrim v4 模板文档和教程

本文包含有关 Textrim v4 Blogger (Blogspot) 主题的完整文档、教程和解释。如果您想查看排版、如何创建各种元素(按钮、盒子、blockquote、表格、语法高亮等)或其他属性,请访问 Textrim v4 样式和格式文章。

1. 如何安装

以下是安装免费 Textrim v4 Blogger 模板的方法。

  • 解压已下载的 .zip 文件。
  • 找到名为 Textrim-v4.min.xml 的文件。
  • 有两种方法可供选择,如下所示。

1.1. 复制 HTML(推荐)

这种方法被推荐,因为它将直接产生与 Textrim 演示版本 100% 相同的外观。缺点是所有小部件内容(如广告代码、自定义小部件等)都将丢失。因此,在执行此方法之前,请务必先保存所有小部件代码。

  • 使用文本编辑器(如记事本、VSCode 或其他)打开 Textrim-v4.min.xml 文件。

  • 复制所有模板代码。

  • 在 Blogger 后台,进入 Theme (主题) > Edit HTML (编辑 HTML) 菜单。

  • 使用 CTRL + A 选择所有默认 HTML 代码,全部删除,然后粘贴 Textrim 模板代码。

  • 最后点击 Save theme (保存主题) 按钮。

1.2. 上传 XML

这种方法是安全的,因为之前已安装的所有小部件都不会被删除。但是,小部件的位置可能会混乱,因为它与 Textrim 模板的 HTML 代码不兼容。修复起来很简单,只需在 Layout (布局) 菜单中移动它们的位置即可。

  • 进入 Theme (主题) > Backup / Restore (备份/恢复) 菜单。
  • 如果要备份当前正在使用的主题,请点击 Download theme (下载主题) 按钮。
  • 然后直接点击 Choose File (选择文件) 按钮并找到 .xml 文件的位置来上传 Textrim 模板。
  • 最后,点击 Upload (上传) 按钮。

2. 安装后必须执行的重要事项

安装后必须执行两项操作,如下所示。

2.1. 设置语言

注意最顶行的以下代码: html lang='id-ID'

如果博客使用印尼语,则保持代码不变。但如果博客使用其他语言,请更改标记部分以匹配所使用的语言。例如,如果博客使用美式英语,则更改为 en-EN

我附上了一些语言代码示例。顺序是语言代码-国家代码。

有关其他语言代码,请查看以下链接:https://gist.github.com/igniel/26479cba86eca2177616221f5d3309b5

2.2. 设置评论

为了使评论显示与 Textrim 演示博客相似,请将评论类型更改为 Embedded (嵌入式)。进入 Settings (设置) > Comment location (评论位置) > Embedded (嵌入式)

Textrim v4 评论

3. Meta 标签

这部分作为 SEO 的一部分以及在社交媒体上分享链接时的补充属性非常重要。请用您自己的代码替换以下代码。

3.1. 博客图片

当在社交媒体上分享主链接(主页)时,此图片将出现。请用您自己的横幅图片或博客徽标的 URL 替换标记部分。

3.2. 作者信息

  • Your Name: 您的姓名

  • BLOGGER PROFILE: Blogger 个人资料 ID

  • ID FACEBOOK: Facebook 帐户或专页(页面)的 ID

  • @USERNAME_X: X (Twitter) 用户名

3.3. 跟踪代码

用于 Google Search Console 和 Bing Webmaster 验证。如果您还没有,只需删除所有这些代码行。如果您已经有,请更改标记部分。

4. 许可证

位于 Layout (布局) > LICENSE (许可证)。这部分仅在您购买了付费版本时填写。如果您使用的是免费版本,则留空即可。许可证小部件不能删除,因为它会导致部分脚本无法工作。因此,只需将其留空,但不要删除或隐藏其可见性。

Textrim v4 许可证

5. 功能设置

位于 Layout (布局) > Theme Settings (主题设置)。它包含一些功能的部分。

Textrim v4 设置 Textrim v4 功能

5.1. 数字分页

标有 navigation。数字分页只出现在索引页上。不包括在索引页(存档、搜索、标签)和文章中。

  • postpage: 每页显示的文章数量。数量 必须与 Blogger 设置中设定的页面数量相同。如果不同,则分页会混乱。

Textrim 数字分页

  • numpage: 出现的按钮数量。
  • prev: 指示上一页的文本。
  • next: 指示下一页的文本。
  • totalpage: 显示总页数的文本。例如,1 – 5 / 12,如果更改,可以变成“1 – 5 / 12”或“1 – 5 of 12”。

5.2. 文章底部相关文章

标有 relatedBottom。是主文章内容下方的一组相关文章。

  • num: 相关文章的数量。
  • image: 选择是否显示图片。true 表示使用图片,false 表示 不使用 图片。

如果要删除底部相关文章,请找到并 删除 此代码:

5.3. 文章内重复相关文章

标有 relatedMiddle。是主文章中重复出现的相关文章,并根据段落数量均匀分布。

  • num: 相关文章的数量。
  • image: 选择是否显示图片。true 表示使用图片,false 表示 不使用 图片。
  • text: 作为相关文章标题的文本。

如果要删除重复相关文章,请将 num 值设置为 0

5.4. 相关文章 noimage 图片

标有 relatedNoimage。是当相关文章没有图片时作为替代出现的图片。将图片 URL 更改为您自己的(如果需要)。

relatedNoimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzO-L_heuV6feQAXwMDIG2O9npBlokA6bbHLZ4z-jiHe40RjDrMQb0R6Kqxy6A-B7Q_8Q4-wLQ4K5GDB01QAlHuTpnQqjUER5J1PnJFH7PTCZw25H8jai0NzslJvlrHT8E1SHPItzxVs8j6zNVXsWZ-RoaHWb7myfifCBEnacO5OIVFUF0VVNZRYK52TA/s0/textrim-v4-noimg.png'

6. 更换颜色

可以直接在 Blogger 主题设计器中完成。

  • 进入 Theme (主题) > Customize (自定义)
  • 选择 Advanced (高级)
  • 根据需要调整所有部分。
  • 完成后,点击右下角的保存图标。

为了更容易更改深色模式显示,请像往常一样先在博客上激活深色模式(因为进入 Blogger 主题设计器菜单时无法点击深色模式图标),然后再进入此设置菜单。

Textrim v4 颜色更改方法

7. 更换字体

正如我们所知,Blogger 自带的字体种类很少。因此,为了有选择字体的自由,我使用了免费的 Google Fonts 服务。由于使用了第三方服务,字体不再能像 v3 及以下版本那样通过 Blogger 主题设计器进行更改。

要更改字体,请执行以下步骤:

  • 访问 https://fonts.google.com/

  • 选择您想要的字体和样式变体。非常重要 选择具有正常、粗体和斜体样式的字体。

  • 完成后,复制 位于末尾的代码(参见图片)。

Textrim v4 字体更改方法

向下滚动右侧部分,直到看到如下的 CSS font-family。先保存这部分,因为稍后会用到。

Textrim v4 字体更改方法

为避免错误,请更改并添加一些符号到已获取的代码中。请遵循书写方式。重点关注标记部分。例如,这是原始代码:

这是编辑后的代码:

关键是将符号 & 更改为 & 并在闭合标签之前添加符号 / (斜杠)

  • 进入主题的 HTML 设置。找到并 删除 以下代码:

用刚才删除的代码 替换 为新代码。

  • 仍在主题 HTML 中,找到以下代码:

--fontBody: 'Noto Sans'; --fontTitle: 'Noto Sans';

用刚才在 Google Fonts 上滚动的字体名称 替换 标记部分。在本例中,Google Fonts 中写入的代码如下:

font-family: 'Lato', sans-serif;

我们只会使用标记部分,因此最终结果如下:

--fontBody: 'Lato'; --fontTitle: 'Lato';

  • 别忘了 SAVE (保存) HTML 设置。

7.1. 使用两种不同的字体

标题字体和文章文本字体可以不同。但请记住,使用两种字体会稍微增加博客的加载时间。

与上述步骤相同,打开 Google Fonts 网站并选择两种不同的字体。

更改符号的书写方式以避免错误。

区别在于,这次将显示两个 font-family CSS 代码。

Textrim v4 字体更改方法

在主题 HTML 代码中,--fontBody: 用于文章文本的字体,而 --fontTitle 用于标题字体。例如,我将使用 ‘Lato’ 作为文章文本,‘Montserrat’ 作为标题字体。因此最终代码如下所示:

--fontBody: 'Lato'; --fontTitle: 'Montserrat';

8. 广告位置

一些广告可以直接通过 Layout (布局) 中标有蓝色框的小部件插入。有 4 个广告位置可以直接通过小部件安装,其中包括:

  • Ad billboard (广告牌广告)
  • Ad responsive (侧边栏响应式广告)
  • Ad sticky (粘性侧边栏广告)
  • Ad middle post (文章中部广告)

Textrim v4 广告位置

请务必勾选 Show this widget (显示此小部件) 以显示广告。

Textrim v4 安装广告方法

有几个广告位置必须通过 HTML 安装。其中包括:

8.1. 文章上方广告(标题下方)

找到以下代码,删除,并替换为广告代码。

8.2. 文章下方广告

找到以下代码,删除,并替换为广告代码。

8.3. 信息流广告

出现在主页信息流/文章列表之间的广告。要进行设置:

  • 找到以下代码:

这意味着广告将在第三篇文章后出现。根据需要更改标记的数字,以改变广告的出现位置。

  • 然后找到以下代码:

删除 标记部分以激活 HTML 代码,使其变为:

Ad InFeed GOES HERE

  • 最后,删除并将文本 Ad InFeed GOES HERE 替换为您的广告代码。

9. 添加新的 CSS 代码

添加新的 CSS 代码无需通过 HTML 复杂操作。可以直接通过以下设置使其更简单。

  • 进入 Theme (主题) > Customize (自定义)

  • 选择 Advanced (高级)

  • 在出现的下拉菜单中,选择 Add CSS (添加 CSS)

  • 将 CSS 代码输入到可用空间中。完成后,点击右下角的保存图标。

添加新的 CSS 代码

10. 标题导航菜单

Layout (布局) 中,找到名为 HEADER (标题) 的部分。编辑名为 Menu (菜单) 的小部件。根据需要更改菜单。

Textrim v4 模板中的标题菜单 更改 Textrim v4 顶部导航菜单

10.1. 下拉菜单

如果想添加下拉菜单,在 <li> - 父项中,请务必添加 dropdown 类。然后,在其下方添加 <ul> HTML 标签。

下拉菜单的完整代码大致如下:

Dropdown

  • Sub 1 <https://www.alamat.com>
  • Sub 2 <https://www.alamat.com>

11. 页脚菜单

Layout (布局) 中,找到名为 FOOTERTOP (页脚顶部) 的部分。有两个小部件可以设置,如下所示:

Textrim v4 页脚菜单

11.1. 页面列表

包含指向静态页面(page)的链接,但也可以包含指向其他博客地址的外部链接。编辑名为 Page Links (页面链接) 的小部件。要对链接位置进行排序,可以在设置中将其向上或向下拖动。

Textrim v4 页面列表小部件

11.2. 社交媒体

编辑名为 Social Media (社交媒体) 的小部件。已预装了一些社交媒体图标,如果不需要可以删除。

编辑所需的社交媒体列表,然后用您的社交媒体 ID 或用户名替换井号 # 符号。

Textrim v4 社交媒体小部件

12. 版权文本和链接

Layout (布局) 中,找到名为 FOOTERBOTTOM (页脚底部) 的部分。它包含两个小部件,即版权文本和版权链接。

Textrim v4 版权

12.1. 版权文本

编辑名为 Copyright (版权) 的小部件。这是页脚左侧的文字。根据需要更改文本。

更改 Textrim v4 版权文字

12.2. 删除 igniel.com 版权链接

这部分只能在您购买了高级版本后才能更改或删除。请阅读“Textrim 主题免费版和高级版的区别”文章,了解免费版和付费版的区别。

Textrim v4 免费 Blogger 主题的官方文档和完整教程内容到此结束。如果有什么遗漏或不足,请在下方评论,以便尽快添加。

发表评论