博客编辑时如何添加页面中书签

Question

EXCEL VBA能开发游戏了,迷你Raylib 3D游戏引挚-CSDN博客
https://blog.csdn.net/xiaoyao961/article/details/158731453

转到目录：为什么能支持这么多通用3D模型格式
这里无法添加当前页的链接 #model
可以改一下博客编辑器吗？
我输入链接#开头的，就不要改掉变成：http://#model

最好可以加个按钮，设置选中文本书签,实际就是给span添加了一个id,

Answer 1

上午好☀️☀️☀️️
本答案参考通义千问

你提到的问题是关于在博客编辑器中添加书签（即锚点链接）时，系统自动将 #model 这样的链接转换为 http://#model，导致无法正确生成页面内的书签。这通常是因为编辑器的自动链接识别功能引起的。

以下是你提出问题的解决方案和建议，重点部分已加粗，并以有序列表形式展示：

---

1. 问题分析

• 原因：大多数博客平台（如CSDN、WordPress等）的富文本编辑器会自动识别以 # 开头的字符串为“URL”，并将其转换为完整的 URL 格式，例如 http://#model。
• 目标：希望保留 #model 这样的格式，用于页面内书签（锚点链接）。

---

2. 解决方案

(1) 禁用自动链接识别功能

• 如果你有权限修改博客编辑器的配置或使用自定义 HTML 模式：
  • 在编辑器中切换到 HTML 模式（非可视化模式）。
  • 手动插入锚点标签，如 <a name="model"></a> 或 <span id="model"></span>。
  • 使用 <a href="#model">跳转到模型部分</a> 来创建书签链接。

注意： 不要直接输入 #model，否则编辑器可能会自动识别为 URL。

(2) 使用 HTML 实现书签

• 在需要设置书签的位置插入如下代码：

  <span id="model"></span>
  

• 在需要跳转的地方插入：

  <a href="#model">跳转到模型部分</a>
  

加粗说明：这种方式可以完全避免编辑器对 # 的自动处理，因为它是纯 HTML 代码，不是普通文本。

(3) 添加“设置书签”按钮（可选）

• 如果你希望在编辑器中有一个“设置书签”的按钮，可以考虑以下方法：
  • 使用自定义插件：如果你是 CSDN 博客作者，可能没有权限开发插件，但你可以联系管理员请求支持。
  • 使用 JavaScript 自定义功能（适用于前端开发人员）：
    • 在网页中添加一个按钮，点击后将选中的文字作为书签 ID 插入到当前光标位置。
    • 示例代码如下：

<button onclick="addBookmark()">设置书签</button>

<script>
function addBookmark() {
    var selection = window.getSelection().toString();
    if (selection.trim() === "") {
        alert("请选择一段文字作为书签！");
        return;
    }
    var span = document.createElement("span");
    span.id = selection.trim().replace(/\s+/g, "_"); // 替换空格为下划线
    span.contentEditable = false;
    document.execCommand("insertHTML", false, "<span id='" + span.id + "'>" + selection + "</span>");
}
</script>

加粗说明：此脚本可以在网页上实现“设置书签”功能，但需要你拥有对网页内容的编辑权限。

---

3. 修改博客编辑器配置（如果可行）

• 如果你是博客平台的管理员或开发者，可以尝试修改编辑器的配置，关闭“自动识别链接”功能。
• 例如，在 WordPress 中，可以通过插件（如 “Disable Auto Linking”）来禁用该功能。

---

4. 建议与总结

• 推荐做法：在 HTML 模式下手动插入 <span id="model"></span> 和 <a href="#model">...</a>。
• 高级做法：添加自定义按钮，允许用户选择文本并插入书签。
• 注意事项：不要直接输入 #model，以免被编辑器误认为是 URL。

---

5. 示例代码（最终版）

以下是完整的 HTML 代码示例，可以直接插入到你的博客文章中：

<!-- 设置书签 -->
<span id="model"></span>

<!-- 跳转链接 -->
<a href="#model">跳转到模型部分</a>

---

如有更多关于 CSDN 博客编辑器的定制需求，也可以进一步咨询 CSDN 官方支持。