纯css绘制会呼吸的爱心
实现目标 纯css绘制爱心 爱心要有呼吸的律动 有投影 结构分析爱心乍一看上去好像不太好画,但是我们先给他拆分一下结构,就简单很多了。 如下图: 爱心的形状我们可以看做是由两个相同的圆和一个正方形组成,再将它旋转45度,就可以得到一个爱心了。 是不是挺像那么回事的了,接下来我们就开始绘制了。 代 ...
阅读更多
使用CSS绘制太极两仪图
结构分析太极图由黑白两仪图形组成,且两仪头部中心有反色小圆。将他们的结构拆解出来,再绘制就简单很多,看下图: 可以看出太极图是由一个左右反色的大圆,两个颜色相反的中圆,以及两个颜色相反的小圆组成。中圆的半径是大圆半径的二分之一,小圆半径大约是中圆半径的三分之一。 代码实现第一步:我们先将他的dom结 ...
阅读更多
数组的方法大全
前言JavaScript 数组的真实力量隐藏在数组的属性和方法中,下面我们来重点介绍下数组的方法。 包括ES6新增的一些方法,但这些方法目前不是所有浏览器都支持,使用前请查阅官方文档的浏览器支持情况。 大纲目前所有数组方法思维导图整理如下: 示例解析检测数组1、isArray()该方法的目的就是确定 ...
阅读更多
hexo文档解析
hexo doc 文档解析 安装安装hexo的前提是要有Node.js以及Git,至于什么是Git和Node以及如何安装他们可以自行搜索了解。 安装完Node以及Git后,通过下面的命令安装Hexo: 1npm install -g hexo-cli 启动在电脑中找个目录,并进入目录,执行下面几个 ...
阅读更多
你有几种方式实现数字千分位分割?
1.实现目标需求描述:我们有一串数字: 892345678.345672, 需要把它格式化为892,345,678.345672 需求很简单, 我们来实现它吧 2.数组逆序法代码实现: 1234567891011121314151617181920function format(num) { ...
阅读更多
我的2022
人生如逆旅,我亦是行人。
阅读更多
事件循环机制(Event Loop)
简述事件循环分为两种,分别是浏览器事件循环和node.js事件循环。 我们都知道JavaScript是一门单线程语言,指主线程只有一个。Event Loop事件循环,其实就是JS引擎管理事件执行的一个流程,具体由运行环境确定。目前JS的主要运行环境有两个,浏览器和Node.js。 为什么js是单线程 ...
阅读更多
Hexo怎么上传本地图片
安装插件1npm i hexo-asset-image --save 基本设置 调整程序配置文件_config.yml 里的post_asset_folder:这个选项设置为True 在source下创建/images文件夹,先把图片xx.jpg/png复制到这个文件夹 最后在xxxx.md中想 ...
阅读更多
使用 Hexo + github pages 搭建博客

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

安装

安装hexo的前提是要有Node.js以及Git,至于什么是Git和Node以及如何安装他们可以自行搜索了解。

安装完Node以及Git后,通过下面的命令安装Hexo:

1
npm install -g hexo-cli

初始化

在电脑中找个目录,并进入目录,执行下面几个命令,hexo就准备就绪了。

1
2
hexo init // 初始化目录
npm install // 安装运行hexo的一些必要的组件

运行完,你会看到你的当前目录下,会自动创建一些目录,如下:

1
2
3
4
5
6
7
8
9
.
├── _config.yml
├── package.json
├── scaffolds/
├── scripts/
├── source/
| ├── _drafts
| └── _posts
└── themes/

各个文件或者目录的用途:

  • _config.yml站点配置文件,很多全局配置都在这个文件中。
  • package.json 应用数据。从它可以看出hexo版本信息,以及它所默认或者说依赖的一些组件。
  • scaffolds 模版文件。当你创建一篇新的文章时,hexo会依据模版文件进行创建,主要用在你想在每篇文章都添加一些共性的内容的情况下。
  • scripts 放脚本的文件夹, 就是放js文件的地方
  • source 这个文件夹就是放文章的地方了,除了文章还有一些主要的资源,比如文章里的图片,文件等等东西。这个文件夹最好定期做一个备份,丢了它,整个站点就废了。
  • themes 主题文件夹。

GitHub

有GitHub账号的,看下面:

创建一个repo,名称为username.github.io,其中yourname是你的github名称,按照这个规则创建才有用哦

_config.yml配置

  • 用编辑器打开你的blog项目,修改_config.yml文件的一些配置(冒号之后都是有一个半角空格的):
1
2
3
4
5
6
7
8
url: https://github.com/candy415
root: /


deploy:
type: git
repo: https://github.com/candy415/candy415.github.io.git
branch: master

本地启动

回到gitbash中,进入你的blog目录,分别执行以下命令

1
2
3
hexo clean
hexo generate
hexo server

打开浏览器输入:http://localhost:4000

接着你就可以看到你的博客了~

创建文章

1
hexo new [layout] <title>

创建一篇文章,如果不指定layout,那么就使用_config.yml中default_layout的值,标题中如果有空格,将整个title放到引号中。比如,hexo new “hello world”创建一篇叫hello world的文章。

layout如果为page时,新建菜单

1
hexo new page title

布局(Layout)

Hexo 有三种默认布局:post、page 和 draft,它们分别对应不同的路径,而自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。

如果你不想你的文章被处理,你可以将 Front-Matter 中的layout: 设为 false 。

模版(Scaffold)

在新建文章时,Hexo 会根据 scaffolds 文件夹内相对应的文件来建立文件,例如:

1
hexo new draft 'new pape'

在执行这行指令时,Hexo 会尝试在 scaffolds 文件夹中寻找 draft.md,并根据其内容建立文章,以下是您可以在模版中使用的变量:

变量描述:

  • layout布局
  • title标题
  • date文件建立日期

Front-matter

Front-matter是文件最上方以 — 分隔的区域,用于指定个别文件的变量,举例来说:

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

参数描述默认值:

  • layout布局
  • title标题
  • date建立日期文件建立日
  • updated更新日期文件更新日期
  • comments开启文章的评论功能
  • truetags标签(不适用于分页)
  • categories分类(不适用于分页)
  • permalink覆盖文章网址

文章摘要

设置文章摘要,我们只需在想显示为摘要的内容之后添

阅读更多
VSCode 前端常用插件安装及设置详解
安装VSCode官网下载安装,安装完成后使用快捷键ctrl + shift + x搜索插件。 界面优化1、汉化安装 Chinese (Simplified) Language Pack for Visual Studio Code 插件,完成后重启 VS Code 即可。 2、主题浅色主题:Atom ...
阅读更多