JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应...JavaScript 能够改变页面中的所有 HTML 元素 首先，我们要知道如何查找HTML元素，通常有三种方法： id tag classs 就是分别通过id，tag，class的名字查找HTML... html> 改变 HTML 样式 HTML DOM 允许 JavaScript 改变 HTML 元素的样式。...> 添加和删除节点（HTML 元素） html> 这是一个段落。...如何对 HTML DOM 事件作出反应 如何添加或删除 HTML 元素
前言 本文将会从零开始编写一个简单的Hexo博客主题，目的是了解一个Hexo博客主题的构成以及如何编写，因此，本示例中的博客页面样式不做过多描绘，样式主要参考 Hexo theme 中的 Noise 主题...在开始前，你需要对以下的一些知识点有必要的了解： 模板引擎语法 CSS预处理器 YML语法 Hexo文档 本文使用的模板引擎为 ejs，使用的 CSS 预处理器为 stylus。...我们在 layout 中创建 index.ejs 文件，index.ejs首页将会继承layout.ejs布局模板生成 HTML 文件。...Hexo 在生成页面的时候会将 source 中的所有文件复制到生成的 public 文件中，并且在此之前会编译 styl 为 css 文件。...需要注意的是，要想在页面中展示分类页，需要先执行hexo new page categories生成分类页面，并添加type为categories： title: categories date: 2019
; 自定义显示效果 你还可以根据需要自定义旋转指示器的样式、颜色等，比如： const spinner = ora({ text: '正在下载数据......缺点： 预定义样式有限：某些用户可能希望有更多的样式选择。 自定义有一定学习曲线：高级选项可能需要查阅文档和示例进行探索。...自定义日志输出：支持多种格式，如文本、JSON和美化格式。 Pino的使用场景与示例代码 1....48、简单高效的动态HTML生成：EJS模板引擎 在Web开发中，生成动态HTML是一个常见需求，而EJS（嵌入式JavaScript模板）正是一个流行的模板引擎，能够帮助开发者无缝地将动态内容集成到HTML...Cheerio是jQuery的一个子集的服务端实现，为开发者提供了熟悉的语法和API，用于在Node.js中导航、选择和修改HTML元素。
优化代码结构，可以根据教程示例和魔改思路，自行尝试添加自定义样式。 2020-11-8:正式版v1.1 新增直接使用gif图作为加载动画配置。 支持自定义配置加载动画背景颜色。...load_color：该配置项为自定义加载动画背景颜色。默认值为#37474f,使用时注意用’’包起来，不然会被识别成注释符。...如示例一样，如果想要保留背景拉开帷幕的效果，我们可以保留loading.pug的前三行，在第四行与.loading-right-bg保持相同缩进来添加新的页面元素。...样式不建议修改loading.styl,直接引入相应的css文件即可。 之后，为了保证加载完成，我们需要给自己添加的元素新增一个隐藏的属性。...例如示例中，巫师动画的顶层元素是.wizard-scene,所以需要添加 个别情况可能会遇到画布三维层级混乱，就需要定义loading-box的z-index属性。 欢迎在评论区留下你的设想。
用户在左侧组件区域选择组件添加到页面上，编辑区域通过动态组件特性渲染出每个元素组件。最后，点击保存将页面数据提交到数据库。至于数据怎么转成静态 HTML方法有很多。...JSON，getElementConfigJson(elName, defaultStyle)方法 元素属性编辑 公共属性样式编辑 公共样式属性编辑比较简单就是对元素JSON对象commonStyles...psd源文件大小最好不要超过30M，过大会导致浏览器卡顿甚至卡死 尽可能合并图层，并栅格化所有图层 较复杂的图层样式，如滤镜、图层样式等无法读取 html2canvas生成缩略图 这里只需要注意下图片跨域问题...页面渲染 ejs中引入模板 使用组件 <engine-h5-swiper :pageData="pageData.../routes/${route}`) app.use(api.routes(), api.allowedMethods()) }) 添加jwt认证，同时过滤不需要认证的路由，如获取
添加样式在项目根目录下，创建一个 public 文件夹，并在其中创建 styles.css 文件：body { font-family: Arial, sans-serif; margin: 0;...我们可以通过一个简单的POST请求来实现动态更新简历数据，并将其保存在数据库中（如MySQL或MongoDB）。扩展功能与优化1....可以在 views 目录下添加一个 admin.ejs 文件，提供一个表单来更新简历信息：添加更多的功能，如简历模板选择、文件上传等功能。腾讯云轻量服务器为我们提供了强大而便捷的云基础设施，帮助我们快速部署和管理网站。...通过本次项目，我们学会了如何在腾讯云轻量服务器上搭建并部署一个简易的个人简历展示网站。我们利用了Node.js和Express框架创建了一个基础的后端服务，并结合EJS模板引擎展示个人简历信息。
EJS的核心特性： 嵌入JavaScript代码、支持变量、自定义过滤器和函数、条件判断和循环、模板的复用和组合，本章简单了解即可 EJS 初体验： 初始化项目结构： npm i -y #npm构建项目...DOCTYPE html> html lang="en"> 中已经配置完毕 Generator_静态资源： Express Generator 创建应用程序骨架时，Public目录负责托管静态资源（例如图像、样式表、脚本等） ├── public #public...//因为key1是一个数组,所以以 push添加元素、unshift追加元素 db.get('key1').push({id: 1, title: '今天天气还不错~~'}).write();...那个如何在多个服务端之间共享呢？
最近有些网友问我，我的个人博客中的评论系统是怎么添加的，说实话我都有点忘了，毕竟搞了有好长一段时间了，唉不得不说这个遗忘得真是很快。...最近有些网友问我，我的个人博客中的评论系统是怎么添加的，说实话我都有点忘了，毕竟搞了有好长一段时间了，唉不得不说这个遗忘得真是很快。...---- 在个人博客中加入LiveRe代码 首先去如路径：hexo_bolg/themes/your-theme/layout/_partial/post下创建livere.ejs代码。...livere.ejs的内容就是上一步中获取的代码： 123456789101112131415161718 <!...---- 如何自定义LiveRe的样式 LiveRe支持多重方式进行登录，而且其样式也是可以自定义的： ? 可以去LiveRe的网站的管理页面中进行设置： ?
在 part1 和 part2 中，我们已经创建了博客的所有页面。在这篇文章中，我们将给博客添加 Disqus 评论系统，实现 谷歌分析以及完成侧边栏的小部件。...其它文章的链接： 创建一个Hexo主题-Part1:首页 创建一个Hexo主题-Part2:其他页面 创建一个Hexo主题-Part3:评论、分析和小部件 Disqus 评论系统 我已经写了一篇关于如何在...-- Comments --> Disqus 需要 ID 为 disqus_thread 的 div 元素，因此我们这里复制官方文档提供的代码...合并到局部文件中 我们希望可以在任何页面中获取到跟踪代码，而页面上又没有合适的位置来存放，因此我们选择把它添加到 的末尾： /* layout/_partial/head.ejs...小部件 此时，sidebar.ejs 文件中的小部件还只是一堆采用硬编码的静态 HTML。我们来修复这个问题。 配置 先从配置开始吧。 我们准备创建两个小部件，一个是“关于”，一个是“标签”。
HTML 元素 元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。... 元素: 定义了浏览器工具栏的标题 当网页添加到收藏夹时，显示在收藏夹中的标题 显示在搜索引擎结果页面的标题 一个简单的 HTML 文档: 实例 HTML 元素 ...在 元素中你也可以直接添加样式来渲染 HTML 文档: HTML 元素 meta标签描述了一些基本的元数据。...CSS 可以通过以下方式添加到HTML中: 内联样式- 在HTML元素中使用"style" 属性 内部样式表 -在HTML文档头部 区域使用 元素 来包含CSS 外部引用 -...浏览器中显示如下： HTML 自定义列表 自定义列表不仅仅是一列项目，而是项目及其注释的组合。 自定义列表以 标签开始。每个自定义列表项以 开始。
在使用ejs模版的过程中遇到了这个问题：如何在ejs模版中导入外部的js、css文件。 我猜测，ejs和html导入外部文件的方式应该是不一样的。但是我还是决定试一试。...按照之前在html文件中的方式导入，结果失败。 这也证明我之前的想法，这些静态文件一经过服务器，就不能直接进行导入了。那该如何导入呢？ 这是我的文件结构： ?...这里引用外部js和css文件的ejs页面的代码： html> html lang="zh-cn"> ejs")%> html> 我的public文件夹的路径配置： ? public文件夹下的静态资源结构： ?...所以上面ejs页面中的引用就不用写public了，这里的好处就是无论ejs页面与public中要引用的文件的相对路径关系是怎样的，都可以直接在ejs中直接引用，引用的方式只需要关注public下的路径，
二、功能模块 我这里主要使用也是推荐应用的功能模块主要就以下几个： Markdown 中自定义 CSS 样式 添加博客 RSS 订阅功能 文章添加 emoji 表情符 文章里图片的懒加载功能 强大的静态搜索功能插件...Markdown 中自定义 CSS 样式 有时候写文章需要一些特殊的字体或者颜色表现样式，这其实很简单，不需要任何插件，直接在 md 文章文件中使用 HTML 加 CSS 样式就可以了，就像这样： {% endraw %} 尽情的在 style="" 中添加你想要的样式吧。 2....中添加搜索内容显示框（ div ）的 HTML 代码： 中添加了一个 addSearch 的变量，值为 true 表示生成的这个页面是带搜索功能的页面，值没有或者为 false 表示这个页面不会添加搜索引擎和显示搜索结果
web express web开发框架 ejs 页面模板。可以方便的把html改写成ejs。 eco 页面模板,类似ejs。...与ejs的不同点是：逻辑部分用CoffeeScript而不是javascript jade 页面模板 源自ruby的haml 比ejs优雅简洁，但把html转换成jade要花一番功夫。...cheerio 解析html文档。解析的结果可以用jQuery的写法来筛选想要的dom元素。 JSDOM 和cheerio类似。但更强大。但要在windows安装是各种麻烦。...如文件读写，数据库操作等 promise 同上 测试 mocha 测试框架,断言库可自由选择。...可以做很多任务：如脚本验证（grunt-contrib-jshint），脚本，样式压缩（grunt-contrib-uglify），脚本合并（grunt-contrib-concat），编译coffee
ejs 在上面创建的testWebApp中express默认使用的模版擎为jade，个人觉得jade虽然简洁但不直观，所以选择了更易上手的ejs。 ...(d efaults to plain css) -f, --force force on non-empty directory 2.创建成功后，打开app.js，添加...，输出的是没有转义后的变量值 3. 而这个标签，从显示上看，他循环了出来参数中的值，标签中是javascript逻辑代码，注意括号的开闭合 在这里，简单认识一下ejs，下面开始看看express...，express.static( )是处理静态请求的，设置了public文件，public下所有文件都会以静态资料文件形式返回（如样式、脚本、图片素材等文件） var routes = require(...index.ejs中可以使用，那么加上ejs的部分，就会返回最终生成的页面展现！
：这是 HTML 中的按钮元素，用于创建一个可点击的按钮。...Bootstrap 内置了一组常用图标，可以直接在按钮、链接、文本等元素中使用。 Bootstrap 图标的基本结构 使用 Bootstrap 图标非常简单，只需在 HTML 中添加一个图标元素即可。...以下是一个基本的 Bootstrap 图标示例： 元素：这是 HTML 中的斜体元素，通常用于包含图标。...href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> 然后，使用相应的样式类来添加自定义图标...结语 按钮和图标是网页设计中的重要元素，Bootstrap 提供了丰富的按钮样式和内置图标库，使开发者能够轻松创建具有吸引力和交互性的界面。
使用 Poi 定制 HTML 模板 尽管 Poi 为我们的应用提供了现成的 HTML 模板，我们仍然可以按照自己的喜欢定制它。下面将展示如何使用 Poi 定制 HTML 页面中的 head 标签。...现在将其内容修改为只包含一个 div 元素： 我们需要在页面 body 中渲染 text 和 author 选项。...Vue 的一个实例并且挂载到 id 为 app 的 div 元素上。...在 Poi 中编译样式 在使用 Poi 构建的 React 应用中引入 CSS 样式十分简单。在项目目录下创建一个 .css 文件然后在 .js 文件中编写引入声明即可。...下面的例子展示了通过添加 react-markdown-loader 到 Poi 可以将 Markdown 文件加载为 React 组件。
': '200' } } 在元素中，通过属性绑定的形式，将样式对象应用到元素中： 这是一个善良的H1 在 :style 中通过数组，引用多个...': '200' }, h1StyleObj2: { fontStyle: 'italic' } } 在元素中，通过属性绑定的形式，将样式对象应用到元素中： 添加在 JavaScript 表达式的尾部，由“管道”符指示； 私有过滤器 HTML元素： {{item.ctime | dataFormat('yyyy-mm-dd')}}...@keyup.f2="add"> 自定义指令 自定义全局和局部的 自定义指令： // 自定义全局指令 v-focus，为绑定的元素自动获取焦点： Vue.directive(...}); // 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细： directives: {
当我们在浏览器中首次载入一个页面(任意页面， 不需要是首页, 试试 这一个) ，服务器提供了视图的所有 HTML 代码并且浏览器只需下载链接的资源(图像, 样式表及脚本): ?...注意如何在一个主 Route 组件中嵌套路由。我解释一下它的原理: 跟路由会将 / 路径映射到 Layout 组件。这允许我们在应用程序的每个部分使用自定义的 layout 。...渲染部分将使用 ejs 模板替换 index.html 文件，并保存在 src/views/index.ejs: 与原始 HTML 文件仅有的不同就是我们在 #main div 元素中使用了模板变量 ，为了在服务端生成的 HTML 代码中包含 React markup 。...最后，我们将产生的 HTML 代码注入到我们之前编写的 index.ejs 模板中，这样就可以得到发送到浏览器的 HTML 页面。
Valine对Hexo的支持可以再此页面中查看，对于Hexo一般大同小异，由于之前添加过gitment，所以官方扩展方式都没看，下面是我自己的添加方式，应该和官方的差不多。...在indigo\layout_partial\plugins目录下添加valine.ejs 在indigo_config.yaml中添加变量的赋值 注意：valine.ejs中的变量部分，theme.xxx 凡是使用theme.xxx...的变量都需要在_config.yaml中被赋值，所以，按照我这里第一步中valine.ejs的写法，在_config中的初始配置代码应该如下： valine: notify: true verify.../notify/ 添加底层容器块，保持评论与全站的风格一致 12345678 主要是修改valine.ejs中的代码，在初始化valine插件之前添加下面的内容<% if (theme.valine
现在有时间刚好总结一下我对于 Hexo 做的一些自定义扩展，虽然之前可能在别的文章中或多或少的涉及了，但并没有统一整理过。 本人主题：Indigo，以下内容均基于此主题所写。...以EJS+LESS为例： EJS中包括全部的 html标签 和 JavaScript 脚本 Less是CSS的一种使用方式，这里可以理解为样式文件，但其样式参数可以用变量来表示，这样在开发主题的过程中就可以简化和统一整个样式所涉及的颜色高度等...如果涉及主题的CSS样式，则一般需要找到对应的 less 文件，如果里面用的变量代替，则还需要到存储变量值的文件里去修改变量的值，这样才完成样式的修改，但偷懒的方法是，直接在对应生成页面的模板文件中添加...新增页面 主要有两种方式，一种是添加一个 md 文件，一种是直接放一个 html 文件，前者在渲染时会生成相应的 html 内容，两者本质上没有什么区别，取决于你添加的新页面的内容，比如一般的文本则使用...md 就可以了，但如果是复杂的 js插件，那还是直接添加 html 较好，方便修改。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
