页面功能都是比较简单的，所以为了赶上重构的时间线，当时旁边的小伙伴用 Express + EJS 实现了一版，只支持 ES5 的语法。 后续需求经历几次变更，想在原来的页面上加功能都比较麻烦。...动态渲染标题 前阵子遇到了另一个需求，我需要为多家银行实现同样的 H5 页面，功能基本上都是一样的，但 App 头部需要展示不同银行的名字。...在我们 AirPay App 里面，客户端在打开 webview 的时候会去读取我们 HTML 里面的 title，将其设置为原生头部的标题。...但如果使用服务端直出的形式，就可以在服务端直接判断好需要渲染的标题，设置到 HTML 的 title 里面。这就是另一种适合的业务场景了。...一期的这个页面是挂在腾讯云 CDN 上面的，二期使用了服务端渲染，可以明显感觉到加载速度变快了很多，毕竟以前还是会展示一个 loading 图。
在 part1 中，我们已经着手动工并创建了首页。在这篇文章中，我们将运用所学完成剩余的页面。...我在每个标签前面加了一个#号，并且在列表前面额外加了一个图标。...与分类页类似，但是会根据标签进行筛选| tag.ejs和’category.ejs’的回退页是archive.ejs。我认为这三个页面并无太大区别，我们仅仅是在使用archive.ejs的回退页而已。...partial('_partial/article-archive', {item: item}) %> 现在我们有了一个漂亮的标题用以描述了归档页的类型...有打算自己撸一个主题的都可以参考下，真的写得很不错。如果发现译文存在错误或其他需要改进的地方，欢迎在下面评论指出。
首先在站点目录下的 source 文件夹下新建 aboutme 文件，文件名可自定义，然后编写一个 index.html 放入 aboutme 文件夹下，然后在主题配置文件下的导航配置信息添加下面的配置...修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。...#网站描述description 主要用于5E0，告诉搜索引擎一个关于您站点的简单描述 keywords: [HTML, CSS, JavaScript, JQuery, java, linux等]...weixin 我是用的图片链接，会跳转到一个新的标签页，之后还需要修改 ejs 文件，文件在主题目录下的 layout 文件夹下的_partial 文件夹，修改 social-link.ejs，添加相关的配置...有一个 `` 标签，找出其对应结尾的标签，大约在 61 行左右，然后在新增如下代码：
#### pug渲染 1.基本使用 新键文件 template/1.pug 这个文件存放html模板 示例代码 doctype html head meta(charset="utf-...DOCTYPE html> html> 测试标题 </.../template/1.pug',{ //参数数据 pretty:true,//美化 //传递视图的数据 title:'测试我的标题', users:[...DOCTYPE html> html> 测试我的标题 ...> Koa使用ejs示例 cnpm i koa-ejs const Koa = require('koa'); const ejs = require('koa-ejs'); const path =
最近业余时间利用hexo为自己搭建一个高度自定义的个人站点，站点发布在github上，访问地址为：https://cqhaibin.github.io/。本博客简单介绍实现此站点的过程。...效果图如下 构建此站点最初的目的主要方便自己使用本人开发的tomato time这个小工具。然后在实施的过程中加入的自己自己琢磨写的vueManager。...标签页 hexo的模板解析，以layout.ejs为入口，所有静态页面（如：文章、页面、首页、标签、归档、分类等）都会以layout.ejs为模板。...3. hexo-asset-image 此插件实现markdown引用的本地图片，在markdown转换为html也能被正确引用。...hexo模板开发 根据上述 “hexo模板介绍”，我们可以很较为轻松的开发出自己的模板，模板文件说明 模板文件夹、配置文件 说明 layout 相关ejs模板信息，用于生成html时使用 script
在开始前，你需要对以下的一些知识点有必要的了解： 模板引擎语法 CSS预处理器 YML语法 Hexo文档 本文使用的模板引擎为 ejs，使用的 CSS 预处理器为 stylus。...我们在 layout 中创建 index.ejs 文件，index.ejs首页将会继承layout.ejs布局模板生成 HTML 文件。...编写导航栏和底部信息 前面，我们只是搭了个页面框架，接下来我们就将开始正式开始一步步的完善我们的主题，以下两个文档我们将频繁的使用，最好可以提前阅读一遍有个了解： Hexo | 变量 Hexo | 辅助函数...具体有什么属性，可以获取到哪些数据可以查看这里。 那么这里我们会使用 page 变量的 posts 属性拿到文章数据的集合。...总结 其实说白了，Hexo就是把那些 Markdown 文件，按照我们编写的对应布局模板，填上对应的数据生成 HTML 页面，然后在编译的过程中将JS/CSS等文件引入HTML，然后生成每个页面的对应HMTL
采用静态 HTML 实现快速的页面初次加载，使用客户端路由实现快速的页面切换导航。 2....下面进行介绍: 4.1 站点标题和介绍 站点 标题 和 介绍 类似于我们的html文件里面写的 的标题 --> 测试 旁边的文字 siteTitle: 'Sun_Fei', // 网站左上角的logo图标 logo: '/planet.svg', } }) /planet.svg 会默认读取..., 创建好文件, 在配置文件进行正确的路由配置,然后就可以正常跳转访问了. 4.5 底部版权配置 首页面 底部 展示版权相关的信息 sidebar: [], // 底部版权部分...结语 先说到这里吧, 后续我会搭建一个基础模块,放在gitee里面,大家如果想使用vitepress 搭建自己的博客, 可以采用.
: 时区 滑到文件最底部，有一个deploy，在deploy下面添加一个repo项 ，一个branch项。...修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。...我是用的图片链接，会跳转到一个新的标签页，之后还需要修改ejs文件，文件在主题目录下的layout文件夹下的_partial文件夹，修改social-link.ejs，添加相关的配置，我个人添加的配置如下...动态标题 先放上效果图再说： 离开当前页面时 返回当前页面时 实现方法，引入js文件，在主题文件下的/source/js/下新建FunnyTitle.js，然后在添加到themes...官网有API文档，可以去看一下，有多种安装方式，最简单的方式就是从官网获取代码，在/themes/matery/layout/_partial/head.ejs添加下面的一行代码： <script
在使用ejs模版的过程中遇到了这个问题：如何在ejs模版中导入外部的js、css文件。 我猜测，ejs和html导入外部文件的方式应该是不一样的。但是我还是决定试一试。...按照之前在html文件中的方式导入，结果失败。 这也证明我之前的想法，这些静态文件一经过服务器，就不能直接进行导入了。那该如何导入呢？ 这是我的文件结构： ?...大家应该都知道，在使用express框架时，在安装了express模块之后，在该项目下的命令行输入express -e 就会自动生成相应的文件目录。...笔者这里的情况如下： 基于node.js ，使用express开发一个blog网站： 项目目录： ? 这里引用外部js和css文件的ejs页面的代码： ejs页面中的引用就不用写public了，这里的好处就是无论ejs页面与public中要引用的文件的相对路径关系是怎样的，都可以直接在ejs中直接引用，引用的方式只需要关注public下的路径，
(src="/js/sakura.js") 在主题的主配置文件加入Butterfly/_config.yml # 页面樱花飘落动效 sakura: enable: true 浏览器标题恶搞 在theme...因此创作这篇水文，帮助小伙伴解决无法引入阿里 iconfont 图标的问题。 什么人能够使用？ 理论上来说任何主题任何驱动都可以。只要你的网页还是 HTML+CSS。...这里会看到你刚刚添加的所有图标 接下来就是为你的图标创建一个项目，名称随意。创建完成后你将看到如下页面 3....### 标题美化处的修改 butterfly 主题的标题标签前有一个图标，如何为其更改为阿里 iconfont 呢？...如果没有，在文中局部引入也是可以的。 接下来只需要在需要的地方插入 svg 标签即可。 HTML ``` 最后 如果你遇到了如下问题，请向上查找解决方案.
Bootstrap 官网地址 原文出处 在这一章，我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。...在本节中，我们将重点讨论如何使用Bootstrap推荐创建可重用的HTML组件标记和类。让我们从页眉开始。...页眉 给页面加一个页眉或标题很简单，任何人都能使用标签在一个页面上显示一个页面；然而，但是，要巧妙地显示一个不采用浏览器默认样式的标题，它被适当的间距围绕，旁边有小的副标题。。。...使用符号代替小图像有很多优点，包括： 为小图像或精灵保存多个请求； 由于它们是字体图标，它们的颜色和大小可以在使用CSS属性的过程中变化； 在所有的展示中，他们看起来都很干脆利落。...要使用Glyphicons符号，您需要使用这样的标记: 这段代码显示了一个心图标，图标中的每个图标都有一个独特的类
}, }; # 添加分类 在 /docs 下新建一个文件夹 other：一个文件夹代表一个分类 在 /docs/other 下新建一个文件 README.md：代表该分类的列表页 README.md...ID }, }; # 文章配置 在 /docs/other 分类下新建一个文件 示例.md，代表一篇博文 示例.md 内容如下： --- title: 文章标题 meta: - name...注册 阿里巴巴矢量图标库 新建项目，并添加自己喜欢的图标 引入 Symbol 的 CDN 链接（也可以下载到本地使用） module.exports = { head: [...在 MarkDown 中使用 name：图标名称 color：颜色 size：大小（建议使用 em 单位） # 升级 升级到指定版本 1.0.1 $ yarn upgrade vuepress-theme-yur@1.0.1
个性化配置 添加404页面 原来的主题没有404页面，我们加一个。...找不到你想要的页面 :(" 然后在/themes/matery/layout/目录下新建一个404.ejs文件，内容如下： /* don't remove...这里中间出现了一个白色框框,看着很不舒服,尤其是有强迫症的人 ,定位到themes\matery\layout\friends.ejs这个文件 image.png 大概在229行代码左右,注释掉多余的代码...title: 该页面的标题. quote: 写在页面开头的一段话,支持html语法. timeout: 爬取数据的超时时间，默认是 10000ms ,如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点...如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。
A:Hexo 是一个快速、简洁且高效的博客框架,Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。...# icon: （可选）自定义订阅图标，默认设置为主配置中指定的图标。 # order_by: 订阅内容的顺序。...gitpage 功能将博客托管在了 github 上，并配置 CNAME 将自己的域名解析了过去，在 github 的仓库设置中开始 custom domain 的功能，这时候就可以直接使用自己的域名访问啦...答:在hexo的source目录中建立一个CNAME文件，里面填入您的绑定了github.io的CNAME类的域名,如weiyigeek.github.io Q:如何让hexo可以在云端进行编辑后台运行...npm install -g npm-check和npm-check，检查系统中的插件是否有升级的可以看到自己前面都安装了那些插件; Step 3.使用 npm install -g npm-upgrade
这个页面只是官方提供的一个样例，看到它就意味着你本地环境跑通了。我们可以通过修改配置的方式，对页面相关元素做调整。 核心配置 以下是我们需要了解或者修改的配置信息。...language 网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。 timezone 网站时区。...是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效) true 目录 ?...html 语句 style 声明内容样式，与 note 样式相同 版权内容有三部分：作者、文章链接、版权声明 作者使用 writer 参数，文章链接基于站点配置文件中url参数生成，版权声明使用 declare...开启后，你就拥有了专属的二级域名网址。 注意：仓库内容有变化，需要手动触发更新，页面才能真正生效。 连接仓库 一、安装 hexo-deployer-git[29]。
参考以上，我们结合 react组件 来实现服务端渲染直出，使用 jsx 来代替 ejs，之前是在 html 里使用 ejs 来绑定数据，现在改写成使用 jsx 来绑定数据,使用 react 内置 api...在 webpack2 时期主要使用 require.ensure方法来实现按需加载，他会单独打包指定的文件，在当下 webpack4，有了更加规范的的方式实现按需加载，那就是动态导入 import('....其他 SEO 支持 页面的 SEO 效果取决于页面的主体内容和页面的 TDK（标题 title,描述 description,关键词 keyword）以及关键词的分布和密度，现在我们实现了 ssr所以页面的主体内容有了...，那如何设置页面的标题并且让每个页面（路由）的标题都不同呢？...然后可以在 esj 模板里进行绑定，也可以在 componentDidMount通过 jsdocument.title=this.state.page.tdk.title设置页面的标题。 <!
各页面配置详解 首页 1、网站标题描述等 在/nekoblog/_config.yml文件中，使用“ ctrl+F ”快捷键定位到“ Site ”，然后自行修改内容。...4、《质数的孤独》内容部分 在/themes/layout/_widget/dream.ejs文件中，使用“ ctrl+F ”快捷键定位到“ 《质数的孤独》 ”，然后自行修改标题和内容。...相册 1、页面介绍 在/themes/layout/galley.ejs文件中，使用“ ctrl+F ”快捷键定位到“ itsNeko开源博客相册 ”，然后自行修改此内容。...2、相册数据 相册是存在json里面的，在/nekoblog/source/_data/galley.json文件中。一个相册就是在一个{}对象内的json数据。...各大页面banner图 -> 若你不想使用默认图片，将以下代码复制到对应页面ejs文件中并修改图片链接即可。
前几次介绍node的ejs后台模板进行数据渲染们今天简单介绍一下咱们前端的模板引擎underscore的数据渲染!...="item" > 标题: <span...id值 循环的数据进行封装模板后,需要得到模板内容以及模板组装 //得到模板 var tpl=$('#tpl').html(); //组装模板 var compiled = _.template(tpl...(main内) } 由于ajax无法跨域,所以请求的地址使用相对路径,循环得到的ajax中data数据,进行模板填充!...之前的使用ejs模板填充,后台需要前台页面修改为ejs,用户访问页面审查元素中所有模板全部被后台解析相应内容,而前台模板的审查元素还是对应的,浏览时候请求ajax后填充模板!
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
