你有没有想过，同行的网页标题为何总能瞬间抓住注意力？秘诀往往藏在标签里。本文将手把手示范如何根据像素宽度调控字数、把核心关键词摆到最显眼的位置，并借助情感词汇和年份数字放大点击欲望。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">结合实战案例，你将学会把理论转化成可直接复用的模板，让每一次改标题都实实在在推高流量和转化。</span></p><h2 data-tool="markdown.com.cn编辑器" style="margin-bottom: 15px;font-weight: bold;color: black;margin: 10px auto;font-size: 20px;background-color: rgb(251, 251, 251);border-bottom: 1px solid rgb(246, 246, 246);margin-top: 20px;text-align: left;"><span style="display: none;"></span><span style="margin-left: -10px;display: inline-block;width: auto;background-color: rgb(33, 33, 34);border-bottom-right-radius: 100px;color: rgb(255, 255, 255);padding-right: 30px;padding-left: 30px;line-height: 40px;font-size: 18px;text-align: left;"><span leaf="">为什么标题标签很重要呢？</span></span></h2><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">标题标签就是指<title>标签，它是谷歌明确表示的排名因素之一，是谷歌SEO页面优化中最重要的一部分。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">标题标签<title>里面的是网页标题，有时候被称作SEO标题，SEO页面标题，或者元标题，你只需要知道它们表达的都是同一个东西即可。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">这个标签的作用是让搜索引擎知道你给网页设置的标题是什么，在网页视觉效果呈现上就是像这样子：</span></p><figure data-tool="markdown.com.cn编辑器" style="margin: 0;margin-top: 10px;margin-bottom: 10px;"><span leaf=""><img src="https://vpic.xiaoyanger.net/mmbiz_png/nU26bia3taGJ67hedGN6Y34udUZpu7dHAniaIYxcYNNBpiaW1bSJ88iczM8kSSKg7P3zNOKaPXbjgmyvuO9eHWcqIA/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.20989304812834225" data-type="png" data-w="748" style="width: auto;max-width: 100%;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: 2px 4px 7px #999;" data-imgfileid="100000789" /></span></figure><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「标题标签会影响SEO的排名。」</span></strong><span leaf=""> 像谷歌这样的语义化搜索引擎，它是会通过这个标签里面的内容来了解你的网页是关于什么的。标题和正文内容不一致，会直接影响到排名结果。所以务必保证SEO标题和网页内容一致，否则很难在相关搜索中获得良好的排名。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「标题标签影响用户点击率。」</span></strong><span leaf=""> 在搜索引擎中，title标签里面的内容是会直接出现在搜索结果中的。一个好的<title>标签能够增加点击率（CTR），从而影响你网站获得的流量。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「标题标签决定浏览器选项卡中的内容。」</span></strong><span leaf=""><span textstyle="" style="font-weight: bold;">标题标签告诉浏览器该如何显示你的页面标题</span>，正确使用标题标签有助于用户打开多个页面标签的时候进行准确的切换。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">如果你不写标题，谷歌会自动生成一个，但它可能不如你自己写的好。因此每个重要网页都要给他们起一个独特的标题。为了做好On-Page SEO，还需要在标题标签、元描述、H1-H6标签、URL链接和网页内容中包含目标关键词。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">那么遵循下面一些撰写页面标题的经验规则能够帮你获得更高的排名、获得更多的流量以及更好的用户体验：</span></p><h2 data-tool="markdown.com.cn编辑器" style="margin-bottom: 15px;font-weight: bold;color: black;margin: 10px auto;font-size: 20px;background-color: rgb(251, 251, 251);border-bottom: 1px solid rgb(246, 246, 246);margin-top: 20px;text-align: left;"><span style="display: none;"></span><span style="margin-left: -10px;display: inline-block;width: auto;background-color: rgb(33, 33, 34);border-bottom-right-radius: 100px;color: rgb(255, 255, 255);padding-right: 30px;padding-left: 30px;line-height: 40px;font-size: 18px;text-align: left;"><span leaf="">如何写出高点击率的标题?</span></span></h2><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">谷歌在SERP（搜索引擎结果页面）中展示的标题不是用字符数来衡量的，而是固定的像素宽度。只是说字符数是一个比较容易衡量的标准，总不能让我们肉眼去看我们的标题大概是多少个像素吧。那谷歌搜索结果中合适的标题宽度如下：</span></p><ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;color: #595959;list-style-type: circle;" class="list-paddingleft-1"><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「桌面端理论上是 600 像素，但为了避免被截断或改写，建议标题长度控制在 580 px 以内。对应约 55–60 个英文字符；」</span></strong></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「移动端展示宽度略窄，建议标题长度控制在 530–550像素以内，对应 50–55 个英文字符」</span></strong></section></li></ul><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">那么就意味着超过60个英文字符谷歌可能会在搜索结果中将你的标题截断；如果标题过短，则很难描述你的页面是关于什么的。</span></p><h3 data-tool="markdown.com.cn编辑器" style="color: black;font-size: 18px;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;"><span style="display: none;"></span><span style="border-bottom: 2px solid rgba(0, 88, 204, 0.7);color: #2b2b2b;padding-bottom: 2px;"><span style="width: 30px;height: 30px;display: block;background-position: center;background-size: 30px;margin: auto;opacity: 1;background-repeat: no-repeat;margin-bottom: -8px;"></span><span leaf="">1. 避免标题全大写</span></span><span style="display: none;"></span></h3><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">英文中，大写字母（如“W”“M”）宽度更大，如果整段标题都使用大写，更容易超出像素限制被截断，且可读性差，不推荐使用。</span></p><figure data-tool="markdown.com.cn编辑器" style="margin: 0;margin-top: 10px;margin-bottom: 10px;"><span leaf=""><img src="https://vpic.xiaoyanger.net/mmbiz_png/nU26bia3taGJ67hedGN6Y34udUZpu7dHAoskN51WQ6f5bAPia2IbrF0MgpCqvlHV07aIiaQx1GlaAXAfdm2Vkw1tQ/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.20741758241758243" data-type="png" data-w="728" style="width: auto;max-width: 100%;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: 2px 4px 7px #999;" data-imgfileid="100000790" /></span></figure><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「而且要注意不同语言的宽度差异」</span></strong><span leaf="">，一般 中文字符宽度=英文字符宽度 * 2，也就是说中文标题（包括简体和繁体）的</span><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「PC端理想字符数差不多是25-30个」</span></strong><span leaf="">，移动端屏幕略窄，因此建议将</span><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「中文 Title 控制在 20-28 个全角汉字」</span></strong><span leaf="">之间；这样基本可以保证在 Google等手机 SERP 上不会被“...”截断，也为英文或符号预留少量像素空间。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">我们可以使用<a class="normal_text_link" target="_blank" style="" href="https://mp.weixin.qq.com/s?__biz=MzE5ODg1OTc2NA==&mid=2247484389&idx=1&sn=fa590e260a5cf60ad38045620dbb39cd&scene=21#wechat_redirect" textvalue="SEO插件" data-itemshowtype="0" linktype="text" data-linktype="2">SEO插件</a>来帮我们确定标题是否过长，</span><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「但是需要注意的是这类插件对中文的支持不如英文」</span></strong><span leaf="">：</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf=""><img src="https://vpic.xiaoyanger.net/mmbiz_png/nU26bia3taGJ67hedGN6Y34udUZpu7dHAqM8yg9B1jyPiarqHsCwIA9oJNCaO54CdqehIgSt53exZF5icFv2vvC9Q/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.30697674418604654" data-type="png" data-w="645" style="width: auto;max-width: 100%;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: 2px 4px 7px #999;" data-imgfileid="100000791" /> Rank Math SEO插件中呈现的页面标题在谷歌SERP中的预览。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf=""><img src="https://vpic.xiaoyanger.net/mmbiz_png/nU26bia3taGJ67hedGN6Y34udUZpu7dHAoskN51WQ6f5bAPia2IbrF0MgpCqvlHV07aIiaQx1GlaAXAfdm2Vkw1tQ/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.20741758241758243" data-type="png" data-w="728" style="width: auto;max-width: 100%;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: 2px 4px 7px #999;" data-imgfileid="100000793" /> 网页标题在谷歌SERP中的实际结果还是会被截取。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">这个是需要额外注意一下的，可以使用RankMath来评估我们的标题是否过长，打开单个页面的编辑界面，然后在最下面找到RankMath模块，点击“Edit Snippet”即可。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: rgb(43, 43, 43);margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: center;"><span leaf=""><img src="https://vpic.xiaoyanger.net/mmbiz_png/nU26bia3taGJ67hedGN6Y34udUZpu7dHAuqF91UZZCroFhBp7icR02JfrIJSbPviaqk7kFvq1xexCMd08G1Fs9bTw/640?wx_fmt=png&from=appmsg" alt="RankMath给我们提示的标题像素宽度" class="rich_pages wxw-img" data-ratio="0.5098934550989346" data-type="png" data-w="657" style="width: auto;max-width: 100%;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: rgb(153, 153, 153) 2px 4px 7px;" data-imgfileid="100000792" /> RankMath给我们提示的标题像素宽度。</span></p><h3 data-tool="markdown.com.cn编辑器" style="color: black;font-size: 18px;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;"><span style="display: none;"></span><span style="border-bottom: 2px solid rgba(0, 88, 204, 0.7);color: #2b2b2b;padding-bottom: 2px;"><span style="width: 30px;height: 30px;display: block;background-position: center;background-size: 30px;margin: auto;opacity: 1;background-repeat: no-repeat;margin-bottom: -8px;"></span><span leaf="">2. 网站名品牌名可以不加在标题当中</span></span><span style="display: none;"></span></h3><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">如果你需要在标题里面加的内容和关键词比较多，那么我们可以省略网站名和品牌名。通常使用SEO插件能够帮我们全局控制是否需要在网页中保留/去掉品牌名，而且有时候谷歌会帮我们的网站在SERP上自动补充品牌名。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">例外的情况是品牌在市场中有比较高的知名度，这样的话可以添加品牌名在网站标题中，能够显著提高点击率。</span></p><h3 data-tool="markdown.com.cn编辑器" style="color: black;font-size: 18px;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;"><span style="display: none;"></span><span style="border-bottom: 2px solid rgba(0, 88, 204, 0.7);color: #2b2b2b;padding-bottom: 2px;"><span style="width: 30px;height: 30px;display: block;background-position: center;background-size: 30px;margin: auto;opacity: 1;background-repeat: no-repeat;margin-bottom: -8px;"></span><span leaf="">3. 使用符号节省空间</span></span><span style="display: none;"></span></h3><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">比如说&可以代替 and 节省两个字符的空间；用冒号（:）或者竖线（|）代替破折号（——）。比如说我的这篇文章标题。使用冒号（：）将破折号替换掉（——）可以节省出一点的像素空间，我用li列表排列起来可能你们能够看得比较清楚：</span></p><ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;color: #595959;list-style-type: circle;" class="list-paddingleft-1"><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">谷歌SEO标题(Title)优化——如何写出高点击率标题？(含案例)</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">谷歌SEO标题(Title)优化：如何写出高点击率标题？(含案例)</span></section></li></ul><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><em style="font-style: normal;color: #3594F7;font-weight: bold;"><span leaf="">你也可以使用英文的:来替代中文的：节约一点像素空间。</span></em></p><h3 data-tool="markdown.com.cn编辑器" style="color: black;font-size: 18px;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;"><span style="display: none;"></span><span style="border-bottom: 2px solid rgba(0, 88, 204, 0.7);color: #2b2b2b;padding-bottom: 2px;"><span style="width: 30px;height: 30px;display: block;background-position: center;background-size: 30px;margin: auto;opacity: 1;background-repeat: no-repeat;margin-bottom: -8px;"></span><span leaf="">4. 围绕目标关键词创建标题标签</span></span><span style="display: none;"></span></h3><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「标题里面必须包含关键词」</span></strong><span leaf="">，目的是让谷歌知道你的页面跟用户所想搜索的东西是相关的。将关键词放在开头（前置）可以吸引搜索者的注意并提高可见度，但主要目标是吸引用户点击。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">可以用这样的范式来确定你的标题：</span><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「确定主要关键词 >> 找到对应长尾关键词 >> 加入强力的情感词汇 >> 突出特点 >> 格式化标题」</span></strong></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">那我们下面就使用这个范式来实操一下，给不同类型的页面写一个高点击的SEO标题。</span></p><h2 data-tool="markdown.com.cn编辑器" style="margin-bottom: 15px;font-weight: bold;color: black;margin: 10px auto;font-size: 20px;background-color: rgb(251, 251, 251);border-bottom: 1px solid rgb(246, 246, 246);margin-top: 20px;text-align: left;"><span style="display: none;"></span><span style="margin-left: -10px;display: inline-block;width: auto;background-color: rgb(33, 33, 34);border-bottom-right-radius: 100px;color: rgb(255, 255, 255);padding-right: 30px;padding-left: 30px;line-height: 40px;font-size: 18px;text-align: left;"><span leaf="">针对不同类型的页面写SEO标题</span></span></h2><h3 data-tool="markdown.com.cn编辑器" style="color: black;font-size: 18px;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;"><span style="display: none;"></span><span style="border-bottom: 2px solid rgba(0, 88, 204, 0.7);color: #2b2b2b;padding-bottom: 2px;"><span style="width: 30px;height: 30px;display: block;background-position: center;background-size: 30px;margin: auto;opacity: 1;background-repeat: no-repeat;margin-bottom: -8px;"></span><span leaf="">Affiliate文章的标题写法（列表类文章页适用）</span></span><span style="display: none;"></span></h3><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">用我之前做的一个sewing niche里面的缝纫机来举例。</span></p><ol style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;list-style-type: decimal;font-size: 15px;color: #595959;" class="list-paddingleft-1"><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">确定主要关键词：sewing machine。</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">通过关键词研究找到sewing machine的长尾关键词，例如sewing machine for quilting（举个例子而已，SEMrush中显示KD为18，但是检查了一下SERP页面，搜索难度仍然较高）。</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">加入一些强力的情感词汇。如“Fast”、“Easy”、“Ultimate”、“Best”等词汇可以通过唤起情感和承诺有价值的内容来增强页面标题。这里我们用Best。所以现在的页面标题就变成了Best sewing machine for quilting</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">加入一些词汇或符号突出你的内容与众不同之处。比如数量、年份、内容深度等，我们这里选数量，于是标题就成了7 best sewing machine for quilting (A buyer's guide)</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">正确格式化标题，保持格式一致。可以采用英文标题式写法（主要词汇首字母大写，定介连词小写）：7 Best Sewing Machine for Quilting (A Buyer's Guide)【473个像素】</span></section></li></ol><h3 data-tool="markdown.com.cn编辑器" style="color: black;font-size: 18px;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;"><span style="display: none;"></span><span style="border-bottom: 2px solid rgba(0, 88, 204, 0.7);color: #2b2b2b;padding-bottom: 2px;"><span style="width: 30px;height: 30px;display: block;background-position: center;background-size: 30px;margin: auto;opacity: 1;background-repeat: no-repeat;margin-bottom: -8px;"></span><span leaf="">信息类文章的标题写法</span></span><span style="display: none;"></span></h3><ol style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;list-style-type: decimal;font-size: 15px;color: #595959;" class="list-paddingleft-1"><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">确定主要关键词： how to thread a sewing machine</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">这里已经是属于比较长尾的关键词了，这一步跳过</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">强力词汇。可以改成how to thread </span><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「almost any」</span></strong><span leaf=""> sewing machine，almost any就是</span><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「几乎所有」</span></strong><span leaf="">的意思，到这就已经可以当做一个SEO标题的了，如果觉得还不够可以继续优化。</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">突出特点。可以用Step-by-Step，或者with pictures。标题就变成了how to thread almost any sewing machine – step-by-step guide 或者 how to thread a sewing machine (with pictures)</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">格式化标题：How to Thread Almost Any Sewing Machine(Step-by-Step Guide) 【577个像素】 或者 How to Thread a Sewing Machine (with Pictures)【433个像素】</span></section></li></ol><h3 data-tool="markdown.com.cn编辑器" style="color: black;font-size: 18px;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;"><span style="display: none;"></span><span style="border-bottom: 2px solid rgba(0, 88, 204, 0.7);color: #2b2b2b;padding-bottom: 2px;"><span style="width: 30px;height: 30px;display: block;background-position: center;background-size: 30px;margin: auto;opacity: 1;background-repeat: no-repeat;margin-bottom: -8px;"></span><span leaf="">产品或服务的标题写法</span></span><span style="display: none;"></span></h3><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">电子商务站点可以根据业务、产品类型来多突出材质、用途，属性，型号，地区等。使用模板化来自动生成标题是可以节省很多时间。比如说用类似这种结构：</span></p><ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;color: #595959;list-style-type: circle;" class="list-paddingleft-1"><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">[品牌] [型号] [产品类型] - [特性] ：BLUETTI AC50B Portable Power Station | 700W 448Wh</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">[产品属性] [产品名] | [产品类别] ： Waterproof Canvas Messenger Bag | Laptop Shoulder Bag</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">[产品服务] | [地区] ： OEM CNC Machining Service | Custom Parts Manufacturer China</span></section></li></ul><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">根据不同的产品类型可以加上产品属性可以吸引到对应长尾关键词流量。合理使用数字符号、或品牌，如“in 202X”、“#1 Choice”， “30% Discount”，这些可以提高点击率。</span></p><h2 data-tool="markdown.com.cn编辑器" style="margin-bottom: 15px;font-weight: bold;color: black;margin: 10px auto;font-size: 20px;background-color: rgb(251, 251, 251);border-bottom: 1px solid rgb(246, 246, 246);margin-top: 20px;text-align: left;"><span style="display: none;"></span><span style="margin-left: -10px;display: inline-block;width: auto;background-color: rgb(33, 33, 34);border-bottom-right-radius: 100px;color: rgb(255, 255, 255);padding-right: 30px;padding-left: 30px;line-height: 40px;font-size: 18px;text-align: left;"><span leaf="">WordPress网站怎么设置标题？</span></span></h2><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">使用SEO插件是最简单的方法，我们以Rank Math这个SEO插件为例。</span></p><h3 data-tool="markdown.com.cn编辑器" style="color: black;font-size: 18px;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;"><span style="display: none;"></span><span style="border-bottom: 2px solid rgba(0, 88, 204, 0.7);color: #2b2b2b;padding-bottom: 2px;"><span style="width: 30px;height: 30px;display: block;background-position: center;background-size: 30px;margin: auto;opacity: 1;background-repeat: no-repeat;margin-bottom: -8px;"></span><span leaf="">方法一：全局设置默认标题结构</span></span><span style="display: none;"></span></h3><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">通过Rank Math SEO > Titles & Meta 这里，可以设置各类页面的标题格式。</span></p><figure data-tool="markdown.com.cn编辑器" style="margin: 0;margin-top: 10px;margin-bottom: 10px;"><span leaf=""><img src="https://vpic.xiaoyanger.net/mmbiz_png/nU26bia3taGJ67hedGN6Y34udUZpu7dHAOaaJn70AeVqU4cOoF90trLyGJ7xxagZhz3VZ5BAhKTNqG3LuXYBPUg/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.6259259259259259" data-type="png" data-w="1080" style="width: auto;max-width: 100%;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: 2px 4px 7px #999;" data-imgfileid="100000794" /></span></figure><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">比如：</span></p><ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;color: #595959;list-style-type: circle;" class="list-paddingleft-1"><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">文章页（Posts）：%title% %sep% %sitename%</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">分类页（Categories）：%term% Archives %sep% %sitename%</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">产品页（WooCommerce）：%title% | Buy Now from %sitename%</span></section></li></ul><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">说明：</span></p><ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;color: #595959;list-style-type: circle;" class="list-paddingleft-1"><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">%title% → 当前页面标题（后台的文章标题）</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">%sep% → 分隔符（通常是 | 或 -）</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">%sitename% → 站点名称</span></section></li></ul><h3 data-tool="markdown.com.cn编辑器" style="color: black;font-size: 18px;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;"><span style="display: none;"></span><span style="border-bottom: 2px solid rgba(0, 88, 204, 0.7);color: #2b2b2b;padding-bottom: 2px;"><span style="width: 30px;height: 30px;display: block;background-position: center;background-size: 30px;margin: auto;opacity: 1;background-repeat: no-repeat;margin-bottom: -8px;"></span><span leaf="">方法二：单篇文章或页面设置独立标题</span></span><span style="display: none;"></span></h3><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">编辑器底部的 Rank Math 面板 > 编辑 Snippet。</span></p><figure data-tool="markdown.com.cn编辑器" style="margin: 0;margin-top: 10px;margin-bottom: 10px;"><span leaf=""><img src="https://vpic.xiaoyanger.net/mmbiz_png/nU26bia3taGJ67hedGN6Y34udUZpu7dHAiaqwb4yia3FDtwrdJsxM8EoYGsCnQictCDzjBaKic3UU7VSpSerMic8Bq2Q/640?wx_fmt=png&from=appmsg" class="rich_pages wxw-img" data-ratio="0.32397003745318353" data-type="png" data-w="1068" style="width: auto;max-width: 100%;border-radius: 6px;display: block;margin: 20px auto;object-fit: contain;box-shadow: 2px 4px 7px #999;" data-imgfileid="100000795" /></span></figure><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">在这里我们可以单独自定义：</span></p><ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;color: #595959;list-style-type: circle;" class="list-paddingleft-1"><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">SEO Title（title 标签）</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">Meta Description（meta 描述）</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">Permalink（URL）</span></section></li></ul><h2 data-tool="markdown.com.cn编辑器" style="margin-bottom: 15px;font-weight: bold;color: black;margin: 10px auto;font-size: 20px;background-color: rgb(251, 251, 251);border-bottom: 1px solid rgb(246, 246, 246);margin-top: 20px;text-align: left;"><span style="display: none;"></span><span style="margin-left: -10px;display: inline-block;width: auto;background-color: rgb(33, 33, 34);border-bottom-right-radius: 100px;color: rgb(255, 255, 255);padding-right: 30px;padding-left: 30px;line-height: 40px;font-size: 18px;text-align: left;"><span leaf="">标题标签可能会被谷歌改写</span></span></h2><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">谷歌不会完全按照网站中设定的title标签来展示。与元描述类似，谷歌会根据你网页的内容和用户的搜索字词来进行某种程度上的改写。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">根据Ahrefs的研究（</span><span leaf="">https://ahrefs.com/blog/meta-description-study/</span><span leaf="">），62.78%的情况下谷歌会改写你的元描述。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">而对于title标签，Zyppy的一项研究（</span><span leaf="">https://zyppy.com/seo/title-tags/google-title-rewrite-study/</span><span leaf="">）说超过61%的页面标题都会被谷歌重写。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「且文章页面被改写的频率大于电子商务页面。」</span></strong></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">谷歌会根据网页内容和用户的相关搜索来改写标题标签里面的内容，这完全是根据它自身的算法来自动化实现的。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">但是这些改动不会过大，通常会根据你的长度和相关性来进行微小改动。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">Title中使用的标点符号也会影响谷歌更改你的标题的频率。Zyppy的文章还指出，标题中使用中括号[]括起来的内容更容易被谷歌从搜索结果中改写（77.6%的概率），而使用括号()括起来的内容，被改写的几率为61.9%。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">应用到网页上就是如果想强调标题中的文本，可以考虑使用小括号括起来，更不容易被改写。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">其他分隔符在谷歌中被改写/截断的几率：</span></p><ul style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;font-size: 15px;color: #595959;list-style-type: circle;" class="list-paddingleft-1"><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">破折号及其变体（- — ——）：19.7%</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">竖线（|）：41%</span></section></li></ul><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「那如何降低谷歌更改网页title的频率呢？」</span></strong></p><ol style="margin-top: 8px;margin-bottom: 8px;padding-left: 25px;list-style-type: decimal;font-size: 15px;color: #595959;" class="list-paddingleft-1"><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">标题要跟正文内容相关，且H1和title使用完全相同的内容，可以降低谷歌的重写标题的几率。</span></section></li><li><section style="margin-top: 5px;margin-bottom: 5px;line-height: 26px;text-align: left;font-size: 15px;font-weight: 400;color: #3a3a3a;"><span leaf="">保持标题长度在桌面端中在 580 px 以内，移动端展标题长度控制在 530–550像素以内，借助一些常见的WordPress SEO插件，例如Yoast SEO, Rank Math可以很容易地协助你实现这一点。</span></section></li></ol><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">标题只是第一步，Google 还会读取页面的 H1–H6 来确认主题，下一节我们来看 Heading 标签的一些最佳实践。</span></p><h2 data-tool="markdown.com.cn编辑器" style="margin-bottom: 15px;font-weight: bold;color: black;margin: 10px auto;font-size: 20px;background-color: rgb(251, 251, 251);border-bottom: 1px solid rgb(246, 246, 246);margin-top: 20px;text-align: left;"><span style="display: none;"></span><span style="margin-left: -10px;display: inline-block;width: auto;background-color: rgb(33, 33, 34);border-bottom-right-radius: 100px;color: rgb(255, 255, 255);padding-right: 30px;padding-left: 30px;line-height: 40px;font-size: 18px;text-align: left;"><span leaf="">H1–H6的语义与谷歌SEO的作用</span></span></h2><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">Heading 标签就是给谷歌（和读者、屏幕阅读器）提供“目录结构”的。正确分级能帮助搜索引擎迅速判定页面主题、抽取片段、决定是否改写 <title>，还能提高可访问性及用户阅读体验。文章如果长度过长，那么可以使用目录来自动生成锚点。</span></p><table style="display: table;text-align: left;"><thead><tr style="border: 0;border-top: 1px solid #ccc;background-color: white;"><th style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-weight: bold;background-color: #f0f0f0;font-size: 14px;color: #595959;"><section><span leaf="">层级</span></section></th><th style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-weight: bold;background-color: #f0f0f0;font-size: 14px;color: #595959;"><section><span leaf="">作用</span></section></th><th style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-weight: bold;background-color: #f0f0f0;font-size: 14px;color: #595959;"><section><span leaf="">常见误区</span></section></th><th style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-weight: bold;background-color: #f0f0f0;font-size: 14px;color: #595959;"><section><span leaf="">最佳实践</span></section></th></tr></thead><tbody><tr style="border: 0;border-top: 1px solid #ccc;background-color: white;"><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">H1</span></section></td><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">页面主标题，承接核心主题</span></section></td><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">同页多个 H1； 用 Logo 图片占 H1 位置</span></section></td><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">每页仅 1 个；注意长度；把核心关键词放前面</span></section></td></tr><tr style="border: 0;border-top: 1px solid #ccc;background-color: #F8F8F8;"><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">H2 / H3</span></section></td><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">划分主要段落，帮助 Google 理解内容块</span></section></td><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">只用粗体代替； 跳级（H2 后直接 H4）</span></section></td><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">层级不要跳</span></section></td></tr><tr style="border: 0;border-top: 1px solid #ccc;background-color: white;"><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">H4–H6</span></section></td><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">深层次小节或 FAQ、数据表题注</span></section></td><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">为了“加粗”滥用 H5/H6</span></section></td><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">仅在长文或技术文档需要时使用</span></section></td></tr><tr style="border: 0;border-top: 1px solid #ccc;background-color: #F8F8F8;"><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">可访问性</span></section></td><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">屏幕阅读器按 H 层级朗读</span></section></td><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">Heading 乱序 → 阅读器朗读杂乱</span></section></td><td style="border: 1px solid #ccc;padding: 5px 10px;text-align: left;font-size: 14px;color: #595959;"><section><span leaf="">按顺序自然缩进</span></section></td></tr></tbody></table><h3 data-tool="markdown.com.cn编辑器" style="color: black;font-size: 18px;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;"><span style="display: none;"></span><span style="border-bottom: 2px solid rgba(0, 88, 204, 0.7);color: #2b2b2b;padding-bottom: 2px;"><span style="width: 30px;height: 30px;display: block;background-position: center;background-size: 30px;margin: auto;opacity: 1;background-repeat: no-repeat;margin-bottom: -8px;"></span><span leaf="">H1</span></span><span style="display: none;"></span></h3><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「H1只能出现一次，」</span></strong><span leaf=""> 我们在使用Elementor这种可视化工具的时候会有些常见的误区就是在添加Heading小部件的时候将其设置成了H1。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">在绝大多数<a class="normal_text_link" target="_blank" style="" href="https://mp.weixin.qq.com/s?__biz=MzE5ODg1OTc2NA==&mid=2247484374&idx=1&sn=30b2948cc1ab1df16b34a25f6b3ce385&scene=21#wechat_redirect" textvalue="WordPress主题" data-itemshowtype="0" linktype="text" data-linktype="2">WordPress主题</a>里<h1>跟<title>是保持大体语义一致的，但具体要看主题与页面构建器的实现。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">我们可以通过Rank Math, Yoast SEO这些SEO插件来让我们的<h1>和<title>有所区别，但是一般推荐要</span><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「有70-80%的语义重叠」</span></strong><span leaf="">。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">比如说这是我这篇文章的H1标签：</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf=""><h1 class="elementor-heading-title elementor-size-default"><span textstyle="" style="font-weight: bold;">谷歌SEO标题优化指南：如何写出高点击率标题？(含解析)</span></h1></span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">这是我这篇文章的Title标签：</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf=""><title><span textstyle="" style="font-weight: bold;">谷歌SEO标题优化指南：如何写出高点击率标题？(含解析) - Ecomools</span>
为什么会有一些不一样，那是因为我在Rank Math里面设置了我的标题范式是：标题 + 分割符 + 品牌名 （%title% %sep% %sitename%），因此因此生成的 会自动在尾部加上分隔符和品牌名</span></p><h3 data-tool="markdown.com.cn编辑器" style="color: black;font-size: 18px;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;"><span style="display: none;"></span><span style="border-bottom: 2px solid rgba(0, 88, 204, 0.7);color: #2b2b2b;padding-bottom: 2px;"><span style="width: 30px;height: 30px;display: block;background-position: center;background-size: 30px;margin: auto;opacity: 1;background-repeat: no-repeat;margin-bottom: -8px;"></span><span leaf="">H2/H3</span></span><span style="display: none;"></span></h3><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">在谷歌与读者眼里，H2、H3 是区分段落层级的“章节标题”。它们告诉搜索引擎：页面先讲 A，再讲 B；B 又拆成 B-1、B-2。清晰的层次＝更高的可读性，也方便 Google 抽取段落当AI答案卡片或者精选摘要。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「H2/H3 可以出现多次」</span></strong><span leaf="">，只要保持层级递进、语义清晰即可，例如 H2 → H3 → H4。但要避免跳级，比如 H2 后直接套用 H4 就是不规范的写法。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">而在放关键词布局和页面优化上，我们可以将核心关键词或者核心主题放在H2标签里，强化页面的主题信号；将核心主题的细分要点/问句或者LSI关键词放到H3里，有助于搜索引擎理解内容结构，也利于被 SGE（就是AI答案卡片）/People Also Ask 抽取。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">接下来我就以我的这篇文章的整体结构示意：</span></p><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="css"><code><span leaf="">ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line</span></code><code><span leaf=""><<span class="code-snippet__selector-tag">h1</span>>谷歌SEO标题(Title)优化：如何写出高点击率标题？(含案例)</<span class="code-snippet__selector-tag">h1</span>></span></code><code><span leaf=""><br /></span></code><code><span leaf=""><<span class="code-snippet__selector-tag">h2</span>>为什么标题标签很重要呢？</<span class="code-snippet__selector-tag">h2</span>></span></code><code><span leaf=""><br /></span></code><code><span leaf=""><<span class="code-snippet__selector-tag">h2</span>>如何写出高点击率的标题?</<span class="code-snippet__selector-tag">h2</span>></span></code><code><span leaf=""><<span class="code-snippet__selector-tag">h3</span>><span class="code-snippet__number">1</span>. 避免标题全大写</<span class="code-snippet__selector-tag">h3</span>></span></code><code><span leaf=""><<span class="code-snippet__selector-tag">h3</span>><span class="code-snippet__number">2</span>. 网站名称、品牌名可以不加在标题当中</<span class="code-snippet__selector-tag">h3</span>></span></code><code><span leaf="">...</span></code><code><span leaf=""><<span class="code-snippet__selector-tag">h2</span>><span class="code-snippet__selector-tag">H1</span>–<span class="code-snippet__selector-tag">H6</span>的语义层级与谷歌SEO的作用</<span class="code-snippet__selector-tag">h2</span>></span></code><code><span leaf=""><<span class="code-snippet__selector-tag">h3</span>><span class="code-snippet__selector-tag">H1</span></<span class="code-snippet__selector-tag">h3</span>></span></code><code><span leaf=""><<span class="code-snippet__selector-tag">h3</span>><span class="code-snippet__selector-tag">H2</span>/<span class="code-snippet__selector-tag">H3</span></<span class="code-snippet__selector-tag">h3</span>></span></code></pre></section><h3 data-tool="markdown.com.cn编辑器" style="color: black;font-size: 18px;font-weight: bold;text-align: center;margin-top: 20px;margin-bottom: 20px;"><span style="display: none;"></span><span style="border-bottom: 2px solid rgba(0, 88, 204, 0.7);color: #2b2b2b;padding-bottom: 2px;"><span style="width: 30px;height: 30px;display: block;background-position: center;background-size: 30px;margin: auto;opacity: 1;background-repeat: no-repeat;margin-bottom: -8px;"></span><span leaf="">H4/H5/H6</span></span><span style="display: none;"></span></h3><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">H4、H5、H6 适用于内容层级更深的小节，常见于较长的页面结构中，</span><strong style="color: #3594F7;font-weight: bold;"><span leaf="">「比如FAQ区块、技术文档、产品说明书」</span></strong><span leaf="">等。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">这些标题标签能够帮助 Google 更准确地识别和解析复杂内容的层级结构，就像构建一棵内容的“树状图谱”，让搜索引擎清楚知道哪一部分是主干、哪一部分是分支。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf="">使用得当时，深层次标题不仅有助于SEO语义理解，也能提升长文的阅读体验，让用户快速定位所需信息。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf=""><span textstyle="" style="font-weight: bold;">推荐阅读：</span></span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf=""><a class="normal_text_link" target="_blank" style="" href="https://mp.weixin.qq.com/s?__biz=MzE5ODg1OTc2NA==&mid=2247484436&idx=1&sn=8747f8006fa67f3022ff32781a4bf939&scene=21#wechat_redirect" textvalue="如何创建扁平化网站架构来提升谷歌SEO效果？" data-itemshowtype="0" linktype="text" data-linktype="2">如何创建扁平化网站架构来提升谷歌SEO效果？</a></span></p><section class="mp_profile_iframe_wrp" style="margin-bottom: 0px;"><span leaf=""><mp-common-profile class="js_uneditable custom_select_card mp_profile_iframe" data-pluginname="mpprofile" data-nickname="Ecomools" data-from="0" data-headimg="http://vpic.xiaoyanger.net/mmbiz_png/nU26bia3taGIG568cXvRT2OGjsRsqSTAGPia4H4MqTGTb7joHicvcHRVz9BVLZHrG8uiasd33JQGkZ6JXc2licRo68g/0?wx_fmt=png" data-signature="这里会分享一些不太一样的外贸建站、谷歌SEO、SEM以及B端独立站运营实操经验。网站：ecomools.com" data-id="MzE5ODg1OTc2NA==" data-is_biz_ban="0" data-service_type="1" data-verify_status="0"></mp-common-profile></span></section><p style="margin-bottom: 0px;"><span leaf=""><br /></span></p><p style="margin-bottom: 0px;"><span leaf="">关注我，分享更多ToB外贸独立站实战经验。</span></p><p data-tool="markdown.com.cn编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;color: #2b2b2b;margin: 10px 0px;letter-spacing: 2px;font-size: 16px;word-spacing: 2px;text-align: left;"><span leaf=""><br /></span></p></section><p style="display: none;"><mp-style-type data-value="3"></mp-style-type></p></div>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7900219627358725"
crossorigin="anonymous"></script>
<!-- 95dir-shouye-vip-xiamian -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7900219627358725"
data-ad-slot="5028809478"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="hcatelist">
<li><i class="fas fa-tag"></i>标签：
<a href="/artinfo/21574.html" title="查看更多关于'Ecomools'的文章">Ecomools</a> <a href="/artinfo/21574.html" title="查看更多关于'gh_6ba77c67ab36'的文章">gh_6ba77c67ab36</a> </li>
</div>
<!-- SEO内链优化：相关文章和导航 -->
<div class="seo-internal-links" style="margin: 20px 0; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #28a745;">
<h4 style="margin: 0 0 12px 0; font-size: 16px; color: #333; font-weight: bold;">
<i class="fas fa-link" style="color: #28a745; margin-right: 8px;"></i>相关推荐
</h4>
<div style="line-height: 2.2; font-size: 14px;">
<a href="/article/320.html" title="浏览更多百度你丫收录啊文章" style="color: #28a745; text-decoration: none; margin-right: 15px;">
<i class="fas fa-folder" style="margin-right: 5px;"></i>更多百度你丫收录啊文章
</a>
<a href="/article/" title="站长资讯" style="color: #28a745; text-decoration: none; margin-right: 15px;">
<i class="fas fa-newspaper" style="margin-right: 5px;"></i>站长资讯
</a>
<a href="/webdir/" title="网站目录" style="color: #28a745; text-decoration: none; margin-right: 15px;">
<i class="fas fa-sitemap" style="margin-right: 5px;"></i>网站目录
</a>
<a href="/update/" title="最新收录" style="color: #28a745; text-decoration: none; margin-right: 15px;">
<i class="fas fa-clock" style="margin-right: 5px;"></i>最新收录
</a>
<a href="/vip_list/" title="VIP网站" style="color: #28a745; text-decoration: none;">
<i class="fas fa-crown" style="margin-right: 5px;"></i>VIP网站
</a>
</div>
</div>
<div id="relsite" class="clearfix">
<h2>相关站点</h2>
<ul class="rellist" itemscope itemtype="https://schema.org/ItemList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/WebSite"><a href="/siteinfo/9943.html" title="访问AI工具导航站 - 发现优质实用AI工具网站网站" itemprop="url"><img src="/public/images/nopic.gif" width="100" height="80" alt="AI工具导航站 - 发现优质实用AI工具网站网站截图" itemprop="image" /><strong itemprop="name">AI工具导航站 - 发现优质实用AI工具网站</strong></a></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/WebSite"><a href="/siteinfo/9942.html" title="访问洛谷网站" itemprop="url"><img src="/uploads/website/www.luogu.com.cn.jpg" width="100" height="80" alt="洛谷网站截图" itemprop="image" /><strong itemprop="name">洛谷</strong></a></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/WebSite"><a href="/siteinfo/9941.html" title="访问LearnKu 终身编程者的知识社区网站" itemprop="url"><img src="/uploads/website/learnku.com.jpg" width="100" height="80" alt="LearnKu 终身编程者的知识社区网站截图" itemprop="image" /><strong itemprop="name">LearnKu 终身编程者的知识社区</strong></a></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/WebSite"><a href="/siteinfo/9940.html" title="访问360搜索，SO靠谱网站" itemprop="url"><img src="/public/images/nopic.gif" width="100" height="80" alt="360搜索，SO靠谱网站截图" itemprop="image" /><strong itemprop="name">360搜索，SO靠谱</strong></a></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/WebSite"><a href="/siteinfo/9939.html" title="访问搜狗搜索网站" itemprop="url"><img src="/uploads/website/m.sogou.com.webp" width="100" height="80" alt="搜狗搜索网站截图" itemprop="image" /><strong itemprop="name">搜狗搜索</strong></a></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/WebSite"><a href="/siteinfo/9938.html" title="访问屏蔽iphone系统自动升级方法网站" itemprop="url"><img src="/uploads/website/ai.id64.com.webp" width="100" height="80" alt="屏蔽iphone系统自动升级方法网站截图" itemprop="image" /><strong itemprop="name">屏蔽iphone系统自动升级方法</strong></a></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/WebSite"><a href="/siteinfo/9937.html" title="访问Krill AI网站" itemprop="url"><img src="/uploads/website/www.krill-ai.com.webp" width="100" height="80" alt="Krill AI网站截图" itemprop="image" /><strong itemprop="name">Krill AI</strong></a></li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/WebSite"><a href="/siteinfo/9936.html" title="访问StoryFab网站" itemprop="url"><img src="/public/images/nopic.gif" width="100" height="80" alt="StoryFab网站截图" itemprop="image" /><strong itemprop="name">StoryFab</strong></a></li>
</ul>
</div>
<div class="text-xs text-muted"><div><span>©</span> 版权声明</div><div class="posts-copyright"><div><br><fieldset style="border:1px dashed #008CFF;padding:10px;border-radius:8px;line-height: 2em;color: #6D6D6D"><legend align="center" style="color:#FFFFFF;width:200px;text-align:center;background-color:#008CFF;font-size: 14px;border-radius: 5px">95分类目录 - 版权声明</legend>1、本主题所有言论和图片纯属会员个人意见，与本站立场无关。<br> 2、本站所有主题由该文章作者发表，该文章作者与<a href="https://95dir.com/" rel="nofollow"><font color="#FF6600">95分类目录</font></a>享有文章相关版权。<br> 3、其他单位或个人使用、转载或引用本文时必须同时征得该文章作者和<a href="https://www.95dir.com/" rel="nofollow"><font color="#FF6600">95分类目录</font></a>的同意。<br> 4、文章作者须承担一切因本文发表而直接或间接导致的民事或刑事法律责任。<br> 5、本帖部分内容转载自其它媒体，但并不代表本站赞同其观点和对其真实性负责。<br> 6、如本帖侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意。<br> 7、<a href="https://95dir.com/" rel="nofollow"><font color="#FF6600">95分类目录</font></a>管理员有权不事先通知发贴者而删除本文。</fieldset><br></div></div></div>
<!-- 打赏按钮 -->
<div class="donate-button-container">
<button onclick="showDonatePopup()">打赏支持</button>
<div class="fenxiang"><div class="social-share"></div></div>
</div><!-- 打赏弹窗 -->
<div id="donate-popup" style="display:none;">
<div class="donate-popup-content">
<span class="close" onclick="closeDonatePopup()">×</span>
<h3>您的赞助更新的动力</h3>
<div class="donate-qr-codes">
<div>
<h4>微信打赏</h4>
<img src="https://cdn.jsdelivr.net/gh/zhuxiaoming2001/tuchuang/wzlingdi/202412022206265.png" alt="WeChat QR Code">
</div>
<div>
<h4>支付宝打赏</h4>
<img src="https://cdn.jsdelivr.net/gh/zhuxiaoming2001/tuchuang/wzlingdi/202412022206984.png" alt="Alipay QR Code">
</div>
</div>
</div>
</div>
<ul class="prevnext">
<li>上一篇： <a href="/artinfo/21573.html">谷歌SEO优化之出站链接：让你的网站更权威、更受信任 - Ecomools</a></li>
<li>下一篇： <a href="/artinfo/21575.html">谷歌SEO之标题(Title)优化：如何写出高点击率标题？(含案例) - Ecomools</a></li>
</ul>
</div>
<!-- 文章评论功能 -->
<div class="blank10"></div>
<div id="article-comments" class="clearfix">
<h2 style="color: #667eea;font-size:16px;">💬 文章评论</h2>
<!-- 评论统计 -->
<div id="comment-stats" class="comment-stats" style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
<div style="text-align: center; color: #666;">
<span id="loading-stats">正在加载评论统计...</span>
</div>
</div>
<!-- 评论表单 -->
<div class="comment-form" style="background: #fff; padding: 20px; border: 1px solid #e9ecef; border-radius: 8px; margin-bottom: 20px;">
<h3 style="margin-top: 0; color: #333; font-size: 16px;">发表评论</h3>
<form id="comment-form">
<input type="hidden" name="art_id" value="21574">
<!-- 评论内容 -->
<div style="margin-bottom: 15px;">
<label style="display: block; margin-bottom: 5px; font-weight: bold;">评论内容：</label>
<div class="textarea-container" style="position: relative;">
<textarea name="comment_content" id="main-comment-textarea" placeholder="请分享您对这篇文章的看法，支持表情和媒体链接..."
style="width: 100%; height: 100px; padding: 10px; border: 1px solid #ddd; border-radius: 4px; resize: vertical; font-family: inherit;"
maxlength="1000"></textarea>
<!-- 表情按钮 -->
<button type="button" id="emoji-btn-main"
style="position: absolute; right: 10px; bottom: 10px; background: none; border: none; font-size: 18px; cursor: pointer; padding: 5px; z-index: 10;">😊</button>
<!-- 表情选择器 -->
<div id="emoji-picker-main-comment-textarea" class="emoji-picker" style="display: none; position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; margin-top: 5px;">
<div class="emoji-grid">
<span onclick="insertEmoji('main-comment-textarea', '😊')">😊</span>
<span onclick="insertEmoji('main-comment-textarea', '😂')">😂</span>
<span onclick="insertEmoji('main-comment-textarea', '❤️')">❤️</span>
<span onclick="insertEmoji('main-comment-textarea', '👍')">👍</span>
<span onclick="insertEmoji('main-comment-textarea', '👎')">👎</span>
<span onclick="insertEmoji('main-comment-textarea', '😍')">😍</span>
<span onclick="insertEmoji('main-comment-textarea', '😭')">😭</span>
<span onclick="insertEmoji('main-comment-textarea', '😱')">😱</span>
<span onclick="insertEmoji('main-comment-textarea', '🤔')">🤔</span>
<span onclick="insertEmoji('main-comment-textarea', '😴')">😴</span>
<span onclick="insertEmoji('main-comment-textarea', '🎉')">🎉</span>
<span onclick="insertEmoji('main-comment-textarea', '🔥')">🔥</span>
<span onclick="insertEmoji('main-comment-textarea', '💯')">💯</span>
<span onclick="insertEmoji('main-comment-textarea', '⭐')">⭐</span>
<span onclick="insertEmoji('main-comment-textarea', '🚀')">🚀</span>
<span onclick="insertEmoji('main-comment-textarea', '💡')">💡</span>
</div>
</div>
</div>
<div style="text-align: right; font-size: 12px; color: #999; margin-top: 5px;">
<span id="char-count">0</span>/1000字符
</div>
</div>
<!-- 验证码 + 提交按钮 -->
<div style="text-align:center; margin-top:20px;">
<div style="display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;">
<!-- 验证码输入框 -->
<input type="text"
name="code"
id="comment-code-input"
placeholder="验证码"
maxlength="6"
style="width:90px; height:36px; padding:5px 8px; border:1px solid #ccc; border-radius:4px; font-size:14px; text-align:center;" />
<!-- 验证码图片 -->
<span id="mycode" style="vertical-align:middle;"></span>
<!-- 提交按钮 -->
<button type="submit"
style="background:#007bff; color:white; padding:8px 25px; border:none; border-radius:4px; cursor:pointer; font-size:14px;">
发表评论
</button>
</div>
</div>
</form>
</div>
<!-- 评论列表 -->
<div id="comments-list" class="comments-list">
<div style="text-align: center; color: #666; padding: 20px;">
正在加载评论...
</div>
</div>
</div>
<div class="blank10"></div>
</div>
<aside id="mainbox-right">
<!--<div class="ad250x250"></div>-->
<div class="blank10"></div>
<div id="bestart">
<h3>推荐资讯</h3>
<ul class="artlist_b">
<li><a href="/artinfo/1533707.html">2026年洛谷官方网站入口+深度测评</a></li>
<li><a href="/artinfo/1533706.html">2026年LearnKu 终身编程者的知识社区官方网站入口+深度测评</a></li>
<li><a href="/artinfo/1533705.html">2026流量变现生死劫：从“江阴论坛”的本地困局，看元宇宙商业落地场景的虚与实</a></li>
<li><a href="/artinfo/1533704.html">拒绝“一点点”式自嗨：2026年企业私有化大模型部署的骨感现实与破局</a></li>
<li><a href="/artinfo/1533703.html">2026美学通胀与技术脱节：从“电脑技术吧”的硬核审视，看企业官网品牌视觉升级的虚与实</a></li>
<li><a href="/artinfo/1533702.html">2026高校招聘网的流量遮羞布：长尾关键词矩阵是救命稻草，还是自嗨式自残？</a></li>
<li><a href="/artinfo/1533701.html">2026割裂现状：当“mac论坛”的精致极客，撞上“ESG可持续发展报告”的硬核指标</a></li>
<li><a href="/artinfo/1533700.html">2026拒绝自嗨式自救：从chuanglian511.com看四川传统企业官网品牌视觉升级的流量生路</a></li>
<li><a href="/artinfo/1533699.html">2026年情怀重塑与安全红线：奥比岛小花仙小游戏合集的AI审核技术突围</a></li>
<li><a href="/artinfo/1533698.html">2026技术效能白皮书：高效自然语言处理与死链404自动化监控的工程化落地</a></li>
</ul>
</div>
<div class="blank10"></div>
<div id="bestweb" class="mag">
<h3>推荐站点</h3>
<ul class="weblist_b">
<li><a href="/siteinfo/9943.html"><img src="/public/images/nopic.gif" width="100" height="80" alt="AI工具导航站 - 发现优质实用AI工具网站" loading="lazy"></a><strong><a href="/siteinfo/9943.html" title="AI工具导航站 - 发现优质实用AI工具网站">AI工具导航站 - 发现优质实用AI工具网站</a></strong><p>AI工具导航站（asll.net）是一个致力于帮助用户发现全球优质、实用AI工具的一站式网站导航平台。平台紧跟人工智能发展前沿，系统性地收录并分类整理了涵盖AI写作、AI绘画、音视频处理、编程开发及办公协同等多个领域的尖端生产力工具。我们通过严格的筛选机制与多维度评估，为职场人士、创作者和开发者提供精准的工具分类索引与直达链接。无论您是寻求提升工作效率，还是探索前沿AI应用，都能在此快速定位最适合的智能化解决方案，轻松开启高效智能的数字化工作流。</p><address><a href="http://asll.net" target="_blank" rel="noopener" class="visit" onClick="clickout(9943)">asll.net</a></address></li>
<li><a href="/siteinfo/9919.html"><img src="/uploads/website/shuzinengliang.oss-cn-beijing.aliyuncs.com.webp" width="100" height="80" alt="号令天下" loading="lazy"></a><strong><a href="/siteinfo/9919.html" title="号令天下">号令天下</a></strong><p>号令天下（913.com.cn）是国内专业的手机号码测吉凶及数字能量分析平台。网站依托传统周易五行理论，融合现代数字能量学，独创“八星排盘”测算系统，为用户提供免费、便捷的手机号吉凶查询服务。通过深度解析手机号码背后的数理磁场，帮助用户全面了解号码对个人运势、财运及事业的潜在影响。号令天下致力于用科学严谨的态度解读数字密码，引导用户理性看待数字能量，为您挑选吉祥号码、优化人生运势提供客观的决策参考。</p><address><a href="http://913.com.cn" target="_blank" rel="noopener" class="visit" onClick="clickout(9919)">913.com.cn</a></address></li>
<li><a href="/siteinfo/22.html"><img src="/uploads/website/www.sdkaikai.cn.jpg" width="100" height="80" alt="烨烨科技" loading="lazy"></a><strong><a href="/siteinfo/22.html" title="烨烨科技">烨烨科技</a></strong><p>济南烨烨生物科技有限公司集科研，生产，销售三苯基膦,2-氰基吡嗪,异戊烯醇,3-甲基-2-丁烯醇,异佛尔酮,二溴海因,无水叔丁醇,2-氨基-5-溴苯甲酸,异戊烯醛，酚醛树脂等产品。氧化苯乙烯,,间苯二甲醚,2-氰基吡嗪,二甲基硫醚,异戊烯醛,异戊烯醇,环戊酮,丙二腈,偶氮二异丁腈,叔丁醇医药中间体,酚醛树脂</p><address><a href="http://www.sdkaikai.cn" target="_blank" rel="noopener" class="visit" onClick="clickout(22)">www.sdkaikai.cn</a></address></li>
<li><a href="/siteinfo/21.html"><img src="/uploads/website/www.sdxinyekeji.cn.jpg" width="100" height="80" alt="山东欣烨生物" loading="lazy"></a><strong><a href="/siteinfo/21.html" title="山东欣烨生物">山东欣烨生物</a></strong><p>山东欣烨生物科技有限公司集科研，生产，销售N-乙烯基吡咯烷酮,聚维酮k30;聚乙烯吡咯烷酮,对苯二酚,异戊烯醛,异戊烯醇321,防黄剂,丁酰肼原药,固体甲醇钠,甲醇钠溶液,乙醇钠溶液,丁酰肼原药,甲醇钠溶液,乙醇钠溶液,异戊烯醇,3-甲基-2-丁烯醇,异佛尔酮,无水叔丁醇,2-氨基-5-溴苯甲酸,异戊烯醛，农药中间体系列,生物制药系列,医药中间体系列,化学溶剂系列,阻燃剂系列,化学试剂系列,颜料燃料系列,橡胶塑料系列,酚醛树脂等系列产品。拥有自营进出口权，产品远销日本、韩国、欧美等发达国家。</p><address><a href="http://www.sdxinyekeji.cn" target="_blank" rel="noopener" class="visit" onClick="clickout(21)">www.sdxinyekeji.cn</a></address></li>
<li><a href="/siteinfo/9581.html"><img src="https://s0.wp.com/mshots/v1/https://nationaldex.io" width="100" height="80" alt="NationalDex" loading="lazy"></a><strong><a href="/siteinfo/9581.html" title="NationalDex">NationalDex</a></strong><p>NationalDex是一款极速、现代化的Pokédex，覆盖所有世代的宝可梦、招式、特性、道具与地区。用户可按类型、世代、地区等多维度精准筛选，快速规划团队、挑战与竞技阵容。平台接口简洁、数据完整，支持高级搜索与统计分析，让训练师与玩家在构建理想队伍时获得即时、精准的支持。</p><address><a href="http://nationaldex.io" target="_blank" rel="noopener" class="visit" onClick="clickout(9581)">nationaldex.io</a></address></li>
</ul>
</div>
</div>
</div>
<!--<div style="max-width: 1200px; margin: 0 auto 15px auto; padding-left: 10px;">
<span style="font-size: 13px; color: #888; font-weight: bold; border-left: 3px solid #ff6b35; padding-left: 8px;">精品专题</span>
</div>
<div style="max-width: 1000px; margin: 0 auto 25px auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; padding: 0 10px;">
<a href="/diypage/1.html" title="95dir网站日志" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">📄</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">95dir网站日志</span>
</a>
<a href="/diypage/3.html" title="网站收录说明" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">📄</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">网站收录说明</span>
</a>
<a href="/diypage/4.html" title="全球主流搜索引擎收录入口大全" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">📄</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">全球主流搜索引擎收录入口大全</span>
</a>
<a href="/diypage/5.html" title="95分类目录简介与平台收录运行机制公告" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">📄</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">95分类目录简介与平台收录运行机制公告</span>
</a>
<a href="/diypage/6.html" title="2026 年度 AI 生产力工具巅峰汇总" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">🚀</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">2026 年度 AI 生产力工具巅峰汇总</span>
</a>
<a href="/diypage/7.html" title="站长必备：2026 极致效率工具箱" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">📄</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">站长必备：2026 极致效率工具箱</span>
</a>
<a href="/diypage/8.html" title="2026 必看博客：深度思考与技术先锋" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">📄</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">2026 必看博客：深度思考与技术先锋</span>
</a>
<a href="/diypage/9.html" title="出海淘金：2026 全球化与跨境生存工具" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">📄</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">出海淘金：2026 全球化与跨境生存工具</span>
</a>
<a href="/diypage/10.html" title="2026 站长必备：全自动 AI 内容创作与 SEO 伪原创工具导航" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">🚀</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">2026 站长必备：全自动 AI 内容创作与 SEO 伪原创工具导航</span>
</a>
<a href="/diypage/11.html" title="网站收录翻倍实战方案：百度快照快速抓取与 Sitemap 优化指南" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">📄</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">网站收录翻倍实战方案：百度快照快速抓取与 Sitemap 优化指南</span>
</a>
<a href="/diypage/12.html" title="职场资源不求人：设计师、程序员与自媒体必备库" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">📄</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">职场资源不求人：设计师、程序员与自媒体必备库</span>
</a>
<a href="/diypage/13.html" title="2026 网站变现全攻略：权重提升与商业化之路" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">📄</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">2026 网站变现全攻略：权重提升与商业化之路</span>
</a>
<a href="/diypage/14.html" title="2026 极致效率工具与多媒体资源聚合" style="display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #eee; padding: 12px; border-radius: 10px; text-decoration: none; transition: all 0.3s;" onmouseover="this.style.borderColor='#ff6b35';this.style.transform='translateY(-2px)';" onmouseout="this.style.borderColor='#eee';this.style.transform='translateY(0)栽培';">
<span style="font-size: 18px; margin-right: 8px;">📄</span>
<span style="color: #333; font-weight: bold; font-size: 14px;">2026 极致效率工具与多媒体资源聚合</span>
</a>
</div>-->
<div id="fmenu" style="text-align: center; margin-bottom: 25px; background: #fafafa; padding: 15px; border-radius: 12px; max-width: 1000px; margin-left: auto; margin-right: auto;">
<a href="/update/" style="color: #666; text-decoration: none; margin: 0 12px; font-size: 14px; display: inline-flex; align-items: center;">
<span style="margin-right: 4px;">🆕</span>最新收录</a>
<a href="/archives/" style="color: #666; text-decoration: none; margin: 0 12px; font-size: 14px; display: inline-flex; align-items: center;">
<span style="margin-right: 4px;">📚</span>数据归档</a>
<a href="/top/" style="color: #666; text-decoration: none; margin: 0 12px; font-size: 14px; display: inline-flex; align-items: center;">
<span style="margin-right: 4px;">🔥</span>TOP排行</a>
<a href="/blacklist/" style="color: #666; text-decoration: none; margin: 0 12px; font-size: 14px; display: inline-flex; align-items: center;">
<span style="margin-right: 4px;">🚫</span>黑名单</a>
<a href="/rejected/" style="color: #666; text-decoration: none; margin: 0 12px; font-size: 14px; display: inline-flex; align-items: center;">
<span style="margin-right: 4px;">❌</span>不通过</a>
<a href="/datastats/" style="color: #666; text-decoration: none; margin: 0 12px; font-size: 14px; display: inline-flex; align-items: center;">
<span style="margin-right: 4px;">📊</span>数据公示</a>
<a href="/sitemap/all.xml" style="color: #666; text-decoration: none; margin: 0 12px; font-size: 14px; display: inline-flex; align-items: center;">
<span style="margin-right: 4px;">🗺️</span>站点地图</a>
</div>
<div style="max-width: 1000px; margin: 0 auto 20px auto; padding: 15px 0; border-top: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; font-size: 14px; line-height: 1.8; color: #777;">
<p style="margin: 0 0 8px 0; text-align: center;">
<strong style="color: #333;">95分类目录</strong> - 专业的网站分类目录平台，精心收录
<a href="/webdir/" style="color: #ff6b35; text-decoration: none;">网站目录</a>、
<a href="/vip_list/" style="color: #ff6b35; text-decoration: none;">VIP优质网站</a> 及
<a href="/article/" style="color: #ff6b35; text-decoration: none;">站长资讯</a>。
</p >
<p style="margin: 0; text-align: center; font-size: 12px; color: #aaa; letter-spacing: 1px;">
关键词：网站目录 · 网站收录 · 分类目录 · 网站推荐 · 优质网站 · 免费收录
</p >
</div>
<a href="https://frogdr.com/95dir.com?utm_source=95dir.com" target="_blank"
style="display: block; text-align: center; margin: 0 auto 15px auto;">
<img src="https://frogdr.com/95dir.com/badge-white.svg"
alt="Monitor your Domain Rating with FrogDR"
width="250" height="54"
style="display: inline-block; margin: 0 auto; vertical-align: middle;">
</a>
<div style="text-align: center; color: #999; font-size: 13px;">
<div id="fcopy" style="margin-bottom: 8px;">
Copyright © 2026 95dir.com All Rights Reserved <span style="margin: 0 8px;">·</span>
<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: #999; text-decoration: none;">鄂ICP备2024062716号-1</a>
<span style="margin: 0 8px;">·</span>
Processed in 0.061332 second(s), 27 Queries, Gzip Enabled </div>
<div id="statsContainer" style="margin-bottom: 10px;">
当前在线 <span id="onlineCount" style="color: #28a745; font-weight: bold;">...</span> 人
<span style="color: #eee;">|</span>
总访客 <span id="totalVisitors" style="color: #333; font-weight: bold;">...</span> 人
<span style="color: #eee;">|</span>
<a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=P8giPA6Ghq-xjdOZIMxq1RGrwUWJJ9q3&authKey=pAp40hn9v1YZaUnc30pmG0JzruRQbgWfKzcE17Zebqu%2BgvSp7fY6P1D3RmbT93%2Bh&noverify=0&group_code=1059212869" target="_blank" style="color: #007bff; text-decoration: none;">🐧交流群</a>
</div>
<div style="opacity: 0.7;">
<a href="https://tongji.baidu.com/" target="_blank" style="color: #bbb; text-decoration: none; font-size: 12px; display: inline-flex; align-items: center; gap: 4px;">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#bbb"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.5v-9l6 4.5-6 4.5z"/></svg>
百度统计
</a >
</div>
</div>
</div>
<!--<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7900219627358725"
crossorigin="anonymous"></script>-->
<script>
// 更新在线统计
function updateOnlineStats() {
// 添加时间戳防止缓存
const timestamp = new Date().getTime();
const url = '/data/online_stats/online.php?t=' + timestamp;
fetch(url, {
method: 'GET',
headers: {
'Cache-Control': 'no-cache',
'Pragma': 'no-cache'
}
})
.then(response => {
if (!response.ok) {
throw new Error('HTTP ' + response.status);
}
return response.json();
})
.then(data => {
// 确保数据有效
const online = parseInt(data.online) || 0;
const total = parseInt(data.total) || 0;
document.getElementById('onlineCount').textContent = online;
document.getElementById('totalVisitors').textContent = total.toLocaleString();
// 调试信息（可选）
console.log('在线统计更新:', { online: online, total: total });
})
.catch(error => {
console.error('在线统计服务错误:', error);
document.getElementById('onlineCount').textContent = '加载中...';
document.getElementById('totalVisitors').textContent = '加载中...';
});
}
// 页面加载时立即执行
document.addEventListener('DOMContentLoaded', function() {
updateOnlineStats();
});
// 设置定时器 - 在线统计每60秒更新
setInterval(updateOnlineStats, 60000);
// 页面获得焦点时也更新一次
window.addEventListener('focus', updateOnlineStats);
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?de6784c7f19b11f9d9d70711252011fe";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<div style="display:none; width:0px; height:0px;" aria-hidden="true">
<a href="/sys_archive/private_data.php" rel="nofollow">系统存档测试</a>
</div>
<!-- 回到顶部按钮 -->
<div id="backToTop" class="back-to-top" onclick="scrollToTop()">
<svg viewBox="0 0 24 24" width="24" height="24">
<path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path>
</svg>
</div>
<style>
.back-to-top {
position: fixed;
right: 20px;
bottom: 30px; /* 避开手机浏览器底部工具栏 */
width: 45px;
height: 45px;
background-color: #1890ff; /* 对应图中的蓝色 */
color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
cursor: pointer;
z-index: 999;
opacity: 0; /* 默认隐藏 */
visibility: hidden;
transition: all 0.3s ease;
transform: translateY(20px); /* 初始位置稍低，配合淡入 */
}
/* 显示状态 */
.back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top svg {
width: 28px;
height: 28px;
}
/* 适配手机端点击效果 */
.back-to-top:active {
transform: scale(0.9);
background-color: #096dd9;
}
</style>
<script>
window.onscroll = function() {
var topBtn = document.getElementById("backToTop");
// 当滚动高度超过 300 像素时显示按钮
if (document.documentElement.scrollTop > 300 || document.body.scrollTop > 300) {
topBtn.classList.add("show");
} else {
topBtn.classList.remove("show");
}
};
// 平滑滚动回顶部
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth' // 平滑滚动
});
}
</script></div>
<!-- 文章评论功能脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM加载完成，开始初始化文章评论功能...');
// 全局错误处理
window.addEventListener('error', function(event) {
console.error('JavaScript错误:', event.error);
console.error('错误位置:', event.filename, ':', event.lineno);
if (event.filename && event.filename.includes('artinfo')) {
const commentsListElement = document.getElementById('comments-list');
if (commentsListElement && !commentsListElement.innerHTML.includes('评论功能暂时不可用')) {
commentsListElement.innerHTML = '<div style="text-align: center; color: #dc3545; padding: 20px;">' +
'评论功能暂时不可用，请刷新页面重试' +
'</div>';
}
}
return false;
});
// 延迟初始化，确保DOM完全准备好
setTimeout(function() {
try {
// 检查管理员权限
checkAdminPermission();
// 初始化字符计数
initCharCount();
// 加载评论
loadComments();
// 绑定表单提交
bindCommentForm();
} catch (error) {
console.error('初始化文章评论功能时发生错误:', error);
const commentsListElement = document.getElementById('comments-list');
if (commentsListElement) {
commentsListElement.innerHTML = '<div style="text-align: center; color: #dc3545; padding: 20px;">' +
'评论功能初始化失败，请刷新页面重试' +
'</div>';
}
}
}, 200);
});
// 初始化字符计数
function initCharCount() {
const textarea = document.querySelector('textarea[name="comment_content"]');
const charCount = document.getElementById('char-count');
if (!textarea || !charCount) {
console.log('字符计数初始化失败: 找不到必要的DOM元素');
return;
}
textarea.addEventListener('input', () => {
const length = textarea.value.length;
charCount.textContent = length;
if (length > 1000) {
charCount.style.color = '#dc3545';
} else if (length > 800) {
charCount.style.color = '#ffc107';
} else {
charCount.style.color = '#999';
}
});
}
// 加载评论
function loadComments() {
try {
const artIdInput = document.querySelector('input[name="art_id"]');
if (!artIdInput) {
console.error('找不到art_id输入框');
document.getElementById('comments-list').innerHTML = '<div style="text-align: center; color: #dc3545; padding: 20px;">页面初始化错误</div>';
return;
}
const artId = artIdInput.value;
if (!artId) {
console.error('art_id为空');
document.getElementById('comments-list').innerHTML = '<div style="text-align: center; color: #999; padding: 20px;">暂无评论</div>';
return;
}
fetch('/module/article_comment_handler.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `action=get_comments&art_id=${artId}&limit=20`
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP错误: ${response.status}`);
}
return response.text();
})
.then(text => {
try {
const data = JSON.parse(text);
if (data.success) {
displayComments(data.comments || []);
displayStats(data.stats || {});
} else {
console.warn('获取评论失败:', data.message);
document.getElementById('comments-list').innerHTML = '<div style="text-align: center; color: #999; padding: 20px;">暂无评论</div>';
}
} catch (parseError) {
console.error('JSON解析错误:', parseError);
console.error('服务器响应:', text);
document.getElementById('comments-list').innerHTML = '<div style="text-align: center; color: #dc3545; padding: 20px;">数据格式错误</div>';
}
})
.catch(error => {
console.error('加载评论失败:', error);
document.getElementById('comments-list').innerHTML = '<div style="text-align: center; color: #dc3545; padding: 20px;">加载评论失败，请刷新页面重试</div>';
});
} catch (error) {
console.error('loadComments函数执行错误:', error);
document.getElementById('comments-list').innerHTML = '<div style="text-align: center; color: #dc3545; padding: 20px;">系统错误，请刷新页面</div>';
}
}
// 显示评论统计
function displayStats(stats) {
if (!stats || typeof stats !== 'object') {
document.getElementById('comment-stats').innerHTML = `
<div style="text-align: center; color: #666;">
<p>统计数据加载失败</p>
</div>
`;
return;
}
const totalComments = parseInt(stats.total_comments) || 0;
if (totalComments === 0) {
document.getElementById('comment-stats').innerHTML = `
<div style="text-align: center; color: #666;">
<p>暂无评论数据</p>
</div>
`;
return;
}
const statsHtml = `
<div class="stats-item">
<span class="stats-label">📊 总评论数</span>
<span class="stats-value">${totalComments}</span>
</div>
`;
document.getElementById('comment-stats').innerHTML = statsHtml;
}
// 显示评论列表
function displayComments(comments) {
try {
const commentsListElement = document.getElementById('comments-list');
if (!commentsListElement) {
console.error('找不到评论列表容器');
return;
}
if (!Array.isArray(comments) || comments.length === 0) {
commentsListElement.innerHTML = '<div style="text-align: center; color: #999; padding: 20px;">暂无评论，快来发表第一个评论吧！</div>';
return;
}
let html = '';
comments.forEach((comment, index) => {
try {
if (comment && typeof comment === 'object') {
html += generateCommentHtml(comment);
} else {
console.warn(`评论数据格式错误，索引: ${index}`, comment);
}
} catch (error) {
console.error(`生成评论HTML失败，索引: ${index}`, error, comment);
}
});
if (html) {
commentsListElement.innerHTML = html;
bindReplyButtons();
} else {
commentsListElement.innerHTML = '<div style="text-align: center; color: #dc3545; padding: 20px;">评论数据处理失败</div>';
}
} catch (error) {
console.error('displayComments函数执行错误:', error);
const commentsListElement = document.getElementById('comments-list');
if (commentsListElement) {
commentsListElement.innerHTML = '<div style="text-align: center; color: #dc3545; padding: 20px;">显示评论时发生错误</div>';
}
}
}
// 生成评论HTML
function generateCommentHtml(comment) {
try {
if (!comment || typeof comment !== 'object') {
console.error('无效的评论数据:', comment);
return '<div class="comment-item" style="color: #dc3545; padding: 10px;">评论数据错误</div>';
}
const commentId = comment.comment_id || 0;
const userClass = comment.is_member ? 'member' : '';
const userDisplay = comment.is_member ? (comment.display_name || '会员用户') : `匿名 ( ${comment.display_ip || '未知IP'} )`;
const displayTime = comment.display_time || '未知时间';
const commentContent = comment.comment_content || '';
let html = `
<div class="comment-item">
<div class="comment-header">
<span class="comment-user ${userClass}">${userDisplay}</span>
<span class="comment-time">${displayTime}</span>
</div>
<div class="comment-content">${processMediaContent(commentContent)}</div>
<div class="comment-actions">
<button class="reply-btn" onclick="showReplyForm(${commentId})">回复</button>
${window.isAdmin ? `<button class="delete-btn" onclick="deleteComment(${commentId})" style="background:#dc3545;color:white;padding:5px 10px;border:none;border-radius:4px;cursor:pointer;margin-left:10px;">删除</button>` : ''}
</div>
<div class="reply-form" id="reply-form-${commentId}" style="display:none;">
<textarea placeholder="请输入回复内容..." style="width:100%;height:60px;padding:8px;border:1px solid #ddd;border-radius:4px;resize:vertical;"></textarea>
<div style="margin-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;clear:both;">
<input type="text" name="code" placeholder="验证码" maxlength="6" style="width:90px;height:32px;border:1px solid #ccc;border-radius:4px;text-align:center;font-size:13px;">
<img src="/source/include/captcha.php?ts=${Date.now()}" alt="点击刷新验证码" title="点击刷新验证码" style="height:32px;border-radius:4px;cursor:pointer;" onclick="this.src='/source/include/captcha.php?ts=' + Date.now();">
</div>
<div style="text-align:right;margin-top:10px;clear:both;">
<button onclick="hideReplyForm(${commentId})" style="background:#6c757d;color:white;padding:5px 15px;border:none;border-radius:4px;cursor:pointer;margin-right:10px;">取消</button>
<button onclick="submitReply(${commentId})" style="background:#007bff;color:white;padding:5px 15px;border:none;border-radius:4px;cursor:pointer;">提交回复</button>
</div>
</div>
`;
if (comment.replies && Array.isArray(comment.replies) && comment.replies.length > 0) {
html += `
<div class="replies-section">
<div class="replies-header">
<span class="replies-count">${comment.replies.length} 条回复</span>
</div>
<div class="replies-list">
`;
comment.replies.forEach((reply, index) => {
try {
if (!reply || typeof reply !== 'object') {
console.warn(`回复数据格式错误，索引: ${index}`, reply);
return;
}
html += generateReplyHtml(reply);
} catch (replyError) {
console.error(`处理回复时出错，索引: ${index}`, replyError, reply);
}
});
html += `
</div>
</div>
`;
}
html += '</div>';
return html;
} catch (error) {
console.error('generateCommentHtml函数执行错误:', error, comment);
return '<div class="comment-item" style="color: #dc3545; padding: 10px;">生成评论HTML时发生错误</div>';
}
}
// 生成回复HTML
function generateReplyHtml(reply) {
try {
if (!reply || typeof reply !== 'object') {
console.warn('回复数据格式错误', reply);
return '';
}
const replyId = reply.comment_id || reply.id || 0;
const replyUserClass = reply.is_member ? 'member' : '';
const replyUserDisplay = reply.is_member ? (reply.display_name || '会员用户') : `匿名 ( ${reply.display_ip || '未知IP'} )`;
const replyDisplayTime = reply.display_time || '未知时间';
const replyContent = reply.comment_content || '';
let html = `
<div class="reply-item">
<div class="reply-avatar">
<i class="fas fa-reply" style="color: #667eea;"></i>
</div>
<div class="reply-content">
<div class="reply-header">
<span class="comment-user ${replyUserClass}">${replyUserDisplay}</span>
<span class="reply-time">${replyDisplayTime}</span>
${window.isAdmin ? `<button onclick="deleteReply(${replyId})" class="reply-delete-btn" title="删除回复">×</button>` : ''}
</div>
<div class="reply-text">${replyContent}</div>
<div class="reply-actions">
<button class="reply-btn" onclick="showReplyForm(${replyId})" style="font-size:12px;padding:3px 8px;">回复</button>
</div>
<div class="reply-form" id="reply-form-${replyId}" style="display:none;">
<textarea placeholder="请输入回复内容..." style="width:100%;height:50px;padding:6px;border:1px solid #ddd;border-radius:4px;resize:vertical;font-size:13px;"></textarea>
<div style="margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;">
<input type="text" name="code" placeholder="验证码" maxlength="6" style="width:80px;height:28px;border:1px solid #ccc;border-radius:4px;text-align:center;font-size:12px;">
<img src="/source/include/captcha.php?ts=${Date.now()}" alt="点击刷新验证码" title="点击刷新验证码" style="height:28px;border-radius:4px;cursor:pointer;" onclick="this.src='/source/include/captcha.php?ts=' + Date.now();">
</div>
<div style="text-align:right;margin-top:8px;">
<button onclick="hideReplyForm(${replyId})" style="background:#6c757d;color:white;padding:4px 12px;border:none;border-radius:4px;cursor:pointer;margin-right:8px;font-size:12px;">取消</button>
<button onclick="submitReply(${replyId})" style="background:#007bff;color:white;padding:4px 12px;border:none;border-radius:4px;cursor:pointer;font-size:12px;">提交回复</button>
</div>
</div>
`;
if (reply.replies && Array.isArray(reply.replies) && reply.replies.length > 0) {
html += `
<div class="sub-replies" style="margin-left: 20px; margin-top: 10px; border-left: 2px solid #e9ecef; padding-left: 15px;">
`;
reply.replies.forEach((subReply, index) => {
try {
if (!subReply || typeof subReply !== 'object') {
console.warn(`子回复数据格式错误，索引: ${index}`, subReply);
return;
}
html += generateReplyHtml(subReply);
} catch (subReplyError) {
console.error(`处理子回复时出错，索引: ${index}`, subReplyError, subReply);
}
});
html += `
</div>
`;
}
html += `
</div>
</div>
`;
return html;
} catch (error) {
console.error('generateReplyHtml函数执行错误:', error, reply);
return '<div class="reply-item" style="color: #dc3545; padding: 10px;">生成回复HTML时发生错误</div>';
}
}
// 绑定评论表单提交
function bindCommentForm() {
const form = document.getElementById('comment-form');
form.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(form);
formData.append('action', 'submit_comment');
const content = formData.get('comment_content').trim();
if (content.length < 10) {
alert('评论内容至少需要10个字符');
return;
}
if (content.length > 1000) {
alert('评论内容不能超过1000个字符');
return;
}
const submitBtn = form.querySelector('button[type="submit"]');
submitBtn.disabled = true;
submitBtn.textContent = '提交中...';
fetch('/module/article_comment_handler.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
if (window.isAdmin) {
alert('评论提交成功！');
} else {
const successMessage = data.message || '评论提交成功！';
if (successMessage === '评论提交成功，等待管理员审核。') {
alert(successMessage);
} else {
alert('评论提交成功！');
}
}
form.reset();
loadComments();
} else {
alert(data.message || '评论提交失败');
}
})
.catch(error => {
console.error('提交评论失败:', error);
alert('评论提交失败，请重试');
})
.finally(() => {
submitBtn.disabled = false;
submitBtn.textContent = '发表评论';
});
});
}
// 显示回复表单
function showReplyForm(commentId) {
const replyForm = document.getElementById(`reply-form-${commentId}`);
replyForm.style.display = 'block';
}
// 隐藏回复表单
function hideReplyForm(commentId) {
const replyForm = document.getElementById(`reply-form-${commentId}`);
replyForm.style.display = 'none';
}
// 提交回复
function submitReply(commentId) {
const replyForm = document.getElementById(`reply-form-${commentId}`);
const codeInput = replyForm.querySelector('input[name="code"]');
const checkCode = codeInput ? codeInput.value.trim() : '';
if (checkCode.length < 4) {
alert('请输入验证码');
return;
}
const textarea = replyForm.querySelector('textarea');
const content = textarea.value.trim();
if (content.length < 5) {
alert('回复内容至少需要5个字符');
return;
}
if (content.length > 1000) {
alert('回复内容不能超过1000个字符');
return;
}
const artId = document.querySelector('input[name="art_id"]').value;
const formData = new FormData();
formData.append('action', 'submit_reply');
formData.append('art_id', artId);
formData.append('parent_id', commentId);
formData.append('comment_content', content);
formData.append('code', checkCode);
fetch('/module/article_comment_handler.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('回复提交成功！');
hideReplyForm(commentId);
textarea.value = '';
loadComments();
} else {
alert(data.message || '回复提交失败');
}
})
.catch(error => {
console.error('提交回复失败:', error);
alert('回复提交失败，请重试');
});
}
// 绑定回复按钮事件
function bindReplyButtons() {
// 实际的绑定通过onclick属性完成
}
// 检查管理员权限
function checkAdminPermission() {
fetch('/module/article_comment_handler.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: 'action=check_admin'
})
.then(response => response.json())
.then(data => {
if (data.success) {
window.isAdmin = data.is_admin;
console.log('管理员权限检查完成:', window.isAdmin ? '是管理员' : '非管理员');
}
})
.catch(error => {
console.error('检查管理员权限失败:', error);
window.isAdmin = false;
});
}
// 删除评论
function deleteComment(commentId) {
if (!window.isAdmin) {
alert('您没有删除权限');
return;
}
if (!confirm('确定要删除这条评论吗？删除后无法恢复。')) {
return;
}
fetch('/module/article_comment_handler.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `action=delete_comment&comment_id=${commentId}`
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('评论删除成功');
loadComments();
} else {
alert(data.message || '删除失败');
}
})
.catch(error => {
console.error('删除评论失败:', error);
alert('删除失败，请重试');
});
}
// 删除回复
function deleteReply(replyId) {
if (!window.isAdmin) {
alert('您没有删除权限');
return;
}
if (!confirm('确定要删除这条回复吗？删除后无法恢复。')) {
return;
}
fetch('/module/article_comment_handler.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `action=delete_reply&reply_id=${replyId}`
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('回复删除成功');
loadComments();
} else {
alert(data.message || '删除失败');
}
})
.catch(error => {
console.error('删除回复失败:', error);
alert('删除失败，请重试');
});
}
// 验证码刷新
let captchaRefreshTimer = null;
function refreshCaptcha() {
if (captchaRefreshTimer) {
clearTimeout(captchaRefreshTimer);
}
captchaRefreshTimer = setTimeout(() => {
const codeContainer = document.getElementById('mycode');
if (!codeContainer) return;
codeContainer.innerHTML = '<img src="/source/include/captcha.php?ts=' + Date.now() + '" ' +
'alt="点击刷新验证码" title="点击刷新验证码" ' +
'style="height:36px; border-radius:4px; box-shadow:0 0 3px rgba(0,0,0,0.1); cursor:pointer; vertical-align:middle;" ' +
'onclick="refreshCaptcha()">';
}, 300);
}
// === 表情系统 ===
// 在DOM加载完成后立即定义表情函数
function toggleEmojiPicker(textareaId) {
console.log('切换表情选择器:', textareaId);
const picker = document.getElementById(`emoji-picker-${textareaId}`);
if (!picker) {
console.error('找不到表情选择器:', `emoji-picker-${textareaId}`);
return;
}
// 隐藏其他表情选择器
document.querySelectorAll('.emoji-picker').forEach(p => {
if (p !== picker) p.style.display = 'none';
});
if (picker.style.display === 'none' || picker.style.display === '') {
picker.style.display = 'block';
console.log('显示表情选择器');
} else {
picker.style.display = 'none';
console.log('隐藏表情选择器');
}
}
function insertEmoji(textareaId, emoji) {
console.log('插入表情:', textareaId, emoji);
const textarea = document.getElementById(textareaId);
if (!textarea) {
console.error('找不到文本框:', textareaId);
return;
}
const start = textarea.selectionStart || 0;
const end = textarea.selectionEnd || 0;
const text = textarea.value;
textarea.value = text.substring(0, start) + emoji + text.substring(end);
textarea.selectionStart = textarea.selectionEnd = start + emoji.length;
textarea.focus();
// 隐藏表情选择器
const picker = document.getElementById(`emoji-picker-${textareaId}`);
if (picker) {
picker.style.display = 'none';
}
// 触发input事件更新字符计数
const inputEvent = new Event('input', { bubbles: true });
textarea.dispatchEvent(inputEvent);
console.log('表情插入完成');
}
// 确保函数在全局作用域立即可用
window.toggleEmojiPicker = toggleEmojiPicker;
window.insertEmoji = insertEmoji;
// 验证码和表情系统初始化
document.addEventListener('DOMContentLoaded', function() {
// 验证码初始化
const codeInput = document.getElementById('comment-code-input');
if (codeInput) {
refreshCaptcha();
codeInput.addEventListener('focus', refreshCaptcha);
}
// 绑定表情按钮点击事件
const emojiBtn = document.getElementById('emoji-btn-main');
if (emojiBtn) {
emojiBtn.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
toggleEmojiPicker('main-comment-textarea');
});
}
// 点击页面其他地方时隐藏表情选择器
document.addEventListener('click', function(event) {
const emojiPickers = document.querySelectorAll('.emoji-picker');
emojiPickers.forEach(picker => {
const isClickInsidePicker = picker.contains(event.target);
const isClickOnEmojiButton = event.target.id === 'emoji-btn-main' || event.target.textContent === '😊';
if (!isClickInsidePicker && !isClickOnEmojiButton) {
picker.style.display = 'none';
}
});
});
console.log('表情系统初始化完成');
});
function safeHTML(str) {
return str.replace(/</g, "<").replace(/>/g, ">");
}
function processMediaContent(content) {
if (!content || typeof content !== 'string') return content || '';
let text = safeHTML(content);
// 音频文件
text = text.replace(
/(https?:\/\/[^\s<>"']+\.(mp3|wav|aac|m4a|ogg|flac))/gi,
(match) => `
<div class="media-container audio-container">
<div class="media-header">🎵 音频</div>
<audio controls autoplay preload="metadata" style="width:100%;max-width:400px;">
<source src="${match}" type="audio/mpeg">
您的浏览器不支持音频播放。
</audio>
<div class="media-link"><a href="${match}" target="_blank" rel="noopener">📥 下载音频</a></div>
</div>`
);
// 图片
text = text.replace(
/(https?:\/\/[^\s<>"']+\.(jpg|jpeg|png|gif|webp|svg))/gi,
(match) => `
<div class="media-container image-container">
<div class="media-header">🖼️ 图片</div>
<img src="${match}" alt="图片" loading="lazy"
style="max-width:100%;border-radius:8px;cursor:pointer;"
onclick="window.open('${match}','_blank')">
<div class="media-link"><a href="${match}" target="_blank" rel="noopener">查看原图</a></div>
</div>`
);
// 视频文件直链
text = text.replace(
/(https?:\/\/[^\s<>"']+\.(mp4|webm|mkv|mov|avi|flv|m4v))/gi,
(match) => `
<div class="media-container video-container">
<div class="media-header">🎬 视频文件</div>
<video controls preload="metadata" style="width:100%;max-width:500px;border-radius:8px;">
<source src="${match}" type="video/mp4">
您的浏览器不支持视频播放。
</video>
<div class="media-link"><a href="${match}" target="_blank" rel="noopener">新窗口播放</a></div>
</div>`
);
return text;
}
</script>
<!-- 评论系统样式 -->
<style>
.comment-system {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
}
#comment-stats {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 12px;
padding: 25px;
margin-bottom: 30px;
color: white;
box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}
.stats-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: black;
}
.stats-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.stats-label {
font-weight: 600;
font-size: 16px;
}
.stats-value {
font-size: 18px;
font-weight: bold;
margin-right: 10px;
}
#comment-form {
background: #fff;
border-radius: 12px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid #e9ecef;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #495057;
font-size: 14px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid #e9ecef;
border-radius: 8px;
font-size: 14px;
transition: all 0.3s ease;
box-sizing: border-box;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
.char-count {
text-align: right;
font-size: 12px;
color: #6c757d;
margin-top: 5px;
}
.char-count.warning {
color: #fd7e14;
}
.char-count.danger {
color: #dc3545;
}
#comments-list {
margin-top: 30px;
}
.comment-item {
background: #fff;
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
border: 1px solid #f1f3f4;
transition: all 0.3s ease;
}
.comment-item:hover {
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #f1f3f4;
}
.comment-user {
font-weight: 600;
color: #495057;
}
.comment-user.member {
color: #667eea;
position: relative;
}
.comment-user.member::after {
content: "VIP";
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
font-size: 10px;
padding: 2px 6px;
border-radius: 10px;
margin-left: 8px;
font-weight: bold;
}
.comment-time {
color: #6c757d;
font-size: 13px;
}
.comment-content {
line-height: 1.7;
color: #333;
margin-bottom: 15px;
word-wrap: break-word;
white-space: pre-wrap;
}
.comment-actions {
display: flex;
gap: 10px;
align-items: center;
}
.reply-btn {
background: #28a745;
color: white;
border: none;
padding: 6px 16px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
}
.reply-btn:hover {
background: #218838;
transform: translateY(-1px);
}
.delete-btn {
background: #dc3545;
color: white;
border: none;
padding: 6px 16px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: all 0.3s ease;
}
.delete-btn:hover {
background: #c82333;
transform: translateY(-1px);
}
.reply-form {
margin-top: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.reply-form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
resize: vertical;
font-size: 14px;
box-sizing: border-box;
}
.reply-form textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}
.replies-section {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #e9ecef;
}
.replies-header {
margin-bottom: 10px;
}
.replies-count {
font-size: 13px;
color: #667eea;
font-weight: 600;
}
.replies-list {
margin-left: 10px;
}
.reply-item {
display: flex;
background: #f8f9fa;
border-radius: 8px;
padding: 12px;
margin-bottom: 10px;
border-left: 3px solid #667eea;
}
.reply-avatar {
margin-right: 10px;
padding-top: 2px;
}
.reply-content {
flex: 1;
}
.reply-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
.reply-time {
font-size: 12px;
color: #6c757d;
}
.reply-text {
font-size: 14px;
line-height: 1.5;
color: #333;
}
.reply-delete-btn {
background: #dc3545;
color: white;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 12px;
cursor: pointer;
margin-left: 10px;
}
.reply-actions {
margin-top: 8px;
padding-top: 5px;
}
.reply-actions .reply-btn {
background: #17a2b8;
color: white;
border: none;
padding: 3px 8px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.reply-actions .reply-btn:hover {
background: #138496;
transform: translateY(-1px);
}
.emoji-picker {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1000;
margin-top: 5px;
}
/* 确保表情选择器的父容器有相对定位 */
.comment-form > div[style*="position: relative"],
.reply-form > div[style*="position: relative"] {
position: relative !important;
}
.emoji-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 5px;
padding: 10px;
}
.emoji-grid span {
font-size: 20px;
cursor: pointer;
padding: 8px;
text-align: center;
border-radius: 4px;
transition: background-color 0.2s;
}
.emoji-grid span:hover {
background-color: #f0f0f0;
}
.media-container {
margin: 15px 0;
padding: 15px;
background: #f8f9fa;
border-radius: 12px;
border-left: 4px solid #007bff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.media-container:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
transform: translateY(-2px);
}
.media-header {
font-weight: bold;
color: #495057;
margin-bottom: 10px;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
.media-link {
margin-top: 10px;
text-align: center;
}
.media-link a {
color: #007bff;
text-decoration: none;
font-size: 13px;
padding: 5px 12px;
border: 1px solid #007bff;
border-radius: 20px;
display: inline-block;
transition: all 0.3s ease;
}
.media-link a:hover {
background: #007bff;
color: white;
text-decoration: none;
}
.audio-container {
border-left-color: #28a745;
}
.audio-container .media-header {
color: #28a745;
}
.video-container {
border-left-color: #dc3545;
}
.video-container .media-header {
color: #dc3545;
}
.image-container {
border-left-color: #17a2b8;
}
.image-container .media-header {
color: #17a2b8;
}
.image-container img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 10px 0;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.image-container img:hover {
transform: scale(1.02);
}
.media-container audio, .media-container video {
width: 100%;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin: 10px 0;
}
.media-container video {
max-width: 500px;
}
.media-container audio {
max-width: 400px;
}
@media (max-width: 768px) {
.comment-system {
padding: 15px;
}
#comment-stats {
padding: 20px;
}
#comment-form {
padding: 20px;
}
.comment-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.comment-actions {
flex-wrap: wrap;
}
.reply-item {
margin-left: 10px;
}
.stats-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
@media (max-width: 480px) {
.comment-system {
padding: 10px;
}
#comment-stats,
#comment-form,
.comment-item {
padding: 15px;
}
}
</style>
</body>
</html>
