适用程序：Typecho
程序版本：1.2.1
文档作者：Lopwon
作者博客：Lopwon.com
发布页面：Lopwon.com/3508.html
注意：此文档源于作者在博客改造中的一些经验总结，转载还请署名。
敬告：此文档操作涉及程序核心文件的修改，作者不对你在使用中产生的任何问题造成的不良后果，承担责任。
文档说明
在 Typecho 论坛上看到一则 #需求帖子，虽然年代有些久远，源自2014年，但是觉得想法很是不错，就尝试着去实现它，在 ChatGPT 的协助下，完成了大部分的功能，除了没有涉及数据库外，基本满足了帖子提到的需求。
暂时没有做样式上优化，之后可能会做成插件，继续新增一些其他功能，比如：点击段落引用时，以弹窗的方式加载评论区；能够区分引用的和点评的内容；能够平滑滚动到锚点；引用段落显示小图标；段落被点评的次数……等等。
工作原理：Typecho 默认有 autoP 功能，以此作为段落的划分，这样就能对每个 <p> 添加 id 标记，用于引用和定位，另外，功能实现上也加入常用的引用元素 <blockquote>
主要功能：
1. 点击段落后，将该段落的截断内容（或图片）插入评论内容中，并跳至评论区。
2. 提交评论后，点击点评时引用的段落，也会跳至文章对应的段落。
3. 要注意的是，使用段落点评功能后，文章请勿再新增段落，否则，已提交引用且点评的段落会和编辑后文章段落的 id 对不上。当然，可以在保持段落位置和数量不变的情况下，对文章内容文字做编辑。
使用方法
A 涉及文件
usr/themes/***/footer.php
B 改造文件
作用：给文章段落添加点评功能
1. 后台》设置》评论，在（允许使用的HTML标签和属性）项里输入 <img src="">
2. 以上操作的作用是：让评论内容解析输出图片。
3. 打开你在用主题下的文件 footer.php 找个合适的位置添加以下代码（留意注释，以及按需修改）：
<script>
const container = document.querySelector('.post-content'); // 获取文章内容的容器元素 post-content（根据自己的主题修改）
const paragraphs = container.querySelectorAll('p'); // 获取文章内容所有的 <p> 元素（依据 Typecho 默认的 autoP 功能）
const blockquotes = container.querySelectorAll('blockquote'); // 获取文章内容所有的 <blockquote> 元素（即：引用）
const comments = document.querySelectorAll('.comment-content p'); // 获取评论内容所有的 <p> 元素（根据自己的主题修改，通常为 .comment-content p）
const textarea = document.getElementById('textarea'); // 获取评论内容的表单 <textarea> （根据自己的主题修改，通常为 textarea）
paragraphs.forEach((p, index) => { // 遍历文章内容所有 <p> 元素，并分配 id
const id = `p${index + 1}`; // 自定义 p 为前缀
p.setAttribute('id', id); // 添加 id
const imgElement = p.querySelector('img'); // 查找 <p> 元素中的 <img> 元素
if (imgElement) { // 如果 <p> 包含 <img> 元素，则将图片信息添加到 <textarea>
const imageSrc = imgElement.getAttribute('src'); // 获取图片的 src 属性
const imageAlt = imgElement.getAttribute('alt'); // 获取图片的 alt 属性
p.addEventListener('click', () => { // 添加点击事件处理程序
const imgTag = `<img src="${imageSrc}" alt="${imageAlt}" />`; // 添加到 <textarea> 的内容结构，如果不想显示图片，则改为 `${imageAlt}`（即：只显示 alt 部分）
addToTextarea(id, imgTag); // 添加标记信息，并传递给 addToTextarea 函数
focusTextarea(); // 调用 focusTextarea() 方法，使 <textarea> 获取焦点
textarea.scrollIntoView({ behavior: 'smooth' }); // 滚动到 <textarea> 的位置
});
} else { // 如果 <p> 不包含 <img> 元素，则将文本内容添加到 <textarea>
p.addEventListener('click', () => { // 添加点击事件处理程序
const content = p.textContent; // 定义内容
const maxLength = 32; // 设置截取的最大字数
const truncatedContent = truncateString(content, maxLength); // 截断后的内容
addToTextarea(id, truncatedContent); // 添加标记信息，并传递给 addToTextarea 函数
focusTextarea(); // 调用 focusTextarea() 方法，使 <textarea> 获取焦点
textarea.scrollIntoView({ behavior: 'smooth' }); // 滚动到 <textarea> 的位置
});
}
});
blockquotes.forEach((blockquote, index) => { // 遍历所有的 <blockquote> 元素，并分配 id
const id = `blockquote${index + 1}`; // 自定义 blockquote 为前缀
blockquote.setAttribute('id', id); // 添加 id
blockquote.addEventListener('click', () => { // 添加点击事件处理程序
const content = blockquote.textContent // 定义内容
const maxLength = 32; // 设置截取的最大字数
const truncatedBlockquote = truncateString(content, maxLength); // 截断后的内容
addToTextarea(id, truncatedBlockquote); // 添加标记信息，并传递给 addToTextarea 函数
focusTextarea(); // 调用 focusTextarea() 方法，使 <textarea> 获取焦点
textarea.scrollIntoView({ behavior: 'smooth' }); // 滚动到 <textarea> 的位置
});
});
function truncateString(str, maxLength) { // 截取字符串到指定长度
if (str.length > maxLength) { // 截取内容
return str.substring(0, maxLength) + '...'; // 输出内容，多出的以 ... 代替
}
return str;
}
function focusTextarea() { // 使 <textarea> 获取焦点的函数
textarea.focus();
}
function addToTextarea(paragraphId, content) { // 添加内容到 <textarea> 同时记录标记信息
const existingContent = textarea.value; // 获取 <textarea> 中已有的内容
const newLine = existingContent ? '\n' : ''; // 判断是否已有内容，如果有则另起一行
textarea.value += newLine + '\n' + `引用 [${paragraphId}]：${content} \n\n`; // 使用中括号来标记唯一标识符，并插入内容及空行
}
comments.forEach((p) => { // 遍历所有的 <comments> 元素
p.addEventListener('click', () => { // 添加点击事件处理程序
const targetDataId = p.textContent.match(/\[(.*?)\]/)[1]; // 只保留方括号里的 id 编码
const targetParagraph = container.querySelector(`#${targetDataId}`); // 查找文章内容中对应的 id
if (targetParagraph) {
targetParagraph.scrollIntoView({ behavior: 'smooth' }); // 滚动到文章内容对应 id 的位置
}
});
});
</script>
至此，已经可以通过点击文章段落点评该段落内容（或图片）了。
感谢观赏
支持作者：Buy Me a 冰棒
🐂！希望做成插件第一时间购买