对于前后端分离,如何把一个页面的公共部分比如head, header, footer, content等组合成一个完整的html 是一个值得考虑的地方。 对于php,我们可以利用include加载其他页面,像yii框架,可以利用render将输出的内容嵌入到父模板,从而形成一个完整的页面。 那对于纯静态的html我们如何拼接呢? 可以想到市面上的多种模板引擎,比如artTemplate, doT, ejs等,他们可以使用require或include等特殊标记的语法来引入其他模块。但如果每个页面我们都去写若
最近业余时间利用hexo为自己搭建一个高度自定义的个人站点,站点发布在github上,访问地址为:https://cqhaibin.github.io/。本博客简单介绍实现此站点的过程。效果图如下 构
https://101.43.39.125/HexoFiles/win11-mt/20210813154909.gif
本文将会从零开始编写一个简单的Hexo博客主题,目的是了解一个Hexo博客主题的构成以及如何编写,因此,本示例中的博客页面样式不做过多描绘,样式主要参考 Hexo theme 中的 Noise 主题。
在Fluid -2- 随机视频背景切换 中记录了 Fluid 主题背景随机切换的实现方法,但存在加载视频覆盖原始图像背景的情况,本文记录顺滑加载解决方案 。 当前问题 当前问题为背景图像加载较快,视频稍慢 导致背景加载时会有先出现图像,再覆盖另一个视频的尴尬场景 解决思路 放弃图像加载 放弃图像加载是一种解决方案,这样就只会加载视频,没有图像的闪动 但手机端需要加载图像,不能放弃图像背景 更重要的原因是图像加载快,用户可以更早地感受到网页在加载 因此不能放弃加载图像 加载更小的视频第一帧图像 又需要图
受到 七夏浅笑 小姐姐博客的启发,决定把自己的视频背景做成固定不动的,本文记录相关内容。 背景 七夏浅笑 博客图像背景固定很漂亮,想模仿类似的效果到自己的博客上 之前已经实现了 Fluid -随机视频背景切换,和封面视频背景顺滑加载,需要在此基础上进行更新 已经实现上述功能的基础版本主题代码 version2.0 目标: 背景视频固定 视频随机切换 优先显示视频预加载图像 不影响博客其余部分正常显示 实现过程 我不是学前端出身,实现功能全屏直觉,为了实现效果抛弃了一切规范和逻辑,实
本文为2021年教程,hexo以及主题版本迭代较快具有时效性,方法可能发生改变,酌情观看
Volantis中使用APlayer作为音乐播放器,如果希望在播放音乐时网页能够做出响应,例如弹窗,就需要对播放事件进行捕获。
原js会在页面左下角绘制一个按钮,点击之后会使用自己的CSS来改变颜色,但是volantis已经有了自己的暗黑模式CSS,并且两者在检测暗黑模式上也用了不同的变量,导致暗黑模式被两次开启的bug。 考虑到原作者开关暗黑模式其实是执行特定的js代码,因此只需要修改主题的“暗黑模式”按钮,让用户点击时执行原作者的js代码就可以实现动画效果
一直说要出一篇从零搭建博客的教程,但是最近真的很忙,一直没有时间,尽量抽出时间将博客教程写出来了,如下,阅读本文需要你有以下技术储备:
动漫也好、小说也好、网络也好,不论在哪里,我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来,形成一言网络,以传递更多的感动。如果可以,我们希望我们没有停止服务的那一天。
Pjax的使用可以在保证Nav Header Footer 不变的基础上改变 Main 的内容(适用于页面结构相对简单的主体)
Loading吃豆豆动画 新建loading.ejs文件 在_partial 文件夹下新建loading.ejs 添加以下代码 <style type="text/css"> #loading-container{ position: fixed; top: 0; left: 0; min-height: 100vh; width: 100vw; z-index: 9999; display: flex; flex-direction:
你了解Hexo吗? Hexo是一个静态博客框架,基于Node.js,将Markdown文章通过渲染引擎,生成一个静态网页,再结合Git命令(ssh),Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
1.在 layout.ejs 中 body 标签内粘贴入以下 📷 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css"> <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script> <script src="https://c
webpack的一点介绍 Webpack 把任何一个文件都看成一个模块,模块间可以互相依赖(require or import),webpack 的功能是把相互依赖的文件打包在一起。webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。同时,webpack还有丰富的插件 plugin,可以完成例如js,css的压缩,公共依赖模块的提取和注入,甚至利用模板对 h
使用之前修改的需要按照之前的步骤反向,把添加的东西删除,再按照下面的方法重新添加,
在主题的layout.ejs文件中找到body标签的开始标签在后面加上这些js和html代码,这里我放的位置为:/layout/_partial/back-top.ejs
首先在hexo官网主题里面搜索Matery主题点击进入作者大大的github,然后下载 master 分支的最新稳定版的代码,解压缩后将 hexo-theme-matery 的文件夹重命名为matery,复制到Hexo 的 themes 文件夹中
当你看到这里的时候,应该已经有一个自己的 Hexo 博客了。如果还没有的话,不妨使用 Hexo 和 Markdown 来写博客和文章。
之前一直使用的是Butterfly主题默认的魔方盒子(姑且就这么称呼)加载动画,但是属实是不太喜欢。偶然看到了一个博客使用转动齿轮效果感觉很喜欢,就有了这篇文章。
前言:本文是关于itsNeko开源博客食用方法详解,感谢使用本开源博客。时间过的好快,还好我都记录下来了。
在这个系列教程中,你将学习怎么从零开始制作一个 Hexo 主题。 在 part1 和 part2 中,我们已经创建了博客的所有页面。在这篇文章中,我们将给博客添加 Disqus 评论系统,实现 谷歌分析以及完成侧边栏的小部件。
前言 前面经过五篇Node.js的学习,基本可以开始动手构建一个网站应用了,先用这一篇了解一些构建网站的知识! 主要是些基础的东西... 如何去创建路由规则、如何去提交表单并接收表单项的值、如何去给密码加密、如何去提取页面公共部分(相当于用户控件和母版页)等等... 下面就一步步开始吧^_^!... 新建express项目并自定义路由规则 1.首先用命令行express+ejs创建一个项目sampleEjsPre cd 工作目录 express -e sampleEjsPre cd sam
备用地址: https://wang-qz.gitee.io/crystal-blog/
在这个系列教程中,你将学习怎么从零开始制作一个 Hexo 主题。 在 part1 中,我们已经着手动工并创建了首页。在这篇文章中,我们将运用所学完成剩余的页面。
对于任何一个网站来说,优化页面的访问速度是必须的,个人来说,只要加载页面十秒以上或长时间处于空白或加载状态,我会立刻关掉此页面的。你又能容忍几秒呢?
给自己搭了一个博客,但是原博客的评论系统用的gitment,只能够供github用户评论。我想要评论系统当然不能够独宠github用户,要雨露均沾 ,哈哈哈。于是就看到韩国的Livere(来必力)评论,基本满足了我的要求。可以支持多种类型的账号登录发言,比如 QQ 微信 微博,百度 等账号登录发言。而且 功能 还是比较强大 操作简单。植入到自己的 博客里 也 比较轻松,任何主题的博客都可以用,不一定要 Next 主题(Next 主题 已经植入了 来必力City 只需配置一下即可),只需在对应位置加入 来必力City版安装代码 就是加入点JavaScript 语句 ,下面就是具体安装步骤(非Next主题):
或者下载此CSS文件后放置于../volantis/source/css文件夹中,然后在../volantis/layout/_partial/head.ejs中引入css文件,在标记下方添加一行
[TOC] 1.Hexo介绍 Q:什么是 Hexo? A:Hexo 是一个快速、简洁且高效的博客框架,Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网
因为 OIDC 协议基于 OAuth2.0,所以 OIDC 的实现同样基于 OAuth2.0,所以我们可以在 OAuth2.0 网站上找到很多成熟的框架用来实现自己的授权服务器。
有时候会看到有的网页加载时上方出现进度条,一直想加到自己的博客上来,今天折腾了一番,终于成功了,记录下来。
2017-05-16 by Liuqingwen | Tags: Hexo | Hits
最近看了@Tualatrix Chou所写的使用 jsDelivr 来优化网站访问速度,深受启发又加之自己采用Hexo博客框架搭建了一个静态化的博客,同时采用github Page 进行托管,虽然加上Cloudflare的CDN来加速,但是实际上某些情况下还没有直接访问的速度快,当然加了总比没加好;
Hexo博客已经使用挺长时间了,其出色的静态网页渲染能力深得我的喜欢,然鹅也是因为 Hexo 基本完全依赖渲染模板的原因,如果在整博客的过程中引入了错误的代码段或者和已有代码发生了冲突,会直接影响博客的正常渲染,对于Hexo来说,不能渲染就等于完全废了;针对出现的错误,有时候我们还不一定能找得出来。经常是改一处错两处,那么到了迫不得已的时候,就有必要对博客进行重置了。
把下载好的Js文件放在theme/Butterfly/source/js文件夹下 /Butterfly/layout/includes文件夹下找到head.pug文件,在最后引入
Node js 视图引擎就像 Laravel 中的 Blade。其最基本的定义是,视图引擎是帮助我们用比通常更短、更简单的方式编写 HTML 代码并重用的工具。此外,它还可以从服务器端导入数据并渲染最终的 HTML。Node.js 项目中一些常见的视图引擎如下:
var expressLayouts = require('express-ejs-layouts');
经『手撕Vue-CLI』编译模板『上』已经将大概流程编写好了,接下来就是将模板中的变量替换成用户输入的内容。
2019年的时候,写了一篇博客来记录博客历史的迁移记录,这两年又经过工作变化、硬盘损坏,博客也是几经变迁。
1.基本使用 新键文件 template/1.pug 这个文件存放html模板 示例代码
评论系统可以说五花八门啦,用得多的比如:畅言、Gitment、Gitalk、LiveRe、Disqus、友言、Valine 等 畅言,搜狐出品的 Gitment Gitalk Live
Fluid 主题升级到 1.9 + 后公式在电脑浏览器上渲染错误,本文记录解决方案。 问题复现 fluid 更新到 1.9+ 版本后,mathjax 渲染的数学公式在电脑端浏览器无法正常显示 📷 但是在手机端没有问题 问题原因 官网说明提示了 在 1.8.14 版本之后需要更新 mathjax 渲染器并安装额外的工具包 但事实上上述现象不是渲染错误导致的,因为手机端可以正常显示公式 根本原因在于网页的懒加载,当公式进行懒加载后就难以重新嵌入到网页中 解决方案 根本目的是停止对公式的懒加载 我采用的方法
原文:Build a universal React and Node App 演示:https://judo-heroes.herokuapp.com/ 译者:nzbin 译者的话:这是一篇非常优秀的 React 教程,该文对 React 组件、React Router 以及 Node 做了很好的梳理。我是 9 月份读的该文章,当时跟着教程做了一遍,收获很大。但是由于时间原因,直到现在才与大家分享,幸好赶在年底之前完成了译文,否则一定会成为 2016 年的小遗憾。翻译仓促,其中还有个别不通顺的地方,望见谅
会在source/about中生成index.html。这个就叫做页面,不在文章列表显示,可以通过http://localhost/about浏览。
使用码云的issues作为评论系统,就要使用码云来登录评论,所以需要在码云上配置第三方应用。
Webpack 是一个将你所有的 JavaScript 文件,图片、字库以及 CSS 等打包到一个依赖关系图的构建工具。这使得你可以在源码中使用 require() 来引用本地文件并且决定在最终的 JavaScript 包中如何处理这些本地文件代码。
领取专属 10元无门槛券
手把手带您无忧上云