搜索
首页头条优化商城类网站首页的方法

优化商城类网站首页的方法

Nov 29, 2017 am 10:43 AM
商城方法

随着互联网时代的发展,越来越多的商城网站与我们见面,那么我们如何能把一个商城网站做到最好呢?那就从主页出发吧。主页对于任何一个网站而言都是至关重要的,电子商务的网站也不例外,它必须兼具两个方面,一方便用户访问与查询,二方便搜索引擎抓取与爬行。  

我们需要明确的是任何一个访客,都有可能成为潜在客户,因此,你的网站必须让访客清楚:  

你是谁  

你在卖什么  

为什么从你这里购买  

尽可能的缩短点击数,促成购买闭环  

电子商务SEO: 如何优化你网上商城的主页!

脚本之家认为对于电商网站主页的优化我们需要注意如下几个细节:  

电商网站用户体验优化:  

如上所述,访问您的主页的用户需要和清晰的看到你公司的产品信息与服务,因此在设计主页顶部导航的时候,应该尽量包含如下内容:  

鲜明的logo、合理的分类导航(关键词挖掘分配)、产品服务、优惠促销、登录框、以及搜索框。  

下面以京东的顶部导航为例子:  

京东商城 SEO优化

我们可以清楚的看到双11快来了,京东在首页顶端推送了广告,而右侧红框在客户服务部分弹出了相关的一些信息介绍,这里需要说明的是我不知道有多少PC端用户会关注这个部分,当然京东的平台体量大,可能并非重视这些小细节,这里对于中小型的电商网站,我们其实可以把重要的相关信息放到“登录”按钮框下,以便在用户登录的时候吸引更多的注意力。  

移动端的注意事项:  

目前大部分流量来源于移动端,所以响应式设计基本是标配,开发人员需要让访客在移动端有一个更好的用户体验,因此你可能需要关注:  

菜单简洁便利、搜索简单、登录方便、返回首页方便。  

天猫 seo

接下来我们看电子商务网站主页该如何优化,我们需要研究的因素有如下几点:  

网站安全(SSL)、主页标题、主页描述、H1标签、内容和关键字用法、图片、结构化数据、页脚和包含哪些内容。  

1、网站安全(SSL)  

在您的服务器上安装安全证书是所有电子商务网站的必备条件。  

SSL将确保您的网站和服务器之间传输的所有信息都是安全的。像用户名,订单信息,付款细节等都是通过安全的服务器通信传输的。  

除了安全方面之外,拥有一个https网站还有两个目的:这对SEO很有用,对用户信任至关重要。  

2、主页标题优化  

需要明确的是你的主页标题需要包含:核心关键词与品牌词,尽量用一句话的形式来表达,同时附带吸引点击的话术。这里用聚美优品的标题给大家举例。


聚美优品-【极速免税店品牌防伪码】正品化妆品电商,在美上市,30天无理由退货,质量保险  

它的这个标题略长,不能完全展现在搜索结果中,建议大家控制在32个字符以内,但具有一定的借鉴意义,突出了品牌词,突出了免税,防伪,30天无理由退货等核心价值。  

3、H1标签  

您的电子商务网站(包括主页)的每个页面都应该有一个h1标签。  

H1标签(

)为搜索引擎提供了有关页面内容的另一个提示。这是突出搜索引擎机器人页面的重要部分的另一种方式。  

一般情况下,您应该了解有关使用H1和标签的几件事:  

h1标签不必与标签相同,但是可以相同,大多数主题会自动将页面的标题作为H1标签输出,但如果需要,可以将其更改为更多信息。  </p> <p>值得注意的是:标签应该以分层的方式使用,即在html代码中找到的第一个标签应该是h1,然后可以有h2,h3,h4等。  </p> <p>4、主页的内容使用的关键词  </p> <p>对于电商网站主页是否应该具有内容来做支撑可以从两个角度来看,如果是行业大站像京东,淘宝这样的就可以完全忽略,但对于中小企业的电商网站,我们还是需要采取一定的文字内容做支撑。  </p> <p>重要提示:您的首页上的内容必须是唯一的,即便你的产品与服务可能和很多公司类似。  </p> <p>5、图像优化  </p> <p>图片对于一个电商网站是最重要不过的了,很多电商网站包含大量的图片,用以更好的展现给访客,通过视觉营销来提高转化率,这会导致一个小问题,就是图片加载时间过于长。  </p> <p>这里给大家的建议是上传网站之前将高清图片进行批量压缩,目前互联网上有很多专业的付费工具,特别方便。  </p> <p>这里还有一个图片优化经常忽略的问题,就是少了ALT标签,这个标签对于百度图片搜索至关重要,关于图片优化我会在日后详细讲解。  </p> <p>6、结构化数据与页脚导航  </p> <p>结构化数据是很多电商网站都会忽略的一个问题,当然做结构化数据需要一定的数据但对于国内一些知名的电商网站很少会用到这部分内容,这部分流量被大大的遗忘了。  </p> <p>最后是这个可能被大家认为做不重要的页脚啦,也就是底部的导航,其实这个地方体现了一个网站的专业度,是提升你品牌价值的一个好地方。  </p> <p>以上内容就是优化商城类网站首页的方法,希望能帮助大家更好的优化自己的商城网站。</p> <p>相关推荐:</p> <p><a href="http://www.php.cn/div-tutorial-334961.html" target="_self">CssStats – 分析和优化网站 CSS 代码的利器</a></p> <p><a href="http://www.php.cn/php-weizijiaocheng-228165.html" target="_self">如何优化网站高并发访问?</a></p> <p><a href="http://www.php.cn/php-weizijiaocheng-185470.html" target="_self">php中自动提取文章内容关键字seo优化网站的函数步骤</a></p></div><div class="wzconShengming_sp"><div class="bzsmdiv_sp">声明</div><div>本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn</div></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><div class="AI_ToolDetails_main4sR"><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>热AI工具</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/undresserai-undress" title="Undresser.AI Undress"class="phpmain_tab2_mids_title"><h3>Undresser.AI Undress</h3></a><p>人工智能驱动的应用程序,用于创建逼真的裸体照片</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/ai-clothes-remover" title="AI Clothes Remover"class="phpmain_tab2_mids_title"><h3>AI Clothes Remover</h3></a><p>用于从照片中去除衣服的在线人工智能工具。</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/undress-ai-tool" title="Undress AI Tool"class="phpmain_tab2_mids_title"><h3>Undress AI Tool</h3></a><p>免费脱衣服图片</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/clothoffio" title="Clothoff.io"class="phpmain_tab2_mids_title"><h3>Clothoff.io</h3></a><p>AI脱衣机</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/ai/video-swap" title="Video Face Swap"class="phpmain_tab2_mids_title"><h3>Video Face Swap</h3></a><p>使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/ai">显示更多</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>热门文章</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796785841.html" title="刺客信条阴影:贝壳谜语解决方案" class="phpgenera_Details_mainR4_bottom_title">刺客信条阴影:贝壳谜语解决方案</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 周前</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796789525.html" title="Windows 11 KB5054979中的新功能以及如何解决更新问题" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979中的新功能以及如何解决更新问题</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 周前</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796785857.html" title="在哪里可以找到原子中的起重机控制钥匙卡" class="phpgenera_Details_mainR4_bottom_title">在哪里可以找到原子中的起重机控制钥匙卡</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>3 周前</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796784440.html" title="<🎜>:死铁路 - 如何完成所有挑战" class="phpgenera_Details_mainR4_bottom_title"><🎜>:死铁路 - 如何完成所有挑战</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>4 周前</span><span>ByDDD</span></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/1796784000.html" title="Atomfall指南:项目位置,任务指南和技巧" class="phpgenera_Details_mainR4_bottom_title">Atomfall指南:项目位置,任务指南和技巧</a><div class="phpgenera_Details_mainR4_bottoms_info"><span>1 个月前</span><span>ByDDD</span></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/article.html">显示更多</a></div></div></div><div class="phpgenera_Details_mainR3"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hottools2.png" src="/static/imghw/default1.png" alt="" /><h2>热工具</h2></div><div class="phpgenera_Details_mainR3_bottom"><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/1579" title="SecLists" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/008/169442209227215.jpg" src="/static/imghw/default1.png" alt="SecLists" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/1579" title="SecLists" class="phpmain_tab2_mids_title"><h3>SecLists</h3></a><p>SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/510" title="PhpStorm Mac 版本" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d377b7b49ae828.jpg" src="/static/imghw/default1.png" alt="PhpStorm Mac 版本" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/510" title="PhpStorm Mac 版本" class="phpmain_tab2_mids_title"><h3>PhpStorm Mac 版本</h3></a><p>最新(2018.2.1 )专业的PHP集成开发工具</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/506" title="WebStorm Mac版" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d36e6254963493.png" src="/static/imghw/default1.png" alt="WebStorm Mac版" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/506" title="WebStorm Mac版" class="phpmain_tab2_mids_title"><h3>WebStorm Mac版</h3></a><p>好用的JavaScript开发工具</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/92" title="记事本++7.3.1" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg" src="/static/imghw/default1.png" alt="记事本++7.3.1" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/92" title="记事本++7.3.1" class="phpmain_tab2_mids_title"><h3>记事本++7.3.1</h3></a><p>好用且免费的代码编辑器</p></div></div><div class="phpmain_tab2_mids_top"><a href="https://m.php.cn/zh/toolset/development-tools/1575" title="DVWA" class="phpmain_tab2_mids_top_img"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/005/169233952150073.png" src="/static/imghw/default1.png" alt="DVWA" /></a><div class="phpmain_tab2_mids_info"><a href="https://m.php.cn/zh/toolset/development-tools/1575" title="DVWA" class="phpmain_tab2_mids_title"><h3>DVWA</h3></a><p>Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中</p></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/ai">显示更多</a></div></div></div><div class="phpgenera_Details_mainR4"><div class="phpmain1_4R_readrank"><div class="phpmain1_4R_readrank_top"><img onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" onerror="this.onerror=''; this.src='/static/imghwm/default1.png'" class="lazy" data-src="/static/imghwm/hotarticle2.png" src="/static/imghw/default1.png" alt="" /><h2>热门话题</h2></div><div class="phpgenera_Details_mainR4_bottom"><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/gmailyxdlrkzn" title="gmail邮箱登陆入口在哪里" class="phpgenera_Details_mainR4_bottom_title">gmail邮箱登陆入口在哪里</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>7691</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>15</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/java-tutorial" title="Java教程" class="phpgenera_Details_mainR4_bottom_title">Java教程</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1639</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>14</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1393</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>52</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1287</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>25</span></div></div></div><div class="phpgenera_Details_mainR4_bottoms"><a href="https://m.php.cn/zh/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a><div class="phpgenera_Details_mainR4_bottoms_info"><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/eyess.png" src="/static/imghw/default1.png" alt="" /><span>1229</span></div><div class="phpgenera_Details_mainR4_bottoms_infos"><img class="lazy" data-src="/static/imghwm/tiezi.png" src="/static/imghw/default1.png" alt="" /><span>29</span></div></div></div></div><div class="phpgenera_Details_mainR3_more"><a href="https://m.php.cn/zh/faq/zt">显示更多</a></div></div></div></div></main><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>公益在线PHP培训,帮助PHP学习者快速成长!</p></div><div class="footermid"><a href="https://m.php.cn/zh/about/us.html">关于我们</a><a href="https://m.php.cn/zh/about/disclaimer.html">免责声明</a><a href="https://m.php.cn/zh/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><script> jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script><script>// 通用函数,用于显示或隐藏元素 function toggleElementsDisplay(className, show) { const elements = document.getElementsByClassName(className); for (let i = 0; i < elements.length; i++) { elements[i].style.display = show ? "block" : "none"; } } // 页面加载完成后执行的主函数 document.addEventListener("DOMContentLoaded", () => { // 1. 绑定菜单按钮事件 const bindMenuEvents = () => { const toggleDisplay = (className, show, eventId) => { const element = document.getElementById(eventId); if (element) { element.addEventListener("click", (event) => { event.preventDefault(); toggleElementsDisplay(className, show); }); } }; toggleDisplay("m_editormain12main", true, "fixed_tab_img"); toggleDisplay("m_editormain12main", false, "fixed_tab_topi"); toggleDisplay("m_editormain12main", false, "fixed_tab_close"); toggleDisplay("m_menu", true, "lan1sp"); toggleDisplay("m_menu", false, "m_editormain12main_topi_sp"); toggleDisplay("m_menu_lang", true, "lan1"); toggleDisplay("m_menu_lang", false, "m_editormain12main_topi_lan"); }; // 2. 绑定滚动链接事件 const bindScrollLinks = () => { const titleList = document.getElementById("fixed_tab_titlelist"); const menuMain = document.getElementsByClassName("m_editormain12main")[0]; const links = document.querySelectorAll('.fixed_tab_a'); links.forEach(linkElement => { if (linkElement) { linkElement.addEventListener("click", async (e) => { e.preventDefault(); e.stopPropagation(); // 先隐藏菜单 if (menuMain) menuMain.style.display = "none"; if (titleList) titleList.style.display = "none"; // 获取目标元素的 ID const targetId = linkElement.getAttribute('href').substring(1); const targetElement = document.getElementById(targetId); // 等待 DOM 更新 await new Promise(resolve => requestAnimationFrame(resolve)); // 滚动到目标位置 if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth", block: "start" }); } }); } }); }; // 3. 绑定关闭按钮事件 const bindCloseButton = () => { const closeButton = document.querySelector(".phpgenera_Details_mainR1_close"); const container = document.querySelector(".phpgenera_Details_mainR1"); if (closeButton && container) { closeButton.addEventListener("click", (event) => { event.preventDefault(); container.style.display = "none"; }); } }; // 4. 初始化菜单交互功能 const initMenuInteraction = () => { const menuGroupElements = document.querySelectorAll('.layui-menu-item-group'); menuGroupElements.forEach(menuItem => { menuItem.addEventListener('click', function(event) { if (event.target.closest('.m_menusnames')) { return; } this.classList.toggle('layui-menu-item-down'); this.classList.toggle('layui-menu-item-up'); const subMenuContainer = this.querySelector('.m_menusnames'); const icon = this.querySelector('.layui-icon'); if (subMenuContainer && icon) { if (this.classList.contains('layui-menu-item-down')) { subMenuContainer.style.display = 'block'; icon.classList.remove('layui-icon-down'); icon.classList.add('layui-icon-up'); } else { subMenuContainer.style.display = 'none'; icon.classList.remove('layui-icon-up'); icon.classList.add('layui-icon-down'); } } }); }); }; // 5. 初始化 layui 功能 const initLayui = () => { if (typeof layui !== 'undefined') { layui.use(function () { var util = layui.util; if (util && util.fixbar) { util.fixbar({ on: { mouseenter: function (type) { if (layer && layer.tips) { layer.tips(type, this, { tips: 4, fixed: true, }); } }, mouseleave: function (type) { if (layer && layer.closeAll) { layer.closeAll("tips"); } }, }, }); } }); } }; // 执行所有初始化函数 bindMenuEvents(); bindScrollLinks(); bindCloseButton(); initMenuInteraction(); initLayui(); }); </script></body></html>