Inblog
开始使用

自定义博客设计

从左侧边栏中，点击“设计”即可开始自定义博客的外观和风格。

从左侧边栏中，点击 设计 即可开始自定义博客的外观和风格。

  • Logo

    • 上传您的 Logo，并设置点击 Logo 后的跳转目标 URL。
    • 推荐尺寸：250×150 或 400×200

  • 页眉按钮

    • 可从两种按钮类型中选择：
      • Subscribe Form
        • “点击按钮时显示获客表单。”
        • 表单内容和设置可在 Form 选项卡中进行配置。
      • 跳转到输入的 URL
        • 将按钮链接到任意内部/外部 URL。

  • Navigation Bar

    • Primary Navigation
      • 在博客顶部设置固定菜单栏。
    • Dropdown Menu
      • 配置点击菜单项时显示的下拉项。

  • Custom Code

    • 您还可以注入自定义 CSS 或 HTML，以完全符合您网站的品牌规范。

  • Blog Title & Description

    • 自定义博客首页上显示的标题和描述文本。

  • 文本颜色

    • 设置横幅文本的颜色。

  • Banner Layout

    • 选择文本对齐方式：左对齐或居中对齐。

  • Background (Color or Image)

    • 自定义横幅背景：
      • 设置纯色背景颜色
      • 或上传背景图片
        • 推荐尺寸：桌面端为 1680×450 / 移动端为 390×300

  • Custom Code

    • 您还可以注入自定义 CSS 或 HTML，以完全符合您网站的品牌规范。

Layout

  • inblog 提供三种默认文章布局供您选择。

  • 您还可以通过自定义代码应用额外的视觉定制。

    • Custom Code：使用 HTML/CSS 实现完全量身定制的布局。

  • 在页脚区域添加您的公司信息。

  • 与其他区域一样，页脚也可以通过代码进行自定义。

输入并保存自定义代码

如果代码字段不可见或无法编辑，请首先检查您博客的订阅计划。免费方案（Free plan）锁定了自定义代码设置。如果您的博客可以使用自定义代码，请打开 设计 → 通用，并为您想要更改的区域开启 自定义页头、自定义横幅代码 或 自定义页脚代码 开关。开关关闭时，页面会显示 Switch ON to insert custom ... code. 提示消息，而不是编辑器。对于文章列表布局，请在 Layout 区域启用其自定义代码设置。

Header、Banner、Layout 和 Footer 下的 Custom Code 区域均使用相同的编辑器。顶部为 HTML 输入框，下方为 样式 CSS 输入框。您可以直接输入 CSS 规则，或如下所示将其包裹在 <style> 标签中。当您应用代码时，新增或编辑的 CSS 规则将自动被包裹在 <style> 标签中。

<style>
  h2 {
    font-size: 20px;
  }
</style>

未更改的已保存 CSS 将予以保留。 编辑其他设置或仅编辑 HTML 不会转换现有的 CSS。若要激活以前保存的无标签 CSS，请检查并明确将其包裹在 <style> 标签中。在保存前请在预览中检查设计。 不完整的 CSS 规则或 <style> 块，以及诸如 cover 等预设名称，将产生红色文本的错误提示。请勿在 CSS 字段中添加 HTML 或脚本。如果现有字段中已包含这些内容，您可以编辑其 CSS 内容，同时保持其他代码、样式属性和顺序不变。

仅在完成以下两个步骤后，您的代码才会应用到博客：

  1. 点击 应用代码。代码将被验证并反映在编辑器内的预览中。此时尚未保存。
  2. 点击固定在设置面板顶部的 保存。只有完成此步骤后，更改才会在您的博客上正式生效。

如果您点击了 应用代码，然后在未保存的情况下离开设计界面，您的更改将会丢失。当您尝试带着未保存的更改离开时，系统会显示确认对话框。

  • 自定义代码按界面和区域分别存储。 设计界面顶部的 通用、首页 / 分类、文章、作者 和 404 选项卡各自保存其独立的代码，并且在 通用 内部，Header、Banner 和 Footer 也都是独立的输入框。请在要更改的界面所对应的选项卡中输入代码 — 例如，在 文章 选项卡下调整文章正文的间距。
  • 宽泛的 CSS 选择器（例如 a 或 button）可能会影响整个博客。在这种情况下编辑器会显示警告 — 如果您希望规则仅应用于某一区域，请缩小选择器的作用范围。

404 错误页面

  • 当用户访问不存在的 URL 时，您可以为其配置自定义的 404 错误页面。

移动端预览支持

  • “您的博客设计完全是响应式的。”您可以直接在编辑器中预览博客在桌面端和移动端视图下的呈现效果。

最后更新 2026-10-14

上一页博客设置概览下一页管理团队成员