data-type="{if $type=='article'}article{elseif $type=='page'}page{elseif $type=='index'}index{else}category{/if}" data-infoid="{if $type=='article'}{$article.Category.ID} {elseif $type=='page'}{$article.ID}{elseif $type=='index'} {else}{$category.ID}{/if}"

jQuery(document).ready(function($){ var datatype=$("#hamburgermenu").attr("data-type"); $(".dhgl>li ").each(function(){ try{ var myid=$(this).attr("id"); if("index"==datatype){ if(myid=="nvabar-item-index"){ $("#nvabar-item-index a:first-child").addClass("on"); } }else if("category"==datatype){ var infoid=$("#hamburgermenu").attr("data-infoid"); if(infoid!=null){ var b=infoid.split(' '); for(var i=0;i<b.length;i++){ if(myid=="navbar-category-"+b[i]){ $("#navbar-category-"+b[i]+" a:first-child").addClass("on"); } } } }else if("article"==datatype){ var infoid=$("#hamburgermenu").attr("data-infoid"); if(infoid!=null){ var b=infoid.split(' '); for(var i=0;i<b.length;i++){ if(myid=="navbar-category-"+b[i]){ $("#navbar-category-"+b[i]+" a:first-child").addClass("on"); } } } }else if("page"==datatype){ var infoid=$("#hamburgermenu").attr("data-infoid"); if(infoid!=null){ if(myid=="navbar-page-"+infoid){ $("#navbar-page-"+infoid+" a:first-child").addClass("on"); } } }else if("tag"==datatype){ var infoid=$("#hamburgermenu").attr("data-infoid"); if(infoid!=null){ if(myid=="navbar-tag-"+infoid){ $("#navbar-tag-"+infoid+" a:first-child").addClass("on"); } } } }catch(E){} });});

#hamburgermenu .dhgl li a.on{background:#333;color:#fff;}

天南地北大拜年# 一起领红包>根据您提供的代码，这是一个使用 jQuery 来实现网页导航栏动态位置调整、滚动到特定内容区域时高亮导航项，以及用户留言和评价功能的网页。下面是对这些功能的报告：

### 1. 导航栏位置调整

- **功能描述**: 导航栏的位置会根据浏览器窗口的大小动态调整，以确保它在视觉上居中显示。

- **实现方法**: 使用 jQuery 监听 `resize` 事件，实时计算导航栏的宽度，并动态设置其 `right` CSS属性。

### 2. 滚动导航高亮

- **功能描述**: 当用户滚动到网页的某个特定内容区域时，对应的导航项会被高亮显示。

- **实现方法**: 首先，获取每个内容区域的位置顶部值并存入数组。然后，监听 `scroll` 事件，根据滚动位置判断当前处于哪个内容区域，并使用 `.addClass("selected")` 来高亮当前导航项。

### 3. 用户留言功能

- **功能描述**: 用户可以在网页上留下自己的意见或建议。

- **实现方法**: 使用 HTML 的 `` 元素创建一个多行文本输入框，并通过 jQuery 监听按钮点击事件来处理留言的提交。

### 4. 星级评价功能

- **功能描述**: 用户可以通过点击星星图标来对网页进行评价。

- **实现方法**: HTML 使用 `` 元素创建星星图标，并通过 jQuery 来监听点击事件，根据点击的星星图标更新页面上的评级显示。

### 5. 功能完善建议

- **用户体验**: 增加留言提交后的反馈机制，如提示用户留言成功或出现错误。

- **交互设计**: 对于星级评价，可以增加更多的交互效果，如星星点击效果，以及评价后的结果展示。

- **响应式设计**: 确保网页在不同设备上均有良好的显示效果，包括手机和平板电脑。

- **性能优化**: 对于 `scroll` 和 `resize` 事件，应考虑节流（throttle）或防抖（debounce）技术，以避免过度事件处理导致的性能问题。

### 6. 错误和警告

- **代码错误**: 在您的代码中，有几个问题需要解决。比如，变量 `sectionHeightArray` 应该在 `$(window).scroll` 事件处理函数外部声明，否则它可能无法正确引用。此外，按钮点击事件处理函数没有提供，需要补充相应的代码来处理用户的交互。

- **跨浏览器兼容性**: 需要确保所有的 jQuery 代码在不同的浏览器上都能正常工作，特别是旧版本的浏览器。

### 7. 安全性

- **XSS防范**: 确保从用户那里收集的数据在插入到网页上之前进行了适当的清理，以防止跨站脚本（XSS）攻击。

整体而言，该网页的交互功能对于用户参与和反馈提供了良好的基础，但在发布前需要进行详细的测试和优化以确保最佳的用户体验和性能。类图（15分）：

主题：智能家居控制系统

描述：为一个智能家居控制系统绘制组件图，展示系统中各个组件如用户界面、数据存储、设备控制等的关系

行代码就能让我的网站支持代码高亮的工具库，也支持在 Vue 中使用，强烈推荐给大家。

关于 highlight.js

highlight.js 是一款使用 javascript 开发代码高亮工具库，能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式，从而看起来更舒服，增强阅读体验。

highlight.js 的技术特性

• 支持 197 种开发语言和 246 种代码高亮风格主题
• 自动开发语言检测
• 支持多种语言混合代码同时高亮
• 支持任何 HTML 标签，不仅仅是<code></code>
• 支持 npm 安装，可以在 Vue.js 中使用，也可以在 node.js 中使用
• 无依赖，与任何 js 框架兼容

为什么要用 highlight.js

常来我网站的小伙伴都知道，我的文章有一个栏目是“前端”，主要推荐一下实用的前端开源项目或者组件库，写技术类文章免不了要贴代码，我的网站基于 wordpress 搭建，此前我一直为找一款代码高亮插件烦恼，但大部分 wordpress 的代码高亮插件实在太臃肿，出来的样式又不美观。大多时候是截图 VsCode 的代码界面，甚至还用过 codepng 这个工具把代码变成图片贴在文章中，但这样做是美观了，但也存在2个问题：

• 长代码图片会缩放，阅读体验不佳
• 搜索引擎不识别，对 SEO 不友好

最终还是找到了 highlight.js，完美解决了上面两个问题，而且配置简单，演示漂亮，定制化简单。不禁感叹：用纯前端的方式解决，才能精准控制，实现想要的效果。

使用教程：为我的网站添加代码高亮功能

下面以我的网站为例，展示将 highlight.js 用在我们的项目上的方法。首先 highlight.js 支持 cdn 直接引入和 npm 安装，我的网站基于 wordpress 开发，主题是自己写的，最简单的方式就是在文章详情页引入 highlight.js 和主题样式。

虽然 highlight.js 支持几百种开发语言，但为了将文件体积控制到最小，我们可以点击“get version”按钮进入下载页，通过勾选我们需要的开发语言，来构建最轻量的库。

下载解压后得到的 highlight.min.js 就是我们需要引入的 js 文件，主题样式都在 style 文件夹里，我选择了一个比较喜欢的 monokai-sublime 主题，只需要一个 css 文件，然后初始化：

<link href="/js/monokai-sublime.min.css" rel="stylesheet" type="text/css">
<script src="/js/highlight.min.js"></script>
<script>
   hljs.highlightAll();
</script>

就是这么简单，highlight.js 会自动将文章中的 <pre><code></code></pre> 代码进行识别语言并且高亮，一切就是这么简单。为了让代码显示更协调，我用几行 css 控制了包裹层的圆角以及背景颜色、字体大小等，大功告成。

.post-content .wp-block-code {
   background-color: #F6F8FF;
   border-radius: 16px;
   font-size: 16px;
   padding: 22px 22px 22px 38px;
   margin-top: 22px;
   margin-bottom: 22px;
}
.post-content .wp-block-code {
   line-height: 1.2;
   font-size: 15px;
   padding: 10px;
   overflow-x: auto;
}
.post-content .wp-block-code code {
   position: relative;
   background-color: unset !important;
}

当然 highlight.js 也能在 vue 项目中使用，安装：

npm install highlight.js

在 Vue 文件中使用 (通过 highlight.js for Vue ) ：

<div id="app">
  <!-- bind to a data property named `code` -->
  <highlightjs autodetect :code="code" />
  <!-- or literal code works as well -->
  <highlightjs language='javascript' code="var x = 5;" />
</div>

需要注意的是，自动识别模式不能100%识别出代码所属的开发语言，识别错误会导致高亮样式是别的语言的，这种情况下可以手动设置一个 class 来精准控制：

<pre><code class="language-javascript">...</code></pre>

官网提供了详尽的使用文档，有更多代码高亮的控制，但不足的就是 highlight.js 没有显示行号的支持，需要通过再引入一个库 (highlightjs-line-numbers.js) 或者自行实现。

免费开源说明

highlight.js 是一款基于 BSD 许可证开源的 javascript 工具库，任何个人和公司都可以免费下载用于自己的项目，包括商用项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址以及代码高亮效果

highlight.js - 让网页上的代码高亮美化的免费开源工具库｜那些免费的砖