new
This commit is contained in:
@@ -0,0 +1,868 @@
|
||||
---
|
||||
title: 个人博客搭建
|
||||
author: Luckey
|
||||
coverImg: /medias/banner/6.jpg
|
||||
top: true
|
||||
cover: true
|
||||
toc: true
|
||||
mathjax: false
|
||||
summary: >-
|
||||
前前后后大概花了2周的时间，目前个人博客已经完善的差不多了，现在写个文章做个阶段总结，后续如果有更新的地方，会及时补充。本博客基于Hexo框架，采用hexo-theme-matery主题，并在此基础上做了改进。
|
||||
tags:
|
||||
- Hexo
|
||||
- Github
|
||||
- 博客
|
||||
categories:
|
||||
- 博客篇
|
||||
abbrlink: e3e08109
|
||||
date: 2019-08-27 11:41:03
|
||||
img:
|
||||
password:
|
||||
reprintPolicy: cc_by
|
||||
---
|
||||
|
||||
## 0x001 效果演示
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 0x002 简单介绍
|
||||
|
||||
---
|
||||
|
||||
  前前后后大概花了一周多的时间，目前个人博客已经完善的差不多了，现在写个文章做个阶段总结，后续如果有更新的地方，会及时补充。本博客基于Hexo框架，采用[hexo-theme-matery](https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md)主题，在这里非常感谢作者`洪卫`的[hexo-blog-fly](https://github.com/shw2018/hexo-blog-fly.git)博客开源，极大简化了构建博客的工作量和复杂度。在此开源博客的基础上做了改进，修复了一些bug，顺利搭建完成了我的个人博客。大家对此主题有兴趣的可以[下载源代码](https://github.com/shw2018/hexo-blog-fly)，搭建属于自己的个性化博客。
|
||||
- 个人博客 演示：[http://luckyzmj.cn](http://luckyzmj.cn)
|
||||
|
||||
---
|
||||
|
||||
## 0x003 Hexo 初级搭建
|
||||
|
||||
---
|
||||
|
||||
### 1. 安装Git
|
||||
`Git`是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。`Git`的作用是将本地的网页文件传到`github`上。
|
||||
|
||||
- Git[下载地址](https://git-scm.com/download)
|
||||
- Git[教程](https://www.liaoxuefeng.com/wiki/896043488029600)
|
||||
|
||||
**windows：** 到git官网上下载.exe文件,Download git,安装选项还是全部默认，最后一步添加路径时选择`Use Git from the Windows Command Prompt`。
|
||||
|
||||
### 2. 安装node.js
|
||||
`Hexo`是基于`node.js`编写的，所以需要安装一下`node.js`和里面的`npm`工具。
|
||||
|
||||
**windows：** 到[Node.js官网](http://nodejs.cn/download/)下载`.exe`文件，安装选项全部默认。安装好之后，按`Win+R`打开cmd命令提示符，输入`node -v`和`npm -v`，若出现版本号，则说明安装成功。
|
||||
|
||||
### 3. 添加npm国内源
|
||||
|
||||
使用阿里的国内镜像进行加速下载
|
||||
|
||||
```bash
|
||||
npm config set registry https://registry.npm.taobao.org
|
||||
```
|
||||
|
||||
### 4. 安装Hexo
|
||||
|
||||
前面`git`和`nodejs`安装好后，就可以安装`hexo`了，你可以先创建一个文件夹`MyBlog`，用来存放自己的博客文件，然后`cd`到这个文件夹下（或者在这个文件夹下直接右键`git bash`打开）。
|
||||
|
||||
比如我的博客文件都存放在`E:\MyBlog`目录下。
|
||||
|
||||
在该目录下右键点击`Git Bash Here`，打开`git`的控制台窗口，以后我们所有的操作都在`git`控制台进行，就不用`Windows`自带的`cmd`了。
|
||||
|
||||
定位到该目录下，输入`npm install -g hexo-cli`安装`Hexo`。可能会有几个报错，不用理会。
|
||||
|
||||
```bash
|
||||
npm install -g hexo-cli
|
||||
```
|
||||
|
||||
安装完后输入`hexo -v`验证是否安装成功。
|
||||
|
||||
到此为止`hexo`就安装完了。
|
||||
|
||||
接下来初始化一下`hexo`,即初始化我们的网站，输入`hexo init`初始化文件夹
|
||||
|
||||
```bash
|
||||
hexo init MyBlog
|
||||
```
|
||||
|
||||
新建完成后，指定文件夹`MyBlog`目录下有：
|
||||
|
||||
- `node_modules`: 依赖包
|
||||
- `public`：存放生成的页面
|
||||
- `scaffolds`：生成文章的一些模板
|
||||
- `source`：用来存放你的文章
|
||||
- `themes`：主题**
|
||||
- `_config.yml`: 博客的配置文件**
|
||||
|
||||
到此为止，本地的网站配置完成了。
|
||||
|
||||
输入`hexo g`生成静态网页，然后输入`hexo s`打开本地服务器
|
||||
|
||||
```bash
|
||||
hexo g
|
||||
hexo s
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 5. 注册Github账号创建个人仓库
|
||||
|
||||
接下来就去注册一个`github`账号，用来存放我们的网站。
|
||||
|
||||
打开[https://github.com/](https://github.com/)，新建一个项目仓库`New repository`，如下所示：
|
||||
|
||||
|
||||
|
||||
然后如下图所示，输入自己的项目名字，后面一定要加`.github.io`后缀，README初始化也要勾上
|
||||
|
||||
|
||||
|
||||
>要创建一个和你用户名相同的仓库，后面加`.github.io`，只有这样，将来要部署到`GitHub page`的时候，才会被识别，也就是`http://xxxx.github.io`，其中xxx就是你注册`GitHub`的用户名。例如我的：`http://LuckyZmj.github.io`
|
||||
|
||||
### 6. 生成SSH添加到GitHub
|
||||
|
||||
生成`SSH`添加到`GitHub`，连接`Github`与本地。
|
||||
右键打开`git bash here`，然后输入下面命令：
|
||||
|
||||
```bash
|
||||
git config --global user.name "注册GitHub用户名"
|
||||
git config --global user.email "注册GitHub的邮箱"
|
||||
```
|
||||
|
||||
用以下两条，检查一下你有没有输对
|
||||
|
||||
```bash
|
||||
git config user.name
|
||||
git config user.email
|
||||
```
|
||||
|
||||
然后创建`SSH`,一路回车
|
||||
|
||||
```bash
|
||||
ssh-keygen -t rsa -C "注册GitHub的邮箱"
|
||||
```
|
||||
|
||||
这个时候它会告诉你已经生成了`.ssh`的文件夹。在`git bash`中输入
|
||||
|
||||
```bash
|
||||
cat ~/.ssh/id_rsa.pub
|
||||
```
|
||||
|
||||
将输出的内容复制到框中，点击确定保存。
|
||||
|
||||
打开`github`，在头像下面点击`settings`，再点击`SSH and GPG keys`，新建一个`SSH`，名字随便取一个都可以，把你的`id_rsa.pub`里面的信息复制进去。如图：
|
||||
|
||||
|
||||
|
||||
在`git bash`输入`ssh -T git@github.com`，如果如下图所示，出现你的用户名，那就成功了。
|
||||
|
||||
```bash
|
||||
ssh -T git@github.com
|
||||
```
|
||||
|
||||
### 7. 将hexo部署到GitHub
|
||||
将`hexo`生成的文章部署到`GitHub`上，打开博客根目录下的`_config.yml`文件，这是博客的配置文件，在这里你可以修改与博客配置相关的各种信息。
|
||||
找到如下配置进行修改：
|
||||
|
||||
```bash
|
||||
deploy:
|
||||
type: git
|
||||
repository: https://github.com/LuckyZmj/LuckyZmj.github.io
|
||||
branch: master
|
||||
```
|
||||
|
||||
`repository`修改为你自己的`github`项目地址即可，就是部署时，告诉工具，将生成网页通过`git`方式上传到你对应的链接仓库中。
|
||||
|
||||
这个时候需要先安装`deploy-git` ，也就是部署的命令,这样你才能用命令部署到`GitHub`。
|
||||
|
||||
```bash
|
||||
npm install hexo-deployer-git --save
|
||||
```
|
||||
|
||||
然后就可以部署提交到`github`，过一会儿就可以在`http://yourname.github.io` 这个网站看到你的博客了
|
||||
|
||||
```bash
|
||||
hexo clean
|
||||
hexo generate
|
||||
hexo deploy
|
||||
```
|
||||
其中 `hexo clean`清除了你之前生成的东西。 `hexo generate`，生成静态文章，可以用 `hexo g`缩写 ，`hexo deploy`部署文章，可以用`hexo d`缩写
|
||||
|
||||
>注意`deploy`时可能要你输入`username`和`password`。
|
||||
|
||||
### 8. 写文章和发布文章
|
||||
|
||||
首先在博客根目录下右键打开`git bash here`，安装一个扩展`npm i hexo-deployer-git`。
|
||||
|
||||
```bash
|
||||
npm i hexo-deployer-git
|
||||
```
|
||||
|
||||
然后输入`hexo new post "article title"`，新建一篇文章。
|
||||
|
||||
```bash
|
||||
hexo new post "article title"
|
||||
```
|
||||
|
||||
然后打开`E:\MyBlog\source\_posts`的目录，可以发现下面多了一个文件夹和一个`.md`文件，一个用来存放你的图片等数据，另一个就是你的文章文件。
|
||||
|
||||
另外推荐直接使用`有道云`编写`markdown`文章，不仅可以实时预览，还可以快捷的生成`markdown`语法格式，具体效果如下图所示。
|
||||
|
||||
|
||||
|
||||
编写完`markdown`文件后，根目录下输入`hexo g`生成静态网页，然后输入`hexo s`可以本地预览效果，最后输入`hexo d`上传到`github`上。这时打开你的`github.io`主页就能看到发布的文章了。
|
||||
|
||||
到此为止，`Hexo`初级搭建就已经完成了。
|
||||
|
||||
## 0x004 Hexo 优化定制
|
||||
|
||||
---
|
||||
|
||||
### 1. Hexo相关目录文件
|
||||
|
||||
#### 1.1 博客目录构成介绍
|
||||
|
||||
`node_modules`是`node.js`各种库的目录，`public`是生成的网页文件目录，`scaffolds`里面就三个文件，存储着新文章和新页面的初始设置，`source`是我们最常用到的一个目录，里面存放着文章、各类页面、图像等文件，`themes`存放着主题文件，一般也用不到。
|
||||
|
||||
我们平时写文章只需要关注`source/_posts`这个文件夹就行了。
|
||||
|
||||
```bash
|
||||
- node_modules
|
||||
- public
|
||||
- scaffolds
|
||||
- source
|
||||
- _data
|
||||
- _posts
|
||||
- about
|
||||
- archives
|
||||
- categories
|
||||
- friends
|
||||
- tags
|
||||
- themes
|
||||
```
|
||||
|
||||
#### 1.2 hexo基本配置
|
||||
|
||||
在文件根目录下的`_config.yml`，就是整`个hexo`框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的[配置描述](https://hexo.io/zh-cn/docs/configuration)。
|
||||
|
||||
##### 1.2.1 网站
|
||||
|
||||
参数描述`title`网站标题`subtitle`网站副标题`description`网站描述`author`您的名字`language`网站使用的语言`timezone`网站时区。`Hexo` 默认使用您电脑的时区。时区列表。比如说：`America/New_York`, `Japan`, 和 `UTC` 。
|
||||
|
||||
其中，`description`主要用于`SEO`，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。`author`参数用于主题显示文章的作者。
|
||||
|
||||
##### 1.2.2 网址
|
||||
|
||||
参数描述`url`网址`root`网站根目录 `permalink`文章的[永久链接](https://hexo.io/zh-cn/docs/permalinks)格式`permalink_defaults`永久链接中各部分的默认值
|
||||
|
||||
在这里，你需要把`url`改成你的网站域名。
|
||||
|
||||
`permalink`，也就是你生成某个文章时的那个链接格式。
|
||||
|
||||
比如我新建一个文章叫`temp.md`，那么这个时候他自动生成的地址就是`http://yoursite.com/2018/09/05/temp`。
|
||||
|
||||
以下是官方给出的示例，关于链接的变量还有很多，需要的可以去官网上查找[永久链接](https://hexo.io/zh-cn/docs/permalinks) 。
|
||||
|
||||
```bash
|
||||
参数结果
|
||||
:year/:month/:day/:title /2019/08/10/hello-world
|
||||
:year-:month-:day-:title.html 2019-08-10-hello-world.html
|
||||
:category/:titlefoo /bar/hello-world
|
||||
```
|
||||
|
||||
### 2. 定制主题
|
||||
|
||||
这里推荐作者`洪卫`的[hexo-blog-fly](https://github.com/shw2018/hexo-blog-fly.git)博客主题，该主题是基于[hexo-theme-matery](https://github.com/blinkfox/hexo-theme-matery)优化的，需要把博客相关信息换成您自己的就可以部署了，极大简化了构建博客的工作量和复杂度。
|
||||
|
||||
#### 2.1 简单使用方法
|
||||
1. 安装`Git`, 安装`nodeJS`，安装`Hexo`
|
||||
1. 你可以直接`fork`一份源码到你的仓库，`clone`到本地博客文件夹内
|
||||
1. 在本地博客仓库运行`npm i`命令安装依赖包
|
||||
1. 直接修改配置信息，改成自己的信息
|
||||
1. 运行命令`hexo clean`（清除生成文件），`hexo g`（生成网页）， `hexo s`（本地预览），`hexo d`（部署）
|
||||
|
||||
#### 2.2 原主题特性:
|
||||
|
||||
- 简单漂亮，文章内容美观易读
|
||||
- [Material Design](https://material.io/) 设计
|
||||
- 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
|
||||
- 首页轮播文章及每天动态切换 `Banner` 图片
|
||||
- 瀑布流式的博客文章列表（文章无特色图片时会有 `24` 张漂亮的图片代替）
|
||||
- 时间轴式的归档页
|
||||
- **词云**的标签页和**雷达图**的分类页
|
||||
- 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）
|
||||
- 可自定义的数据的友情链接页面
|
||||
- 支持文章置顶和文章打赏
|
||||
- 支持 `MathJax`
|
||||
- `TOC` 目录
|
||||
- 可设置复制文章内容时追加版权信息
|
||||
- 可设置阅读文章时做密码验证
|
||||
- [Gitalk](https://gitalk.github.io/)、[Gitment](https://imsun.github.io/gitment/)、[Valine](https://valine.js.org/) 和 [Disqus](https://disqus.com/) 评论模块（推荐使用 `Gitalk`）
|
||||
- 集成了[不蒜子统计](http://busuanzi.ibruce.info/)、谷歌分析（`Google Analytics`）和文章字数统计等功能
|
||||
- 支持在首页的音乐播放和视频播放功能
|
||||
|
||||
#### 2.3 新增加特性:
|
||||
- 修改了原主题的一些很多bug
|
||||
- 加入图片懒加载功能，在根目录配置文件开启和关闭
|
||||
- 增加留言板功能
|
||||
- 在关于板块,加入简历功能页
|
||||
- 增加视听[视觉听觉影音]板块
|
||||
- 支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。
|
||||
- 增加网站运行时间显示
|
||||
- 增加动漫模型
|
||||
- 整体替换Banner图片和文章特色图片
|
||||
- 增加分类相册功能
|
||||
- 修改了一些控件的参数
|
||||
- 修改部分样式,比如: 文章卡片,固定高度,使其不至于因为文章摘要的长短不同导致卡片大小不一使页面布局很不美观,类似的还有友链卡片,优化了页面内容布局,视觉更整齐美观
|
||||
- 解决首页文章列表卡片上方 border-radius圆角失效的bug
|
||||
- 添加页面樱花飘落动效
|
||||
- 添加鼠标点击烟花爆炸动效
|
||||
- 加入天气接口控件
|
||||
- 加入鼠标点击文字特效
|
||||
- 添加页面雪花飘落动效
|
||||
- 添加在线聊天插件
|
||||
- 调整线聊天插件参数，使之能够随着鼠标滑动位置自适应调整
|
||||
- 持续更新...
|
||||
---
|
||||
|
||||
#### 2.4 切换主题
|
||||
|
||||
如果想自己动手对[hexo-theme-matery](https://github.com/blinkfox/hexo-theme-matery)优化的话，可以修改Hexo根目录下的` _config.yml`的 `theme` 的值
|
||||
|
||||
```bash
|
||||
theme: hexo-theme-matery
|
||||
```
|
||||
|
||||
`_config.yml` 文件的其它修改建议:
|
||||
|
||||
- 请修改 `_config.yml` 的 `url` 的值为你的网站主 `URL`（如：`http://xxx.github.io`）。
|
||||
- 建议修改两个 `per_page` 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示。
|
||||
- 如果你是中文用户，则建议修改 `language` 的值为 `zh-CN`。
|
||||
|
||||
#### 2.5 新建分类 categories 页
|
||||
|
||||
`categories` 页是用来展示所有分类的页面，如果在你的博客 `source` 目录下还没有 `categories/index.md` 文件，那么你就需要新建一个，命令如下：
|
||||
|
||||
```bash
|
||||
hexo new page "categories"
|
||||
```
|
||||
|
||||
编辑你刚刚新建的页面文件 `/source/categories/index.md`，至少需要以下内容：
|
||||
|
||||
```bash
|
||||
---
|
||||
title: categories
|
||||
date: 2018-09-30 17:25:30
|
||||
type: "categories"
|
||||
layout: "categories"
|
||||
---
|
||||
```
|
||||
|
||||
#### 2.6 新建标签 tags 页
|
||||
|
||||
`tags` 页是用来展示所有标签的页面，如果在你的博客 `source` 目录下还没有 `tags/index.md` 文件，那么你就需要新建一个，命令如下：
|
||||
|
||||
```bash
|
||||
hexo new page "tags"
|
||||
```
|
||||
|
||||
编辑你刚刚新建的页面文件 `/source/tags/index.md`，至少需要以下内容：
|
||||
|
||||
```bash
|
||||
---
|
||||
title: tags
|
||||
date: 2018-09-30 18:23:38
|
||||
type: "tags"
|
||||
layout: "tags"
|
||||
---
|
||||
```
|
||||
|
||||
#### 2.7 新建关于我 about 页
|
||||
|
||||
`about` 页是用来展示关于我和我的博客信息的页面，如果在你的博客 `source` 目录下还没有 `about/index.md` 文件，那么你就需要新建一个，命令如下：
|
||||
|
||||
```bash
|
||||
hexo new page "about"
|
||||
```
|
||||
|
||||
编辑你刚刚新建的页面文件 `/source/about/index.md`，至少需要以下内容：
|
||||
|
||||
```bash
|
||||
---
|
||||
title: about
|
||||
date: 2018-09-30 17:25:30
|
||||
type: "about"
|
||||
layout: "about"
|
||||
---
|
||||
```
|
||||
|
||||
#### 2.8 新建留言板 contact 页（可选的）
|
||||
|
||||
`contact` 页是用来展示留言板信息的页面，前提是已经开启了第三方评论系统才能显示。如果在你的博客 `source` 目录下还没有 `contact/index.md` 文件，那么你就需要新建一个，命令如下：
|
||||
|
||||
```bash
|
||||
hexo new page "contact"
|
||||
```
|
||||
|
||||
编辑你刚刚新建的页面文件 `/source/contact/index.md`，至少需要以下内容：
|
||||
|
||||
```bash
|
||||
---
|
||||
title: contact
|
||||
date: 2018-09-30 17:25:30
|
||||
type: "contact"
|
||||
layout: "contact"
|
||||
---
|
||||
```
|
||||
|
||||
#### 2.9 新建友情链接 friends 页（可选的）
|
||||
|
||||
`friends` 页是用来展示友情链接信息的页面，如果在你的博客 `source` 目录下还没有 `friends/index.md` 文件，那么你就需要新建一个，命令如下：
|
||||
|
||||
```bash
|
||||
hexo new page "friends"
|
||||
```
|
||||
|
||||
编辑你刚刚新建的页面文件 `/source/friends/index.md`，至少需要以下内容：
|
||||
|
||||
```bash
|
||||
---
|
||||
title: friends
|
||||
date: 2018-12-12 21:25:30
|
||||
type: "friends"
|
||||
layout: "friends"
|
||||
---
|
||||
```
|
||||
|
||||
同时，在你的博客 `source` 目录下新建 `_data` 目录，在 `_data` 目录中新建 `friends.json` 文件，文件内容如下所示：
|
||||
|
||||
```bash
|
||||
[{
|
||||
"avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
|
||||
"name": "码酱",
|
||||
"introduction": "我不是大佬，只是在追寻大佬的脚步",
|
||||
"url": "http://luokangyuan.com/",
|
||||
"title": "前去学习"
|
||||
}, {
|
||||
"avatar": "http://image.luokangyuan.com/4027734.jpeg",
|
||||
"name": "闪烁之狐",
|
||||
"introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
|
||||
"url": "https://blinkfox.github.io/",
|
||||
"title": "前去学习"
|
||||
}, {
|
||||
"avatar": "http://image.luokangyuan.com/avatar.jpg",
|
||||
"name": "ja_rome",
|
||||
"introduction": "平凡的脚步也可以走出伟大的行程",
|
||||
"url": "https://me.csdn.net/jlh912008548",
|
||||
"title": "前去学习"
|
||||
}]
|
||||
```
|
||||
|
||||
#### 2.10 一级菜单导航配置
|
||||
配置基本菜单导航的名称、路径`url`和图标`icon`
|
||||
|
||||
- 菜单导航名称可以是中文也可以是英文(如：`Index`或主页)
|
||||
- 图标`icon` 可以在`Font Awesome` 中查找
|
||||
|
||||
```bash
|
||||
menu:
|
||||
Index:
|
||||
url: /
|
||||
icon: fas fa-home
|
||||
Tags:
|
||||
url: /tags
|
||||
icon: fas fa-tags
|
||||
Categories:
|
||||
url: /categories
|
||||
icon: fas fa-bookmark
|
||||
Archives:
|
||||
url: /archives
|
||||
icon: fas fa-archive
|
||||
About:
|
||||
url: /about
|
||||
icon: fas fa-user-circle
|
||||
Friends:
|
||||
url: /friends
|
||||
icon: fas fa-address-book
|
||||
```
|
||||
|
||||
#### 2.11 二级菜单配置方法
|
||||
|
||||
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
|
||||
- 在需要添加二级菜单的一级菜单下添加`children`关键字(如:`About`菜单下添加`children`)
|
||||
- 在`children`下创建二级菜单的 名称`name`,路径`url`和图标`icon`.
|
||||
- 注意每个二级菜单模块前要加 -.
|
||||
- 注意缩进格式
|
||||
|
||||
```bash
|
||||
menu:
|
||||
Index:
|
||||
url: /
|
||||
icon: fas fa-home
|
||||
Tags:
|
||||
url: /tags
|
||||
icon: fas fa-tags
|
||||
Categories:
|
||||
url: /categories
|
||||
icon: fas fa-bookmark
|
||||
Archives:
|
||||
url: /archives
|
||||
icon: fas fa-archive
|
||||
About:
|
||||
url: /about
|
||||
icon: fas fa-user-circle-o
|
||||
Friends:
|
||||
url: /friends
|
||||
icon: fas fa-address-book
|
||||
Medias:
|
||||
icon: fas fa-list
|
||||
children:
|
||||
- name: Musics
|
||||
url: /musics
|
||||
icon: fas fa-music
|
||||
- name: Movies
|
||||
url: /movies
|
||||
icon: fas fa-film
|
||||
- name: Books
|
||||
url: /books
|
||||
icon: fas fa-book
|
||||
- name: Galleries
|
||||
url: /galleries
|
||||
icon: fas fa-image
|
||||
```
|
||||
|
||||
执行 `hexo clean` && `hexo g` 重新生成博客文件。
|
||||
|
||||
#### 2.12 代码高亮
|
||||
|
||||
由于 `Hexo` 自带的代码高亮主题显示不好看，所以主题中使用到了 `hexo-prism-plugin` 的 `Hexo` 插件来做代码高亮，安装命令如下：
|
||||
|
||||
```bash
|
||||
npm i -S hexo-prism-plugin
|
||||
```
|
||||
|
||||
然后，修改 `Hexo` 根目录下 `_config.yml` 文件中 `highlight.enable` 的值为 `false`，并新增 `prism` 插件相关的配置，主要配置如下：
|
||||
|
||||
```bash
|
||||
highlight:
|
||||
enable: false
|
||||
|
||||
prism_plugin:
|
||||
mode: 'preprocess' # realtime/preprocess
|
||||
theme: 'tomorrow'
|
||||
line_number: false # default false
|
||||
custom_css:
|
||||
```
|
||||
|
||||
>更多代码块优化详细内容请访问：http://luckyzmj.cn/posts/1b9a9e28.html
|
||||
|
||||
#### 2.13 搜索
|
||||
|
||||
本主题中还使用到了 `hexo-generator-search` 的 `Hexo` 插件来做内容搜索，安装命令如下：
|
||||
|
||||
```bash
|
||||
npm install hexo-generator-search --save
|
||||
```
|
||||
|
||||
在 `Hexo` 根目录下的 `_config.yml` 文件中，新增以下的配置项：
|
||||
|
||||
```bash
|
||||
search:
|
||||
path: search.xml
|
||||
field: post
|
||||
```
|
||||
|
||||
#### 2.14 文章字数统计插件（建议安装）
|
||||
|
||||
如果你想要在文章中显示文章字数、阅读时长信息，可以安装 `hexo-wordcount` 插件。
|
||||
|
||||
安装命令如下：
|
||||
|
||||
```bash
|
||||
npm i --save hexo-wordcount
|
||||
```
|
||||
|
||||
然后只需在本主题下的 `_config.yml` 文件中，将各个文章字数相关的配置激活即可：
|
||||
|
||||
```bash
|
||||
postInfo:
|
||||
date: true
|
||||
update: false
|
||||
wordCount: false # 设置文章字数统计为 true.
|
||||
totalCount: false # 设置站点文章总字数统计为 true.
|
||||
min2read: false # 阅读时长.
|
||||
readCount: false # 阅读次数.
|
||||
```
|
||||
|
||||
#### 2.15 添加emoji表情支持（可选的）
|
||||
|
||||
本主题新增了对`emoji`表情的支持，使用到了 `hexo-filter-github-emojis` 的 `Hexo` 插件来支持 `emoji`表情的生成，把对应的`markdown` `emoji`语法（::,例如：`:smile:`）转变成会跳跃的`emoji`表情，安装命令如下：
|
||||
|
||||
```bash
|
||||
npm install hexo-filter-github-emojis --save
|
||||
```
|
||||
|
||||
在 `Hexo` 根目录下的 `_config.yml` 文件中，新增以下的配置项：
|
||||
|
||||
```bash
|
||||
githubEmojis:
|
||||
enable: true
|
||||
className: github-emoji
|
||||
inject: true
|
||||
styles:
|
||||
customEmojis:
|
||||
```
|
||||
|
||||
#### 2.16 添加 RSS 订阅支持（可选的）
|
||||
|
||||
本主题中还使用到了`hexo-generator-feed` 的 `Hexo` 插件来做 `RSS`，安装命令如下：
|
||||
|
||||
```bash
|
||||
npm install hexo-generator-feed --save
|
||||
```
|
||||
|
||||
在 `Hexo` 根目录下的` _config.yml` 文件中，新增以下的配置项：
|
||||
|
||||
```bash
|
||||
feed:
|
||||
type: atom
|
||||
path: atom.xml
|
||||
limit: 20
|
||||
hub:
|
||||
content:
|
||||
content_limit: 140
|
||||
content_limit_delim: ' '
|
||||
order_by: -date
|
||||
```
|
||||
|
||||
执行 `hexo clean` && `hexo g` 重新生成博客文件，然后在 `public` 文件夹中即可看到 `atom.xml` 文件，说明你已经安装成功了。
|
||||
|
||||
#### 2.17 添加 DaoVoice 在线聊天功能（可选的）
|
||||
|
||||
前往 `DaoVoice` 官网注册并且获取 `app_id`，并将 `app_id` 填入主题的 `_config.yml` 文件中。
|
||||
|
||||
#### 2.18 添加 Tidio 在线聊天功能（可选的）
|
||||
|
||||
前往 `Tidio` 官网注册并且获取 `Public Key`，并将 `Public Key` 填入主题的 `_config.yml` 文件中。
|
||||
|
||||
#### 2.19 修改页脚
|
||||
|
||||
页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 `/layout/_partial/footer.ejs` 文件中，包括站点、使用的主题、访问量等。
|
||||
|
||||
#### 2.20 修改社交链接
|
||||
|
||||
在主题的 `_config.yml` 文件中，默认支持 `QQ`、`GitHub` 和邮箱等的配置，你可以在主题文件的 `/layout/_partial/social-link.ejs` 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：
|
||||
|
||||
```html
|
||||
<% if (theme.socialLink.github) { %>
|
||||
<a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<% } %>
|
||||
```
|
||||
|
||||
其中，社交图标（如：`fa-github`）你可以在 `Font Awesome` 中搜索找到。以下是常用社交图标的标识，供你参考：
|
||||
|
||||
- Facebook: fab fa-facebook
|
||||
- Twitter: fab fa-twitter
|
||||
- Google-plus: fab fa-google-plus
|
||||
- Linkedin: fab fa-linkedin
|
||||
- Tumblr: fab fa-tumblr
|
||||
- Medium: fab fa-medium
|
||||
- Slack: fab fa-slack
|
||||
- Sina Weibo: fab fa-weibo
|
||||
- Wechat: fab fa-weixin
|
||||
- QQ: fab fa-qq
|
||||
- Zhihu: fab fa-zhihu
|
||||
|
||||
注意: 本主题中使用的 `Font Awesome` 版本为 5.11.0。
|
||||
|
||||
#### 2.21 修改打赏的二维码图片
|
||||
|
||||
在主题文件的 `source/medias/reward` 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。
|
||||
|
||||
#### 2.22 配置音乐播放器（可选的）
|
||||
|
||||
要支持音乐播放，在主题的 `_config.yml` 配置文件中激活`music`配置即可
|
||||
|
||||
|
||||
```bash
|
||||
# 是否在首页显示音乐
|
||||
music:
|
||||
enable: true
|
||||
title: #非吸底模式有效
|
||||
enable: true
|
||||
show: 听听音乐
|
||||
server: netease #require music platform: netease, tencent, kugou, xiami, baidu
|
||||
type: playlist #require song, playlist, album, search, artist
|
||||
id: 503838841 #require song id / playlist id / album id / search keyword
|
||||
fixed: false # 开启吸底模式
|
||||
autoplay: false # 是否自动播放
|
||||
theme: '#42b983'
|
||||
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
|
||||
order: 'random' # 音频循环顺序, 可选值: 'list', 'random'
|
||||
preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
|
||||
volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
|
||||
listFolded: true # 列表默认折叠
|
||||
|
||||
提示：
|
||||
server可选netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）。
|
||||
|
||||
type可选song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）
|
||||
|
||||
id获取示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，地址栏有一串数字，playlist的id即为这串数字。
|
||||
```
|
||||
|
||||
#### 2.23文章 Front-matter 介绍
|
||||
|
||||
`Front-matter` 选项中的所有内容均为非必填的。但我仍然建议至少填写 `title` 和 `date` 的值。
|
||||
|
||||
配置选项 | 默认值 | 描述
|
||||
---|---|---
|
||||
title | Markdown 的文件标题 | 文章标题，强烈建议填写此选项
|
||||
date | 文件创建时的日期时间 | 发布时间，强烈建议填写此选项，且最好保证全局唯一
|
||||
author | 根 _config.yml 中的 author | 文章作者
|
||||
img | featureImages 中的某个值 | 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
|
||||
top | true | 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
|
||||
cover | false | v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
|
||||
coverImg | 无 | v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
|
||||
password | 无 | 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
|
||||
toc | true | 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
|
||||
mathjax | false | 是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
|
||||
summary | 无 | 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
|
||||
categories | 无 | 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
|
||||
tags | 无 | 文章标签，一篇文章可以多个标签
|
||||
keywords | 文章标题 | 文章关键字，SEO 时需要
|
||||
reprintPolicy | cc_by | 文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个
|
||||
|
||||
|
||||
```bash
|
||||
注意:
|
||||
如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。
|
||||
date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
|
||||
如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
|
||||
您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则
|
||||
```
|
||||
|
||||
|
||||
以下为文章的 `Front-matter` 示例。
|
||||
最简示例
|
||||
|
||||
```bash
|
||||
---
|
||||
title: typora-vue-theme主题介绍
|
||||
date: 2018-09-07 09:25:00
|
||||
---
|
||||
```
|
||||
|
||||
最全示例
|
||||
|
||||
```bash
|
||||
---
|
||||
title: theme主题介绍
|
||||
date: 2018-09-07 09:25:00
|
||||
author: 赵奇
|
||||
img: /source/images/xxx.jpg
|
||||
top: true
|
||||
cover: true
|
||||
coverImg: /images/1.jpg
|
||||
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
|
||||
toc: false
|
||||
mathjax: false
|
||||
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
|
||||
categories: Markdown
|
||||
tags:
|
||||
- Typora
|
||||
- Markdown
|
||||
---
|
||||
```
|
||||
|
||||
#### 2.24 自定制修改
|
||||
|
||||
在本主题的 `_config.yml` 中可以修改部分自定义信息，有以下几个部分：
|
||||
|
||||
- 菜单
|
||||
- 我的梦想
|
||||
- 首页的音乐播放器和视频播放器配置
|
||||
- 是否显示推荐文章名称和按钮配置
|
||||
- favicon 和 Logo
|
||||
- 个人信息
|
||||
- TOC 目录
|
||||
- 文章打赏信息
|
||||
- 复制文章内容时追加版权信息
|
||||
- MathJax
|
||||
- 文章字数统计、阅读时长
|
||||
- 点击页面的'爱心'效果
|
||||
- 我的项目
|
||||
- 我的技能
|
||||
- 我的相册
|
||||
- Gitalk、Gitment、Valine 和 disqus 评论配置
|
||||
- 不蒜子统计和谷歌分析（Google Analytics）
|
||||
- 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图
|
||||
|
||||
我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：
|
||||
修改主题颜色
|
||||
|
||||
在主题文件的 `/source/css/matery.css` 文件中，搜索 `.bg-color` 来修改背景颜色：
|
||||
|
||||
```css
|
||||
/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
|
||||
.bg-color {
|
||||
background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
|
||||
}
|
||||
|
||||
@-webkit-keyframes rainbow {
|
||||
/* 动态切换背景颜色. */
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
/* 动态切换背景颜色. */
|
||||
}
|
||||
|
||||
body {
|
||||
/* background-color: #eaeaea; */
|
||||
/* 增加背景壁纸*/
|
||||
background: url("https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png"), url("http://luckyzmj.cn/img/yun.jpg") 0px 0px;
|
||||
background-attachment: fixed;
|
||||
margin: 0;
|
||||
color: #34495e;
|
||||
}
|
||||
```
|
||||
|
||||
#### 2.25 修改 banner 图和文章特色图
|
||||
|
||||
你可以直接在 `/source/medias/banner` 文件夹中更换你喜欢的 `banner` 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 `JavaScript` 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 `/layout/_partial/bg-cover-content.ejs` 文件的 `<script></script>` 代码中：
|
||||
|
||||
```css
|
||||
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
|
||||
```
|
||||
|
||||
在 `/source/medias/featureimages` 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 `_config.yml` 做同步修改。
|
||||
|
||||
|
||||
#### 2.26 优化目录栏
|
||||
|
||||
在 `themes\Matery\layout\_partial\post-detail-toc.ejs`，修改内容如下：
|
||||
|
||||
```css
|
||||
.toc-widget {
|
||||
padding-left: 20px;
|
||||
width: 345px;
|
||||
background-color: rgb(255, 255, 255,0.7);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 35px 2px rgba(0, 0, 0, .15), 0 5px 15px rgba(0, 0, 0, .07), 0 2px 5px -5px rgba(0, 0, 0, .1) !important;
|
||||
}
|
||||
|
||||
#toc-content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 0x005 更多详细教程
|
||||
|
||||
以下几篇文章都是基于`Hexo`框架和`hexo-theme-matery`主题优化的教程，大家如果遇到问题，可以参考其中的方法。
|
||||
- [Hexo+Github博客搭建完全教程](https://sunhwee.com/posts/6e8839eb.html)
|
||||
- [hexo-theme-matery作者教程](https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md)
|
||||
- [Hexo+github搭建博客(超级详细版，精细入微)](https://yafine-blog.cn/posts/4ab2.html)
|
||||
- [hexo（matery）背景、滚动条优化+增加点击跳评论](https://blog.csdn.net/cungudafa/article/details/106278206)
|
||||
@@ -0,0 +1,578 @@
|
||||
---
|
||||
title: LuckyBlog开源搭建教程
|
||||
author: luckyzmj
|
||||
coverImg: /medias/banner/7.jpg
|
||||
top: true
|
||||
cover: true
|
||||
toc: true
|
||||
mathjax: false
|
||||
summary: >-
|
||||
之前在B站上发布了个人博客的视频，播放量也破千了，有网友私聊也想要搭建一个这样的博客。经过一段时间的准备，现将博客LuckyBlog的源代码公布出来，大家只需要根据以下的步骤，即可快速搭建一个漂亮且完善的博客。
|
||||
tags:
|
||||
- hexo-blog-lucky
|
||||
- 博客搭建教程
|
||||
categories:
|
||||
- 博客篇
|
||||
abbrlink: d74d8b76
|
||||
reprintPolicy: cc_by
|
||||
date: 2020-09-17 00:00:00
|
||||
img:
|
||||
password:
|
||||
---
|
||||
|
||||
### 前言
|
||||
|
||||
之前在[B站](https://www.bilibili.com/)上发布了个人博客的视频，播放量也破千了，有网友私聊也想要搭建一个这样的博客。经过一段时间的准备，现将本人博客的源代码公布出来，大家只需要根据以下的步骤，即可快速搭建一个漂亮完善的博客。
|
||||
|
||||
|
||||
|
||||
### 0x01 LuckyBlog 介绍
|
||||
|
||||
上一个LuckyBlog版本发布于2020年的9月份，是在 [洪卫の博客](https://sunhwee.com/) 基础上进行修改的。自从发布以来有很多网友都私信搭建了博客，同时也发现了旧版本中存在的一些问题需要解决，例如：搜索框不适配XML代码搜索，部分图片失效，代码块问题以及各种小问题。现在将最新的LuckyBlog版本代码发布出来，修复改进了不少的BUG，使其更加稳定运行。同时完善了博客的基础功能，例如：音乐、视频、相册、百宝箱等页面。同时增加了不少的新功能，例如：适配Hexo5.x、黑白天浏览模式、仿Windows页面，站点统计等。
|
||||
|
||||
- 博客演示地址：http://luckyzmj.cn/
|
||||
- 开源项目地址：https://github.com/LuckyZmj/LuckyBlog
|
||||
|
||||
**主题特性**
|
||||
|
||||
- [x] 简单漂亮，文章内容美观易读
|
||||
- [x] [Material Design](https://material.io/) 设计
|
||||
- [x] 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
|
||||
- [x] 首页轮播文章及每天动态切换 `Banner` 图片
|
||||
- [x] 瀑布流式的博客文章列表（文章无特色图片时会有 `24` 张漂亮的图片代替）
|
||||
- [x] 时间轴式的归档页
|
||||
- [x] `词云`的标签页和`雷达图`的分类页
|
||||
- [x] 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）
|
||||
- [x] 可自定义的数据的友情链接页面
|
||||
- [x] 支持文章置顶和文章打赏
|
||||
- [x] 支持 `MathJax`
|
||||
- [x] `TOC` 目录，优化了目录显示效果
|
||||
- [x] 可设置复制文章内容时追加版权信息
|
||||
- [x] 可设置阅读文章时做密码验证
|
||||
- [x] [Gitalk](https://gitalk.github.io/)、[Gitment](https://imsun.github.io/gitment/)、[Valine](https://valine.js.org/) 和 [Disqus](https://disqus.com/) 评论模块（推荐使用 `Valine`）
|
||||
- [x] 集成了[不蒜子统计](http://busuanzi.ibruce.info/)、谷歌分析（`Google Analytics`）和文章字数统计等功能
|
||||
- [x] 支持在首页的音乐播放和视频播放功能
|
||||
- [x] 修改了原主题以及基础主题中的一些`BUG`
|
||||
- [x] 加入图片懒加载功能，在根目录配置文件开启和关闭
|
||||
- [x] 增加`留言板`功能
|
||||
- [x] 在关于板块,加入`简历`功能页
|
||||
- [x] 增加完善`音乐`、`相册`、`视频`等功能页面
|
||||
- [x] 支持`emoji`表情，用`markdown emoji`语法书写直接生成对应的能**跳跃**的表情
|
||||
- [x] 增加网站运行时间显示
|
||||
- [x] 增加`live2d` 动漫人物模型
|
||||
- [x] 整体替换Banner图片和文章特色图片
|
||||
- [x] 增加实用的快捷导航栏功能
|
||||
- [x] 修改了一些控件的参数以及部分样式
|
||||
- [x] 优化了代码显示块的效果
|
||||
- [x] 增加页面樱花飘落动效
|
||||
- [x] 增加鼠标点击烟花爆炸动效
|
||||
- [x] 增加页面雪花飘落动效
|
||||
- [x] 增加博客白云背景效果
|
||||
- [x] 增加天气接口控件
|
||||
- [x] 加入鼠标点击文字特效
|
||||
- [x] 增加`DaoVoice`在线聊天插件
|
||||
- [x] 增加博客代码、图片压缩功能
|
||||
- [x] 增加黑白天浏览模式功能
|
||||
- [x] 增加仿`Windows`功能
|
||||
- [x] 增加站点统计功能
|
||||
- [x] 增加留言版一言功能
|
||||
- [x] 其他
|
||||
|
||||
### 0x02 LuckyBlog 安装
|
||||
|
||||
#### 1. 安装Git
|
||||
`Git`是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。`Git`的作用是将本地的网页文件传到`github`上。
|
||||
|
||||
- Git[下载地址](https://git-scm.com/download)
|
||||
- Git[教程](https://www.liaoxuefeng.com/wiki/896043488029600)
|
||||
|
||||
**windows：** 到git官网上下载.exe文件,Download git,安装选项全部默认即可。
|
||||
|
||||
#### 2. 安装node.js
|
||||
`Hexo`是基于`node.js`编写的，所以需要安装一下`node.js`和里面的`npm`工具。
|
||||
|
||||
**windows：** 到[Node.js官网](http://nodejs.cn/download/)下载`.exe`文件，安装选项全部默认。安装好之后，按`Win+R`打开cmd命令提示符，输入`node -v`和`npm -v`，若出现版本号，则说明安装成功。
|
||||
|
||||
#### 3. 添加npm国内源
|
||||
|
||||
使用阿里的国内镜像进行加速下载
|
||||
|
||||
```bash
|
||||
npm config set registry https://registry.npm.taobao.org
|
||||
```
|
||||
|
||||
#### 4. 安装Hexo
|
||||
|
||||
前面`git`和`nodejs`安装好后，就可以安装`hexo`了，你可以先创建一个文件夹`MyBlog`，用来存放自己的博客文件，然后`cd`到这个文件夹下（或者在这个文件夹下直接鼠标右键`git bash`打开）。
|
||||
|
||||
比如我的博客文件都存放在`C:\MyBlog`目录下。
|
||||
|
||||
在该目录下右键点击`Git Bash Here`，打开`git`的控制台窗口，以后我们所有的操作都在`git`控制台进行，就不用`Windows`自带的`cmd`了。
|
||||
|
||||
定位到该目录下，输入`npm install -g hexo-cli`安装`Hexo`。可能会有几个报错，不用理会。
|
||||
|
||||
```bash
|
||||
npm install -g hexo-cli
|
||||
```
|
||||
|
||||
安装完后输入`hexo -v`验证是否安装成功。
|
||||
|
||||
接下来初始化一下`hexo`,即初始化我们的博客网站。例如我的在`C:\MyBlog`文件夹下的命令行中，输入`hexo init`初始化文件夹
|
||||
|
||||
```bash
|
||||
hexo init
|
||||
```
|
||||
|
||||
新建完成后，指定文件夹`MyBlog`目录下有：
|
||||
|
||||
- `node_modules`: 依赖包
|
||||
- `public`：存放生成的页面
|
||||
- `scaffolds`：生成文章的一些模板
|
||||
- `source`：用来存放你的文章
|
||||
- `themes`：主题**
|
||||
- `_config.yml`: 博客的配置文件**
|
||||
|
||||
到此为止，本地的Hexo基础环境搭建完成了。
|
||||
|
||||
#### 5. 安装LuckyBlog
|
||||
|
||||
下载源代码到本地文件下
|
||||
|
||||
```bash
|
||||
git clone https://github.com/LuckyZmj/LuckyBlog.git
|
||||
```
|
||||
|
||||
将下载好的`LuckyBlog`全部复制到`MyBlog`目录下，如果复制过程中出现重复文件，点击替换。
|
||||
|
||||
|
||||
|
||||
|
||||
最后使用 `npm i` 或者 `npm install` 安装依赖环境包即可。
|
||||
|
||||
>如果安装依赖环境出错，可以参考[这篇文章](https://blog.csdn.net/Seven71111/article/details/103364738)。
|
||||
|
||||
最后执行 `hexo clean` 和 `hexo s -g` 启动Hexo本地预览，即可看到效果。
|
||||
|
||||
|
||||
|
||||
到此为止LuckyBlog安装完成，接下来就是个性化设置了。
|
||||
|
||||
### 0x03 LuckyBlog 个性化
|
||||
|
||||
>注意！注意！注意！在阅读以下博客个性化之前，最好希望大家有Hexo博客配置主题的基础。如果是完全小白，建议去网上搜索学习相关Hexo搭建博客的过程，另外去B站上也有很多视频教程。博客个性化是需要大家有耐心的，因为每个人的操作不同，在配置过程中可能会遇到一些不可预期的问题，希望大家可以克服这些困难，如有需要帮助，也可以私信博主帮助大家解决问题。
|
||||
|
||||
#### 1. 修改部署平台
|
||||
|
||||
编辑根目录下的配置文件`MyBlog/_config.yml`，找到如下内容并修改
|
||||
|
||||
```bash
|
||||
deploy:
|
||||
- type: git
|
||||
repo: git@github.com:LuckyZmj/LuckyZmj.github.io.git # 替换为你的部署平台地址
|
||||
branch: master
|
||||
```
|
||||
|
||||
#### 2. 修改网站信息
|
||||
|
||||
编辑根目录下的配置文件`MyBlog/_config.yml`，找到如下内容并修改
|
||||
|
||||
```bash
|
||||
# Site
|
||||
title: Luckey
|
||||
subtitle: 'Luckeyの博客'
|
||||
description: '本科 | 计算机科学与技术 | 网络安全'
|
||||
keywords: 'luckyzmj 计算机 网络安全 渗透测试' # 博客网站关键词
|
||||
author: Luckey # 博主名称
|
||||
language: zh-CN
|
||||
timezone: ''
|
||||
|
||||
# URL
|
||||
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
|
||||
url: http://www.luckyzmj.cn # 更改为你的博客地址
|
||||
root: /
|
||||
# permalink: :year/:month/:day/:title/
|
||||
permalink: posts/:abbrlink.html # p 是自定义的前缀
|
||||
abbrlink:
|
||||
alg: crc32 #算法： crc16(default) and crc32
|
||||
rep: hex #进制： dec(default) and hex
|
||||
permalink_defaults:
|
||||
pretty_urls:
|
||||
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
|
||||
trailing_html: true # Set to false to remove trailing '.html' from permalinks
|
||||
```
|
||||
|
||||
#### 3. 修改博客头像
|
||||
|
||||
编辑主题目录下的配置文件`MyBlog/themes/matery/_config.yml`，找到如下内容并修改
|
||||
|
||||
```bash
|
||||
# Configure website favicon and LOGO
|
||||
# 将以下改为自己的头像链接即可
|
||||
favicon: https://s1.ax1x.com/2020/05/17/YR20js.jpg
|
||||
logo: https://s1.ax1x.com/2020/05/17/YRWsYT.png
|
||||
```
|
||||
|
||||
|
||||
#### 4. 修改留言板简介
|
||||
|
||||
演示效果如下：
|
||||
|
||||
|
||||
|
||||
编辑 `/MyBlog/contact/index.md`，修改你想要内容即可
|
||||
|
||||
```bash
|
||||
---
|
||||
title: contact
|
||||
date: 2019-10-25 00:00:00
|
||||
type: "contact"
|
||||
layout: "contact"
|
||||
---
|
||||
|
||||
## 畅所欲言
|
||||
---
|
||||
在这里可以留下你的足迹，欢迎在下方留言，欢迎交换友链，一起交流学习！
|
||||
|
||||
## 友链
|
||||
---
|
||||
Lucky_Meの友链信息
|
||||
|
||||
博客名称: Lucky_Meの博客
|
||||
|
||||
博客网址: http://luckyzmj.cn
|
||||
|
||||
博客头像: https://s1.ax1x.com/2020/05/17/YRWsYT.png
|
||||
|
||||
博客介绍: 知识面决定攻击面，知识链决定攻击深度！
|
||||
```
|
||||
|
||||
#### 5. 修改音乐列表
|
||||
|
||||
想要修改自己喜欢的音乐之前，需要先获取音乐列表的id。
|
||||
|
||||
以QQ音乐为例：先登录[QQ音乐网页版](https://y.qq.com/)，点击打开自己喜欢的音乐列表，在网页的URL处包含了音乐列表的id，如下图所示
|
||||
|
||||
|
||||
|
||||
编辑主题目录下的配置文件`MyBlog/themes/matery/_config.yml`，找到如下内容并修改
|
||||
|
||||
```bash
|
||||
# 默认是博主的QQ音乐的id，大家可以改为自己音乐喜欢列表的id
|
||||
# 更新完id，就可以同步加载自己喜欢的列表音乐了
|
||||
|
||||
# Whether to display the musics.
|
||||
# 是否在首页显示音乐.
|
||||
music:
|
||||
enable: true
|
||||
title: #非吸底模式有效
|
||||
enable: true
|
||||
show: 听听音乐
|
||||
autoHide: true # hide automaticaly
|
||||
server: tencent #require music platform: netease, tencent, kugou, xiami, baidu
|
||||
type: playlist #require song, playlist, album, search, artist
|
||||
id: 1776127550 #require song id / playlist id / album id / search keyword
|
||||
fixed: true # 开启吸底模式
|
||||
autoplay: false # 是否自动播放
|
||||
theme: '#42b983'
|
||||
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
|
||||
order: 'random' # 音频循环顺序, 可选值: 'list', 'random'
|
||||
preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
|
||||
volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
|
||||
listFolded: true # 列表默认折叠
|
||||
hideLrc: true # 隐藏歌词
|
||||
|
||||
# Whether to display the musics.
|
||||
# 单独的音乐页面.
|
||||
musics:
|
||||
enable: true
|
||||
title: #非吸底模式有效
|
||||
enable: true
|
||||
show: 听听音乐
|
||||
server: tencent #require music platform: netease, tencent, kugou, xiami, baidu
|
||||
type: playlist #require song, playlist, album, search, artist
|
||||
id: 1776127550 #require song id / playlist id / album id / search keyword
|
||||
fixed: false # 开启吸底模式
|
||||
autoplay: true # 是否自动播放
|
||||
theme: '#42b983'
|
||||
loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none'
|
||||
order: 'random' # 音频循环顺序, 可选值: 'list', 'random'
|
||||
preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto'
|
||||
volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
|
||||
listFolded: false # 列表默认折叠
|
||||
listMaxHeight: "525px" #列表最大高度
|
||||
```
|
||||
|
||||
#### 6. 绑定 Valine 评论
|
||||
|
||||
编辑主题目录下的配置文件`MyBlog/themes/matery/_config.yml`，找到如下内容并修改
|
||||
|
||||
```bash
|
||||
# Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.
|
||||
valine:
|
||||
enable: true
|
||||
appId: Ucrxxxxxxxxxxxxxxxx-xxxxsz # 自行注册valine获取
|
||||
appKey: zPsLxxxxxxxxxxxxxxerLmd # 自行注册valine获取
|
||||
notify: true
|
||||
verify: true
|
||||
visitor: true
|
||||
avatar: 'monsterid' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
|
||||
pageSize: 10
|
||||
placeholder: '留下你的足迹..' # Comment Box placeholder
|
||||
background: /medias/comment_bg.png
|
||||
count: true
|
||||
enableQQ: 16463223 # 改为自己的QQ号
|
||||
recordIP: true
|
||||
requiredFields:
|
||||
- nick
|
||||
- mail
|
||||
guest_info:
|
||||
- nick
|
||||
- mail
|
||||
- link
|
||||
master:
|
||||
- 46606772953bed0812789d6dc955614e # md5加密后的博主邮箱
|
||||
metaPlaceholder: # 输入框的背景文字
|
||||
nick: 昵称/QQ号(必填)
|
||||
mail: 邮箱(必填)
|
||||
link: 网址(https://)
|
||||
lang: zh-CN
|
||||
tagMeta: # The String Array of Words to show Flag.[Just Only xCss Style mode]
|
||||
- 博主
|
||||
- 小伙伴
|
||||
- 访客
|
||||
friends: # The MD5 String Array of friends Email to show friends Flag.[Just Only xCss Style mode]
|
||||
- cb3e577ff029d6073400d5557effd41f
|
||||
-
|
||||
```
|
||||
|
||||
#### 7. 绑定 DaoVoice 在线聊天
|
||||
|
||||
编辑主题目录下的配置文件`MyBlog/themes/matery/_config.yml`，找到如下内容并修改
|
||||
|
||||
```bash
|
||||
daovoice:
|
||||
enable: true
|
||||
app_id: 4xxxxxxxe #DaoVoice中的app_id
|
||||
```
|
||||
|
||||
#### 8. 快捷导航页面个性化
|
||||
|
||||
编辑文件`MyBlog/source/tools/index.html`，以下简单标记出几处，还有其他涉及到博客信息的内容都需要改为你自己的博客信息即可。
|
||||
|
||||
|
||||
|
||||
#### 9. 添加友情链接
|
||||
|
||||
编辑文件`MyBlog/suorce/_data/friends.json`，按如下格式添加友情
|
||||
|
||||
```bash
|
||||
[
|
||||
{
|
||||
"avatar": "https://s1.ax1x.com/2020/05/17/YRWsYT.png",
|
||||
"name": "Luckey",
|
||||
"introduction": "越努力，越幸运",
|
||||
"url": "http://www.luckyzmj.cn",
|
||||
"title": "访问主页"
|
||||
},{
|
||||
"avatar": "https://sunhwee.com/hwsun.jpg",
|
||||
"name": "洪卫の博客",
|
||||
"introduction": "UESTC CVer",
|
||||
"url": "http://sunhwee.com",
|
||||
"title": "访问主页"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
#### 10. 添加相册
|
||||
|
||||
比如你的图片上传图床后，链接地址如下
|
||||
|
||||
```bash
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/璀璨星空/01.jpg
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/璀璨星空/02.jpg
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/动漫风景/01.jpg
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/动漫风景/02.jpg
|
||||
...
|
||||
```
|
||||
|
||||
首先提取出图片链接公共的部分，作为图床地址
|
||||
|
||||
```bash
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/
|
||||
```
|
||||
|
||||
然后再提取图片地址中不同的部分，作为图片地址
|
||||
|
||||
```bash
|
||||
璀璨星空/01.jpg
|
||||
璀璨星空/02.jpg
|
||||
动漫风景/01.jpg
|
||||
动漫风景/03.jpg
|
||||
...
|
||||
```
|
||||
|
||||
>具体怎么分割根据你自己图床的链接格式而定，以上为我的github图床格式为例。
|
||||
|
||||
将相册图床的地址改为你自己的图床地址，需要更改两处文件
|
||||
|
||||
```bash
|
||||
# 例如我的图床地址为：
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/
|
||||
```
|
||||
|
||||
themes/matery/layout/galleries.ejs
|
||||
|
||||
|
||||
|
||||
themes/matery/layout/gallerie.ejs
|
||||
|
||||
|
||||
|
||||
为每个相册添加链接地址，在根目录/source/List/galleries/下新建 相册名称 文件夹，并在该文件夹下新建 `index.md`
|
||||
|
||||
|
||||
|
||||
最后，在根目录/source/_data/galleries.json中添加图片链接，格式如下,
|
||||
|
||||
```bash
|
||||
[
|
||||
{
|
||||
"name": "璀璨星空",
|
||||
"cover": "璀璨星空/01.jpg",
|
||||
"description": "璀璨星空",
|
||||
"photos": [
|
||||
"璀璨星空/01.jpg",
|
||||
"璀璨星空/02.jpg",
|
||||
"璀璨星空/03.jpg",
|
||||
"璀璨星空/04.jpg",
|
||||
"璀璨星空/05.jpg",
|
||||
"璀璨星空/06.jpg",
|
||||
"璀璨星空/07.jpg",
|
||||
"璀璨星空/08.jpg",
|
||||
"璀璨星空/09.jpg",
|
||||
"璀璨星空/10.jpg",
|
||||
"璀璨星空/11.jpg",
|
||||
"璀璨星空/12.jpg",
|
||||
"璀璨星空/13.jpg",
|
||||
"璀璨星空/14.jpg",
|
||||
"璀璨星空/15.jpg",
|
||||
"璀璨星空/16.jpg"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "动漫风景",
|
||||
"cover": "动漫风景/01.jpg",
|
||||
"description": "动漫风景",
|
||||
"photos": [
|
||||
"动漫风景/01.jpg",
|
||||
"动漫风景/02.jpg",
|
||||
"动漫风景/03.jpg",
|
||||
"动漫风景/04.jpg",
|
||||
"动漫风景/05.jpg",
|
||||
"动漫风景/06.jpg",
|
||||
"动漫风景/07.jpg",
|
||||
"动漫风景/08.jpg",
|
||||
"动漫风景/09.jpg",
|
||||
"动漫风景/10.jpg",
|
||||
"动漫风景/11.jpg",
|
||||
"动漫风景/12.jpg",
|
||||
"动漫风景/13.jpg",
|
||||
"动漫风景/14.jpg",
|
||||
"动漫风景/15.jpg",
|
||||
"动漫风景/16.jpg"
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
#### 11. 站点统计功能
|
||||
|
||||
站点统计的数据来源于[百度统计](https://tongji.baidu.com/web/welcome/login),当你的网站被百度收录后就会在百度统计中出现数据，具体效果如下：
|
||||
|
||||
|
||||
|
||||
由于博客的统计页面数据不能直接从百度站点中调用，因此需要自行从百度站点中将相应数据填入博客站点统计页面的源代码文件中，个人建议每隔一个月手动更新一次数据。
|
||||
|
||||
打开`MyBlog\themes\matery\layout\census.ejs`文件，将百度统计中的数据填入源代码中，修改代码如下：
|
||||
|
||||
|
||||
|
||||
#### 11. 仿Windows个性化
|
||||
|
||||
仿Windows页面是采用[YLUI](https://ylui.yuri2.cn/)实现的，YLUI提供了社区版本供大家学习使用，具体效果如下：
|
||||
|
||||
|
||||
|
||||
大家可以查看YLUI官方的[开发文档](https://github.com/yuri2peter/ylui/tree/master/documents)进行开发，有不懂的可以加官方的QQ群：`191372634` 进行讨论。
|
||||
|
||||
#### 12. 博客动漫风格背景图
|
||||
|
||||
因为在上一个LuckyBlog版本发布的网站风格是偏向动漫风格的，如果大家喜欢动漫风格，只需要替换以下配置即可。
|
||||
|
||||
**博客每日轮播图：** 以下链接图片全部下载保存到`MyBlog\themes\matery\source\medias\banner`中，以0~7.jpg的文件名格式命名即可。
|
||||
|
||||
```html
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/0.jpg
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/1.jpg
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/2.jpg
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/3.jpg
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/4.jpg
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/5.jpg
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/6.jpg
|
||||
https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/7.jpg
|
||||
```
|
||||
|
||||
**无文章特色背景图：** 打开主题配置文件`MyBlog\themes\matery\_config.yml`，修改替换如下代码即可：
|
||||
|
||||
```bash
|
||||
# The post featured images that needs to be displayed when there is no image.
|
||||
# 无文章特色图片时需要显示的文章特色图片.
|
||||
featureImages:
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/01.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/02.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/04.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/06.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/07.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/10.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/11.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/12.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/09.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/14.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/15.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/16.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E4%BA%8C%E6%AC%A1%E5%85%83%E9%A3%8E/06.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/02.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/03.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/04.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/07.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/08.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/11.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/10.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/09.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/12.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/13.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/14.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/16.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/15.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/11.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/09.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/03.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/08.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/03.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/13.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/01.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/05.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/14.jpg
|
||||
- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/01.jpg
|
||||
```
|
||||
|
||||
|
||||
### 0x04 更多内容优化
|
||||
|
||||
以上简单介绍了 `LuckyBlog` 中一些要修改的个性化地方，其他更详细的优化参考其他关于`Matery`的文章。以下几篇文章都是基于`hexo-theme-matery`主题优化的教程，大家如果遇到问题，可以参考其中的方法。
|
||||
|
||||
- [个人博客搭建](http://luckyzmj.cn/posts/e3e08109.html)
|
||||
- [Hexo+Github博客搭建完全教程](https://sunhwee.com/posts/6e8839eb.html)
|
||||
- [hexo-theme-matery作者教程](https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md)
|
||||
- [Hexo+github搭建博客(超级详细版，精细入微)](https://yafine-blog.cn/posts/4ab2.html)
|
||||
- [hexo（matery）背景、滚动条优化+增加点击跳评论](https://blog.csdn.net/cungudafa/article/details/106278206)
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
title: Hexo之渲染绕过
|
||||
author: Luckey
|
||||
coverImg: /medias/banner/7.jpg
|
||||
top: false
|
||||
cover: false
|
||||
toc: true
|
||||
mathjax: false
|
||||
summary: 在Hexo部署时会默认渲染source下的所有html页面，但有时候想在Hexo博客上单独自定义html页面或README.md时，却不希望被Hexo渲染。
|
||||
tags:
|
||||
- Hexo
|
||||
- 渲染绕过
|
||||
categories:
|
||||
- 博客篇
|
||||
abbrlink: 17fd92ae
|
||||
reprintPolicy: cc_by
|
||||
date: 2020-04-28 00:00:00
|
||||
img:
|
||||
password:
|
||||
---
|
||||
|
||||
### 0x001 Hexo 渲染
|
||||
|
||||
  在Hexo部署时会默认渲染source下的所有html页面，但有时候想在Hexo博客上单独自定义html页面或README.md时，却不希望被Hexo渲染。因此对某个文件或者目录进行排除渲染是非常必要的。
|
||||
|
||||
### 0x002 方法一：font matter
|
||||
|
||||
`Hexo`新建网站页面，然后将你的代码直接写入 `index.md` 中
|
||||
|
||||
在 `Front matter` 中添加 `layout: false`，此方法适用于单一的纯`HTML`
|
||||
`CSS` 页面。
|
||||
|
||||
```bash
|
||||
---
|
||||
title: tools
|
||||
date: 2020-04-28 00:00:00
|
||||
type: "tools"
|
||||
layout: false
|
||||
---
|
||||
```
|
||||
|
||||
### 0x003 方法二：skip render
|
||||
|
||||
在博客根目录下的 `_config.yml`，找到 `skip_render`，大概在32行左右，写入你想要的跳过渲染的路径，注意缩进和空格。
|
||||
|
||||
|
||||
```bash
|
||||
# 指定目录跳过hexo渲染
|
||||
skip_render:
|
||||
- 'tools/*'
|
||||
- 'tools/**'
|
||||
```
|
||||
|
||||
>注释：`tools/*` 表示在目录 `source/fireworks` 下的文件全部跳过渲染，`tools/**` 表示在博客根目录 `source/tools/` 文件夹下的文件全部跳过渲染（例如页面的 js、css 在另一个文件夹中）。
|
||||
|
||||
### 0x004 案例：webstack 导航
|
||||
|
||||
`webstack`是一个纯静态的网址导航网站，内容均由`viggo`收集并整理。项目基于`bootstrap`前端框架开发。
|
||||
|
||||
|
||||
|
||||
- Github：[https://github.com/WebStackPage/WebStackPage.github.io](https://github.com/WebStackPage/WebStackPage.github.io)
|
||||
|
||||
在博客根目录 `source/`下新建`tools`，然后新建`index.html`,将`webstack`网页源码全选复制粘贴到里面。
|
||||
|
||||
- 本站的webstack源码：[view-source:http://luckyzmj.cn/tools/](view-source:http://luckyzmj.cn/tools/)
|
||||
|
||||
>注意：将源码里的部分信息以及跳转链接按照你真实个人博客的环境进行修改。
|
||||
|
||||
然后打开博客根目录下配置文件`_config.yml`，找到`skip_render`，做如下修改：
|
||||
|
||||
```bash
|
||||
skip_render:
|
||||
- 'tools/*'
|
||||
- 'tools/**'
|
||||
```
|
||||
|
||||
最后执行`hexo clean`和`hexo s -g `本地预览，检查无误后`hexo g -d`部署到服务器上即可。
|
||||
|
||||
|
||||
### 参考文章
|
||||
|
||||
- https://xiabor.com/2020/04/21/hexo3/#%E5%A6%82%E4%BD%95%E8%B7%B3%E8%BF%87hexo%E7%9A%84%E6%B8%B2%E6%9F%93
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
title: PicGo+GitHub 图床搭建
|
||||
author: Luckey
|
||||
coverImg: /medias/banner/6.jpg
|
||||
top: false
|
||||
cover: false
|
||||
toc: true
|
||||
mathjax: false
|
||||
summary: 使用 PicGo+jsdelivr+GitHub 打造最稳定可靠的免费图床。
|
||||
tags:
|
||||
- PicGo
|
||||
- GitHub图床
|
||||
categories:
|
||||
- 博客篇
|
||||
abbrlink: 7a46f93c
|
||||
reprintPolicy: cc_by
|
||||
date: 2020-03-15 00:00:00
|
||||
img:
|
||||
password:
|
||||
---
|
||||
|
||||
### 前言
|
||||
|
||||
用GitHub搭建图床，在很久之前我就有了解，但由于市面上有挺多免费的图床，比如我之前一直在用的 路过图床，所以一直懒得动手搭建GitHub图床。一直到前两天我在完善博客的相册时，发现 路过图床 免费版的有这么多限制，比如：每小时限制上传50张图片，每天限制上传100张图片，而且免费版用户的存储容量貌似不过300M，这才意识到有一个自己的GitHub图床是多么重要。
|
||||
|
||||
### 0x001 PicGO 介绍
|
||||
|
||||
PicGo是一款图片上传工具，目前支持 SM.MS图床、腾讯云COS、GitHub图床、七牛图床、Imgur图床、阿里云OSS、又拍云图床，未来将支持更多图床。
|
||||
|
||||
在支持的这些图床中，SM.MS和Imgur有免费版和收费版，免费版的肯定有很多的使用限制，比如每小时限制上传次数，限制用户的上传容量等等；腾讯云COS、阿里云、有拍云都是要收费使用的；七牛云貌似前期使用免费，后期又要收费才能使用，就剩下的GitHub才是免费且最可靠的。
|
||||
|
||||
PicGo源项目GitHub地址已给出，但是去GitHub下载速度非常慢，这里额外提供一个蓝奏云的快速下载地址。
|
||||
|
||||
- GitHub地址：https://github.com/Molunerfinn/PicGo
|
||||
- 蓝奏云地址：https://luckyzmj.lanzous.com/id3e0id
|
||||
|
||||
### 0x002 GitHub 图床
|
||||
|
||||
#### 1. 创建GitHub图床仓库
|
||||
|
||||
首先需要有一个登录GitHub的账号，没有的话去[GitHub官网](https://github.com/)注册一个
|
||||
|
||||
创建一个新的图床仓库，点击右上角的New repository
|
||||
|
||||
|
||||
|
||||
填写如下配置信息，然后Create创建仓库
|
||||
|
||||
|
||||
|
||||
#### 2. 获取GitHub token值
|
||||
|
||||
点击右上的头像，选择设置Setting
|
||||
|
||||
|
||||
|
||||
点击选择Developer settings
|
||||
|
||||
|
||||
|
||||
点击 Generate New token
|
||||
|
||||
|
||||
|
||||
填写如下配置信息，只要勾选repo选项即可，然后页面拉到底部点击Generate token 即可
|
||||
|
||||
|
||||
|
||||
此时会跳转到带有token的页面，将token值复制记录下来，之后用PicGo绑定GitHub图床时会利用到
|
||||
|
||||
|
||||
|
||||
### 0x003 PicGo 配置
|
||||
|
||||
#### 1. 绑定GitHub图床
|
||||
|
||||
首先下载安装好PicGo软件，然后在右列表找到GitHub图床配置
|
||||
|
||||
|
||||
|
||||
**1. 设定仓库名(必填)：**
|
||||
|
||||
按照“GitHub账户名/仓库名的格式填写”，比如我的是：Luckyzmj/imgbed
|
||||
|
||||
**2. 设定分支名(必填)：**
|
||||
|
||||
仓库分支名填写"master"或者"main"，视情况而定。因为GitHub 官方表示,从2020年10月1日起,在该平台上创建的所有新的源代码仓库将默认被命名为"main",而不是原先的"master"。
|
||||
|
||||
**3. 设定Token(必填)：**
|
||||
|
||||
将之前步骤的Token值复制粘贴到这里
|
||||
|
||||
**4. 指定存储路径：**
|
||||
|
||||
这个选项可以为空，如果想将图片上传到仓库的指定目录下，可以填写目录名加/，比如我的imgbed仓库下有个posts文件夹，需设置为 posts/
|
||||
|
||||
**5. 设定自定义域名：**
|
||||
|
||||
这里统一用jsdelivr的CDN加速域名，在上传图片后成功后，PicGo会将“自定义域名+上传的图片名”生成的访问链接
|
||||
|
||||
```
|
||||
|
||||
自定义域名格式：https://cdn.jsdelivr.net/gh/GitHub账户名/仓库名
|
||||
以我的格式为例：https://cdn.jsdelivr.net/gh/Luckyzmj/imgbed
|
||||
```
|
||||
|
||||
配置完全部信息后，点击 设为默认图床，最后点击确定即可
|
||||
|
||||
#### 2. 上传图片到图床
|
||||
|
||||
在上传区上传图片，可支持本地图片上传(可多选图片)、剪贴板上传、URL上传等三种方式。上传图片成功后，选择你想要生成的图片链接格式
|
||||
|
||||
|
||||
|
||||
在图片区，可以看到成功上传的图片，选择相应的图片进行操作即可
|
||||
|
||||
|
||||
|
||||
#### 3. PicGo 注意事项
|
||||
|
||||
如果配置完PicGo后却上传图片失败，可以参考以下方法：
|
||||
|
||||
1. 检查自定义域名是否正确
|
||||
2. 仓库名不要有空格
|
||||
3. 图片名字不要带有特殊符号，如：%、+、*、空格等
|
||||
4. 建议开启时间戳重命名，防止图片名字重复
|
||||
5. 上传图片间歇太短，需在PicGo设置中关闭Server选项
|
||||
6. PicGo应用不稳定因素，需重启应用
|
||||
|
||||
### 参考文章
|
||||
|
||||
- https://blog.csdn.net/sunhwee/article/details/100109956
|
||||
@@ -0,0 +1,333 @@
|
||||
---
|
||||
title: 阿里云服务器部署Hexo博客
|
||||
author: Luckey
|
||||
coverImg: /medias/banner/7.jpg
|
||||
top: false
|
||||
cover: false
|
||||
toc: true
|
||||
mathjax: false
|
||||
summary: 相信大部分人使用Hexo搭建个人博客都会部署到一些免费的代码托管平台上，但这些免费的平台总是差强人意，今天记录下如何在自己的云服务器上搭建Hexo博客。
|
||||
tags:
|
||||
- Hexo
|
||||
- 阿里云
|
||||
- 博客
|
||||
categories:
|
||||
- 博客篇
|
||||
abbrlink: 19d2a4e6
|
||||
reprintPolicy: cc_by
|
||||
date: 2020-02-27 00:00:00
|
||||
img:
|
||||
password:
|
||||
---
|
||||
|
||||
## 前言
|
||||
|
||||
---
|
||||
|
||||
  相信大部分人使用Hexo搭建个人博客都会部署到一些免费的代码托管平台上，但这些免费的平台总是差强人意，比如国外的GitHub平台虽然完全免费，但在国内访问加载速度非常慢，又或者是国内的码云平台免费版有许多功能被阉割掉了，比如不能自定义域名，不能每次自动刷新提交的代码，需要到码云平台上手动刷新，如此一来非常繁琐。
|
||||
|
||||
  为了有效解决上诉的一些问题，有条件的话，不妨在自己的云服务器上搭建Hexo博客。
|
||||
|
||||
## 效果演示
|
||||
|
||||
---
|
||||
|
||||
这是Hexo博客部署到GitHub上的网站测速效果
|
||||
|
||||
|
||||
|
||||
这是Hexo博客部署到阿里云服务器后的网站测速效果
|
||||
|
||||
|
||||
|
||||
## 环境准备
|
||||
|
||||
---
|
||||
|
||||
- 本地环境：Windows 10
|
||||
- 云服务器环境：阿里云ECS（CentOS7.x）
|
||||
|
||||
## 开始部署
|
||||
|
||||
---
|
||||
|
||||
### 本地环境搭建
|
||||
|
||||
**1.安装Git**
|
||||
|
||||
到git官网上下载.exe文件,Download git,安装选项还是全部默认，最后一步添加路径时选择`Use Git from the Windows Command Prompt`。
|
||||
- Git[下载地址](https://git-scm.com/download)
|
||||
- Git[教程](https://www.liaoxuefeng.com/wiki/896043488029600)
|
||||
|
||||
|
||||
**2.安装Nodejs**
|
||||
|
||||
到[Node.js官网](http://nodejs.cn/download/)下载`.exe`文件，安装选项全部默认。安装好之后，按`Win+R`打开cmd命令提示符，输入`node -v`和`npm -v`，若出现版本号，则说明安装成功。
|
||||
|
||||
使用npm阿里的国内镜像进行加速下载
|
||||
|
||||
```bash
|
||||
npm config set registry https://registry.npm.taobao.org
|
||||
```
|
||||
|
||||
**4.安装Hexo**
|
||||
|
||||
先创建一个文件夹`MyBlog`，用来存放自己的博客文件，然后`cd`到这个文件夹下（或者在这个文件夹下直接右键`git bash here`打开）。
|
||||
|
||||
定位到该目录下，输入`npm install -g hexo-cli`安装`Hexo`。可能会有几个报错，不用理会。
|
||||
|
||||
```bash
|
||||
npm install -g hexo-cli
|
||||
```
|
||||
|
||||
安装完后输入`hexo -v`,若出现版本号则，说明安装成功。
|
||||
|
||||
|
||||
接下来初始化一下`hexo`,即初始化我们的博客，输入`hexo init`初始化文件夹
|
||||
|
||||
```bash
|
||||
hexo init MyBlog
|
||||
```
|
||||
|
||||
新建完成后，指定文件夹`MyBlog`目录下有：
|
||||
|
||||
- `node_modules`: 依赖包
|
||||
- `public`：存放生成的页面
|
||||
- `scaffolds`：生成文章的一些模板
|
||||
- `source`：用来存放你的文章
|
||||
- `themes`：主题**
|
||||
- `_config.yml`: 博客的配置文件**
|
||||
|
||||
输入`hexo g`生成静态网页，然后输入`hexo s`打开本地服务器预览
|
||||
|
||||
```bash
|
||||
hexo g
|
||||
hexo s
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 生成ssh公钥
|
||||
|
||||
在本地桌面点击右键`Git Bash Here`打开Git终端，执行如下命令`,一路回车
|
||||
|
||||
```bash
|
||||
ssh-keygen -t rsa
|
||||
```
|
||||
|
||||
这个时候它会告诉你已经生成了`.ssh`的文件夹。在`git bash`中输入
|
||||
|
||||
```bash
|
||||
cat ~/.ssh/id_rsa.pub
|
||||
```
|
||||
|
||||
输出的内容就是公钥信息了
|
||||
|
||||
### 阿里云服务器环境搭建
|
||||
|
||||
安装`Git`
|
||||
|
||||
```bash
|
||||
yum install git
|
||||
```
|
||||
|
||||
创建`Git`账户
|
||||
|
||||
```bash
|
||||
adduser git
|
||||
```
|
||||
|
||||
添加账户权限
|
||||
|
||||
```bash
|
||||
chmod 740 /etc/sudoers
|
||||
vim /etc/sudoers
|
||||
```
|
||||
|
||||
找到
|
||||
|
||||
```bash
|
||||
## Allow root to run any commands anywhere
|
||||
root ALL=(ALL) ALL
|
||||
```
|
||||
|
||||
添加以下内容
|
||||
|
||||
```bash
|
||||
git ALL=(ALL) ALL
|
||||
```
|
||||
|
||||
保存退出并改回权限
|
||||
|
||||
```bash
|
||||
chmod 400 /etc/sudoers
|
||||
```
|
||||
|
||||
设置`git`账户密码
|
||||
|
||||
```bash
|
||||
sudo passwd git
|
||||
```
|
||||
|
||||
切换至`git`用户，创建 `~/.ssh` 文件夹和 `~/.ssh/authorized_keys` 文件，并赋予相应的权限
|
||||
|
||||
```bash
|
||||
su git
|
||||
mkdir ~/.ssh
|
||||
vim ~/.ssh/authorized_keys
|
||||
# 然后将win10中生成的id_rsa.pub文件中的公钥复制到authorized_keys
|
||||
chmod 600 /home/git/.ssh/authorized_keys
|
||||
chmod 700 /home/git/.ssh
|
||||
```
|
||||
|
||||
在本地`Git`终端中测试是否能免密登录`git`，其中`SERVER`为填写自己的云主机`IP`，执行输入`yes`后不用密码就说明好了
|
||||
|
||||
```bash
|
||||
ssh -v git@SERVER
|
||||
```
|
||||
|
||||
创建目录
|
||||
|
||||
```bash
|
||||
#repo作为为Git仓库目录
|
||||
mkdir /var/repo
|
||||
chown -R git:git /var/repo
|
||||
chmod -R 755 /var/repo
|
||||
#hexo作为网站根目录
|
||||
mkdir /var/www/hexo
|
||||
chown -R git:git /var/www/hexo
|
||||
chmod -R 755 /var/www/hexo
|
||||
```
|
||||
|
||||
然后创建一个裸的 `Git` 仓库
|
||||
|
||||
```bash
|
||||
cd var/repo
|
||||
git init --bare hexoBlog.git
|
||||
```
|
||||
|
||||
|
||||
创建一个新的 `Git` 钩子，用于自动部署 在 `/var/repo/hexoBlog.git` 下，有一个自动生成的 `hooks` 文件夹。我们需要在里边新建一个新的钩子文件 `post-receive`。
|
||||
|
||||
```bash
|
||||
vim /var/repo/hexoBlog.git/hooks/post-receive
|
||||
```
|
||||
|
||||
|
||||
按 `i` 键进入文件的编辑模式，在该文件中添加两行代码（将下边的代码粘贴进去)，指定 `Git` 的工作树（源代码）和 `Git` 目录（配置文件等）
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
git --work-tree=/var/www/hexo --git-dir=/var/repo/hexoBlog.git checkout -f
|
||||
```
|
||||
|
||||
然后，按 `Esc` 键退出编辑模式，输入”`:wq`” 保存退出。
|
||||
|
||||
修改文件权限，使得其可执行
|
||||
|
||||
```bash
|
||||
chown -R git:git /var/repo/hexoBlog.git/hooks/post-receive
|
||||
chmod +x /var/repo/hexoBlog.git/hooks/post-receive
|
||||
```
|
||||
|
||||
到此为止 `Git` 仓库就搭建完成了。
|
||||
|
||||
### 阿里云服务器配置Nginx
|
||||
|
||||
用宝塔面板来一键部署Nginx `Linux`面板6.0安装命令(暂时仅兼容`Centos7.x`，其它系统版本请安装5.9稳定版)：
|
||||
|
||||
```bash
|
||||
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh
|
||||
```
|
||||
|
||||
|
||||
`Linux`面板6.0升级专业版
|
||||
|
||||
```bash
|
||||
curl http://download.bt.cn/install/update6.sh|bash
|
||||
```
|
||||
|
||||
安装完成后会显示面板后台地址·账号·密码。打开面板后台地址登陆面板，选择`Nginx`的部署方案，静静等待部署。
|
||||
|
||||
部署完成，点击网站-添加站点-输入域名(没有域名的输入自己的`IP`地址)-底部的`PHP`版本选择”纯静态”-提交。
|
||||
|
||||
网站创建完成后点击设置-配置文件
|
||||
|
||||
```bash
|
||||
server
|
||||
{
|
||||
listen 80;
|
||||
# server_name 填写自己的域名
|
||||
server_name luckyzmj.cn blog.luckyzmj.cn;
|
||||
index index.php index.html index.htm default.php default.htm default.html;
|
||||
# 这里root填写自己的网站根目录，修改为/var/www/hexo
|
||||
root /var/www/hexo;
|
||||
```
|
||||
|
||||
-保存
|
||||
|
||||
点击设置-网站目录，修改为`/var/www/hexo` ，保存
|
||||
|
||||
重启宝塔面板服务
|
||||
|
||||
```bash
|
||||
service bt restart
|
||||
```
|
||||
|
||||
### 本地Hexo部署到阿里云服务器
|
||||
|
||||
进入到本地`Hexo`博客的文件夹`MyBlog`,右键点击`Git Bash Here`，输入命令
|
||||
|
||||
```bash
|
||||
#定义邮箱(更换为你的邮箱地址就行)
|
||||
git config --global user.email "you@example.com"
|
||||
#定义名称(更换自定义一个名称就行)
|
||||
git config --global user.name "Your Name"
|
||||
```
|
||||
|
||||
配置`_config.yml`,完成自动化部署
|
||||
|
||||
打开本地`Hexo`博客的文件夹`MyBlog`文件夹下的`_config.yml`, 找到`deploy`
|
||||
|
||||
```bash
|
||||
deploy:
|
||||
type: git
|
||||
#server改为你的服务IP地址或解析后的域名
|
||||
#例如我改为repo: git@luckyzmj.cn:/var/repo/blog.git
|
||||
repo: git@server:/var/repo/blog.git
|
||||
branch: master
|
||||
```
|
||||
|
||||
保存后，即可测试部署
|
||||
|
||||
再进入到本地`Hexo`博客的文件夹`MyBlog`,右键点击`Git Bash Here`，输入命令
|
||||
|
||||
```bash
|
||||
hexo clean
|
||||
hexo g -d
|
||||
```
|
||||
|
||||
不报错说明完成，打开浏览器输入你的域名或`ip`地址就可以看到你部署的`Hexo`博客了。
|
||||
|
||||
到此为止，我们已经成功部完成，并且访问自己的服务器端比访问Github快多了。
|
||||
|
||||
>### 小贴士
|
||||
|
||||
在部署过程中，执行 hexo d发现部署老是出错，什么权限不允许之类的，这里我们需要检查我们在上述的`git`操作部署是否使用了`git`用户操作，若是没有，需要给相应的目录更改用户组 使用
|
||||
|
||||
```bash
|
||||
chown -R git:git /var/repo/
|
||||
```
|
||||
|
||||
这条命令递归的将`repo`目录及其子目录用户组设置为`git`。 同时使用
|
||||
|
||||
```bash
|
||||
chown -R git:git /var/www/hexo
|
||||
```
|
||||
这样即可解决此类问题。
|
||||
|
||||
还有一个问题就是绑定域名后不能访问。原因是在国内任何域名只要绑定到国内的服务器主机上都必须去工信部和公安部备案完后才能正常使用。如果是港澳台的服务器或者是国外的服务器则可以不需要备案。
|
||||
|
||||
## 参考文章
|
||||
|
||||
- https://blog.csdn.net/weixin_33907511/article/details/91398208?utm_source=distribute.pc_relevant.none-task
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: Hello World
|
||||
abbrlink: 4a17b156
|
||||
---
|
||||
Welcome to [Hexo](https://hexo.io/)! This is your very first post. Check [documentation](https://hexo.io/docs/) for more info. If you get any problems when using Hexo, you can find the answer in [troubleshooting](https://hexo.io/docs/troubleshooting.html) or you can ask me on [GitHub](https://github.com/hexojs/hexo/issues).
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Create a new post
|
||||
|
||||
``` bash
|
||||
$ hexo new "My New Post"
|
||||
```
|
||||
|
||||
More info: [Writing](https://hexo.io/docs/writing.html)
|
||||
|
||||
### Run server
|
||||
|
||||
``` bash
|
||||
$ hexo server
|
||||
```
|
||||
|
||||
More info: [Server](https://hexo.io/docs/server.html)
|
||||
|
||||
### Generate static files
|
||||
|
||||
``` bash
|
||||
$ hexo generate
|
||||
```
|
||||
|
||||
More info: [Generating](https://hexo.io/docs/generating.html)
|
||||
|
||||
### Deploy to remote sites
|
||||
|
||||
``` bash
|
||||
$ hexo deploy
|
||||
```
|
||||
|
||||
More info: [Deployment](https://hexo.io/docs/one-command-deployment.html)
|
||||
@@ -0,0 +1,992 @@
|
||||
---
|
||||
title: 文字背景粒子特效
|
||||
author: Luckey
|
||||
coverImg: /medias/banner/7.jpg
|
||||
top: false
|
||||
cover: false
|
||||
toc: true
|
||||
mathjax: false
|
||||
summary: '一款jQuery+CSS3的文字背景粒子动画特效，一共6种粒子效果，每种文字背景的粒子效果都不同，有漂浮的有坠落的等等。 '
|
||||
tags:
|
||||
- jQuery+CSS3
|
||||
- 粒子特效
|
||||
categories:
|
||||
- 前端篇
|
||||
abbrlink: 4b3510a4
|
||||
reprintPolicy: cc_by
|
||||
date: 2020-03-27 00:00:00
|
||||
img:
|
||||
password:
|
||||
---
|
||||
|
||||
### 前言
|
||||
|
||||
一款jQuery+CSS3的文字背景粒子动画特效，一共6种粒子效果，每种文字背景的粒子效果都不同，有漂浮的有坠落的等等。
|
||||
|
||||
### 0x001 特效演示
|
||||
|
||||
---
|
||||
|
||||
<div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;" ><span class="particletext fire" style="font-size:48px;position: relative;">This is fires</span></div>
|
||||
|
||||
|
||||
<div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;" > <span class="particletext lines" style="font-size:48px; position: relative;">This is lines</span>
|
||||
</div>
|
||||
|
||||
<div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;" ><span class="particletext hearts" style="font-size:48px; position: relative;">This is hearts</span></div>
|
||||
|
||||
<div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;" > <span class="particletext bubbles" style="font-size:48px; position: relative;">This is bubbles</span>
|
||||
</div>
|
||||
|
||||
<div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;" > <span class="particletext confetti" style="font-size:48px; position: relative;">This is confetti</span>
|
||||
</div>
|
||||
|
||||
<div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;" > <span class="particletext sunbeams" style="font-size:48px; position: relative;">This is sunbeams</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
.particletext {
|
||||
|
||||
}
|
||||
|
||||
.fire > .particle {
|
||||
position: absolute;
|
||||
background-color: rgba(255, 193, 7, 0.5);
|
||||
border-radius: 40px;
|
||||
border-top-right-radius: 0px;
|
||||
-webkit-animation: fires 0.8s linear infinite;
|
||||
animation: fires 0.8s linear infinite;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
/*css keyframes 动画*/
|
||||
@-webkit-keyframes fires {
|
||||
0% {
|
||||
-webkit-transform: rotate(-70deg) translateY(0%);
|
||||
transform: rotate(-70deg) translateY(0%);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: rotate(-20deg) translateY(-5%);
|
||||
transform: rotate(-20deg) translateY(-5%);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(-70deg) translateY(-10%);
|
||||
transform: rotate(-70deg) translateY(-10%);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(-20deg) translateY(-20%);
|
||||
transform: rotate(-20deg) translateY(-20%);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(-70deg) translateY(-40%);
|
||||
transform: rotate(-70deg) translateY(-40%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fires {
|
||||
0% {
|
||||
-webkit-transform: rotate(-70deg) translateY(0%);
|
||||
transform: rotate(-70deg) translateY(0%);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: rotate(-20deg) translateY(-5%);
|
||||
transform: rotate(-20deg) translateY(-5%);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(-70deg) translateY(-10%);
|
||||
transform: rotate(-70deg) translateY(-10%);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(-20deg) translateY(-20%);
|
||||
transform: rotate(-20deg) translateY(-20%);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(-70deg) translateY(-40%);
|
||||
transform: rotate(-70deg) translateY(-40%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||||
<script>
|
||||
function fire() {
|
||||
$.each($(".particletext.fire"), function(){
|
||||
var firecount = ($(this).width()/50)*20;
|
||||
for(var i = 0; i <= firecount; i++) {
|
||||
var size = $.rnd(8,12);
|
||||
$(this).append('<span class="particle" style="top:' + $.rnd(40,70) + '%; left:' + $.rnd(-10,100) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0,20)/10) + 's;"></span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.lines > .particle {
|
||||
position: absolute;
|
||||
background-color: rgba(244, 67, 54, 0.5);
|
||||
-webkit-animation: lines 3s linear infinite;
|
||||
animation: lines 3s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes lines {
|
||||
0%, 50%, 100% {
|
||||
-webkit-transform: translateY(0%);
|
||||
transform: translateY(0%);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@keyframes lines {
|
||||
0%, 50%, 100% {
|
||||
-webkit-transform: translateY(0%);
|
||||
transform: translateY(0%);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function lines() {
|
||||
$.each($(".particletext.lines"), function(){
|
||||
var linecount = ($(this).width()/50)*10;
|
||||
for(var i = 0; i <= linecount; i++) {
|
||||
$(this).append('<span class="particle" style="top:' + $.rnd(-30,30) + '%; left:' + $.rnd(-10,110) + '%;width:' + $.rnd(1,3) + 'px; height:' + $.rnd(20,80) + '%;animation-delay: -' + ($.rnd(0,30)/10) + 's;"></span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.hearts > .particle {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
background-color: #cc2a5d;
|
||||
-webkit-animation: hearts 3s ease-in infinite;
|
||||
animation: hearts 3s ease-in infinite;
|
||||
}
|
||||
.hearts > .particle:before,.hearts > .particle:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
border-radius: 100px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #cc2a5d;
|
||||
}
|
||||
.hearts > .particle:before {
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.hearts > .particle:after {
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@-webkit-keyframes hearts {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, 0%) rotate(45deg);
|
||||
transform: translate(0, 0%) rotate(45deg);
|
||||
}
|
||||
20% {
|
||||
opacity: 0.8;
|
||||
-webkit-transform: translate(0, -20%) rotate(45deg);
|
||||
transform: translate(0, -20%) rotate(45deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, -1000%) rotate(45deg);
|
||||
transform: translate(0, -1000%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
@keyframes hearts {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, 0%) rotate(45deg);
|
||||
transform: translate(0, 0%) rotate(45deg);
|
||||
}
|
||||
20% {
|
||||
opacity: 0.8;
|
||||
-webkit-transform: translate(0, -20%) rotate(45deg);
|
||||
transform: translate(0, -20%) rotate(45deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, -1000%) rotate(45deg);
|
||||
transform: translate(0, -1000%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function hearts() {
|
||||
$.each($(".particletext.hearts"), function(){
|
||||
var heartcount = ($(this).width()/50)*5;
|
||||
for(var i = 0; i <= heartcount; i++) {
|
||||
var size = ($.rnd(60,120)/10);
|
||||
$(this).append('<span class="particle" style="top:' + $.rnd(20,80) + '%; left:' + $.rnd(0,95) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0,30)/10) + 's;"></span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bubbles > .particle {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
background-color: rgba(33, 150, 243, 0.5);
|
||||
-webkit-animation: bubbles 3s ease-in infinite;
|
||||
animation: bubbles 3s ease-in infinite;
|
||||
border-radius: 100%;
|
||||
}
|
||||
@-webkit-keyframes bubbles {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0, -20%);
|
||||
transform: translate(0, -20%);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, -1000%);
|
||||
transform: translate(0, -1000%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbles {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0, -20%);
|
||||
transform: translate(0, -20%);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, -1000%);
|
||||
transform: translate(0, -1000%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function bubbles() {
|
||||
$.each($(".particletext.bubbles"), function(){
|
||||
var bubblecount = ($(this).width()/50)*10;
|
||||
for(var i = 0; i <= bubblecount; i++) {
|
||||
var size = ($.rnd(40,80)/10);
|
||||
$(this).append('<span class="particle" style="top:' + $.rnd(20,80) + '%; left:' + $.rnd(0,95) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0,30)/10) + 's;"></span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.confetti > .particle {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
-webkit-animation: confetti 3s ease-in infinite;
|
||||
animation: confetti 3s ease-in infinite;
|
||||
}
|
||||
.confetti > .particle.c1 {
|
||||
background-color: rgba(76, 175, 80, 0.5);
|
||||
}
|
||||
.confetti > .particle.c2 {
|
||||
background-color: rgba(156, 39, 176, 0.5);
|
||||
}
|
||||
@-webkit-keyframes confetti {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(0%) rotate(0deg);
|
||||
transform: translateY(0%) rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
35% {
|
||||
-webkit-transform: translateY(-800%) rotate(270deg);
|
||||
transform: translateY(-800%) rotate(270deg);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(2000%) rotate(1440deg);
|
||||
transform: translateY(2000%) rotate(1440deg);
|
||||
}
|
||||
}
|
||||
@keyframes confetti {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(0%) rotate(0deg);
|
||||
transform: translateY(0%) rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
35% {
|
||||
-webkit-transform: translateY(-800%) rotate(270deg);
|
||||
transform: translateY(-800%) rotate(270deg);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(2000%) rotate(1440deg);
|
||||
transform: translateY(2000%) rotate(1440deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function confetti() {
|
||||
$.each($(".particletext.confetti"), function(){
|
||||
var confetticount = ($(this).width()/50)*10;
|
||||
for(var i = 0; i <= confetticount; i++) {
|
||||
$(this).append('<span class="particle c' + $.rnd(1,2) + '" style="top:' + $.rnd(10,50) + '%; left:' + $.rnd(0,100) + '%;width:' + $.rnd(6,8) + 'px; height:' + $.rnd(3,4) + 'px;animation-delay: ' + ($.rnd(0,30)/10) + 's;"></span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.sunbeams > .particle {
|
||||
position: absolute;
|
||||
background-color: rgba(253, 216, 53, 0.5);
|
||||
-webkit-animation: sunbeams 3s linear infinite;
|
||||
animation: sunbeams 3s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes sunbeams {
|
||||
0% {
|
||||
-webkit-transform: translateY(40%) rotate(0deg);
|
||||
transform: translateY(40%) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translateY(-40%) rotate(180deg);
|
||||
transform: translateY(-40%) rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(40%) rotate(360deg);
|
||||
transform: translateY(40%) rotate(360deg);
|
||||
}
|
||||
0%,14%,17%,43%,53%,71%,80%,94%,100% {
|
||||
opacity: 0;
|
||||
}
|
||||
6%,15%,24%,28%,48%,55%,78%,82%,99% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes sunbeams {
|
||||
0% {
|
||||
-webkit-transform: translateY(40%) rotate(0deg);
|
||||
transform: translateY(40%) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translateY(-40%) rotate(180deg);
|
||||
transform: translateY(-40%) rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(40%) rotate(360deg);
|
||||
transform: translateY(40%) rotate(360deg);
|
||||
}
|
||||
0%,14%,17%,43%,53%,71%,80%,94%,100% {
|
||||
opacity: 0;
|
||||
}
|
||||
6%,15%,24%,28%,48%,55%,78%,82%,99% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function sunbeams() {
|
||||
$.each($(".particletext.sunbeams"), function(){
|
||||
var linecount = ($(this).width()/50)*10;
|
||||
for(var i = 0; i <= linecount; i++) {
|
||||
$(this).append('<span class="particle" style="top:' + $.rnd(-50,00) + '%; left:' + $.rnd(0,100) + '%;width:' + $.rnd(1,3) + 'px; height:' + $.rnd(80,160) + '%;animation-delay: -' + ($.rnd(0,30)/10) + 's;"></span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function initparticles() {
|
||||
bubbles();
|
||||
hearts();
|
||||
lines();
|
||||
confetti();
|
||||
fire();
|
||||
sunbeams();
|
||||
}
|
||||
jQuery.rnd = function(m,n) {
|
||||
m = parseInt(m);
|
||||
n = parseInt(n);
|
||||
return Math.floor( Math.random() * (n - m + 1) ) + m;
|
||||
}
|
||||
initparticles();
|
||||
</script>
|
||||
|
||||
### 0x002 Fires 特效
|
||||
|
||||
#### 1. JS 代码
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
function fire() {
|
||||
$.each($(".particletext.fire"), function(){
|
||||
var firecount = ($(this).width()/50)*20;
|
||||
for(var i = 0; i <= firecount; i++) {
|
||||
var size = $.rnd(8,12);
|
||||
$(this).append('<span class="particle" style="top:' + $.rnd(40,70) + '%; left:' + $.rnd(-10,100) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0,20)/10) + 's;"></span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
jQuery.rnd = function(m,n) {
|
||||
m = parseInt(m);
|
||||
n = parseInt(n);
|
||||
return Math.floor( Math.random() * (n - m + 1) ) + m;
|
||||
}
|
||||
fire();
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 2. CSS 代码
|
||||
|
||||
```css
|
||||
<style>
|
||||
.fire > .particle {
|
||||
position: absolute;
|
||||
background-color: rgba(255, 193, 7, 0.5);
|
||||
border-radius: 40px;
|
||||
border-top-right-radius: 0px;
|
||||
-webkit-animation: fires 0.8s linear infinite;
|
||||
animation: fires 0.8s linear infinite;
|
||||
-webkit-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fires {
|
||||
0% {
|
||||
-webkit-transform: rotate(-70deg) translateY(0%);
|
||||
transform: rotate(-70deg) translateY(0%);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: rotate(-20deg) translateY(-5%);
|
||||
transform: rotate(-20deg) translateY(-5%);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(-70deg) translateY(-10%);
|
||||
transform: rotate(-70deg) translateY(-10%);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(-20deg) translateY(-20%);
|
||||
transform: rotate(-20deg) translateY(-20%);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(-70deg) translateY(-40%);
|
||||
transform: rotate(-70deg) translateY(-40%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes fires {
|
||||
0% {
|
||||
-webkit-transform: rotate(-70deg) translateY(0%);
|
||||
transform: rotate(-70deg) translateY(0%);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: rotate(-20deg) translateY(-5%);
|
||||
transform: rotate(-20deg) translateY(-5%);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(-70deg) translateY(-10%);
|
||||
transform: rotate(-70deg) translateY(-10%);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(-20deg) translateY(-20%);
|
||||
transform: rotate(-20deg) translateY(-20%);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(-70deg) translateY(-40%);
|
||||
transform: rotate(-70deg) translateY(-40%);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### 3. HTML 代码
|
||||
|
||||
```html
|
||||
<div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;" >
|
||||
<span class="particletext fire" style="font-size:48px;position: relative;">This is fires</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 0x003 Lines 特效
|
||||
|
||||
#### 1. JS 代码
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
function lines() {
|
||||
$.each($(".particletext.lines"), function(){
|
||||
var linecount = ($(this).width()/50)*10;
|
||||
for(var i = 0; i <= linecount; i++) {
|
||||
$(this).append('<span class="particle" style="top:' + $.rnd(-30,30) + '%; left:' + $.rnd(-10,110) + '%;width:' + $.rnd(1,3) + 'px; height:' + $.rnd(20,80) + '%;animation-delay: -' + ($.rnd(0,30)/10) + 's;"></span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
jQuery.rnd = function(m,n) {
|
||||
m = parseInt(m);
|
||||
n = parseInt(n);
|
||||
return Math.floor( Math.random() * (n - m + 1) ) + m;
|
||||
}
|
||||
lines();
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 2. CSS 代码
|
||||
|
||||
```css
|
||||
<style>
|
||||
.lines > .particle {
|
||||
position: absolute;
|
||||
background-color: rgba(244, 67, 54, 0.5);
|
||||
-webkit-animation: lines 3s linear infinite;
|
||||
animation: lines 3s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes lines {
|
||||
0%, 50%, 100% {
|
||||
-webkit-transform: translateY(0%);
|
||||
transform: translateY(0%);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
@keyframes lines {
|
||||
0%, 50%, 100% {
|
||||
-webkit-transform: translateY(0%);
|
||||
transform: translateY(0%);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translateY(-100%);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### 3. HTML 代码
|
||||
|
||||
```html
|
||||
<div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;" >
|
||||
<span class="particletext lines" style="font-size:48px; position: relative;">This is lines</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 0x004 Hearts 特效
|
||||
|
||||
#### 1. JS 代码
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
function hearts() {
|
||||
$.each($(".particletext.hearts"), function(){
|
||||
var heartcount = ($(this).width()/50)*5;
|
||||
for(var i = 0; i <= heartcount; i++) {
|
||||
var size = ($.rnd(60,120)/10);
|
||||
$(this).append('<span class="particle" style="top:' + $.rnd(20,80) + '%; left:' + $.rnd(0,95) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0,30)/10) + 's;"></span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
jQuery.rnd = function(m,n) {
|
||||
m = parseInt(m);
|
||||
n = parseInt(n);
|
||||
return Math.floor( Math.random() * (n - m + 1) ) + m;
|
||||
}
|
||||
hearts();
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 2. CSS 代码
|
||||
|
||||
```css
|
||||
<style>
|
||||
.hearts > .particle {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
background-color: #cc2a5d;
|
||||
-webkit-animation: hearts 3s ease-in infinite;
|
||||
animation: hearts 3s ease-in infinite;
|
||||
}
|
||||
.hearts > .particle:before, .hearts > .particle:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
border-radius: 100px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #cc2a5d;
|
||||
}
|
||||
.hearts > .particle:before {
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.hearts > .particle:after {
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
@-webkit-keyframes hearts {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, 0%) rotate(45deg);
|
||||
transform: translate(0, 0%) rotate(45deg);
|
||||
}
|
||||
20% {
|
||||
opacity: 0.8;
|
||||
-webkit-transform: translate(0, -20%) rotate(45deg);
|
||||
transform: translate(0, -20%) rotate(45deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, -1000%) rotate(45deg);
|
||||
transform: translate(0, -1000%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
@keyframes hearts {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, 0%) rotate(45deg);
|
||||
transform: translate(0, 0%) rotate(45deg);
|
||||
}
|
||||
20% {
|
||||
opacity: 0.8;
|
||||
-webkit-transform: translate(0, -20%) rotate(45deg);
|
||||
transform: translate(0, -20%) rotate(45deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, -1000%) rotate(45deg);
|
||||
transform: translate(0, -1000%) rotate(45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### 3. HTML 代码
|
||||
|
||||
```html
|
||||
<div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;" >
|
||||
<span class="particletext hearts" style="font-size:48px; position: relative;">This is hearts</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 0x005 Bubbles 特效
|
||||
|
||||
#### 1. JS 代码
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
function bubbles() {
|
||||
$.each($(".particletext.bubbles"), function(){
|
||||
var bubblecount = ($(this).width()/50)*10;
|
||||
for(var i = 0; i <= bubblecount; i++) {
|
||||
var size = ($.rnd(40,80)/10);
|
||||
$(this).append('<span class="particle" style="top:' + $.rnd(20,80) + '%; left:' + $.rnd(0,95) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0,30)/10) + 's;"></span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
jQuery.rnd = function(m,n) {
|
||||
m = parseInt(m);
|
||||
n = parseInt(n);
|
||||
return Math.floor( Math.random() * (n - m + 1) ) + m;
|
||||
}
|
||||
bubbles();
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 2. CSS 代码
|
||||
|
||||
```css
|
||||
<style>
|
||||
<style>
|
||||
.bubbles > .particle {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
background-color: rgba(33, 150, 243, 0.5);
|
||||
-webkit-animation: bubbles 3s ease-in infinite;
|
||||
animation: bubbles 3s ease-in infinite;
|
||||
border-radius: 100%;
|
||||
}
|
||||
@-webkit-keyframes bubbles {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0, -20%);
|
||||
transform: translate(0, -20%);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, -1000%);
|
||||
transform: translate(0, -1000%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubbles {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
20% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate(0, -20%);
|
||||
transform: translate(0, -20%);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate(0, -1000%);
|
||||
transform: translate(0, -1000%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### 3. HTML 代码
|
||||
|
||||
```html
|
||||
<div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;" >
|
||||
<span class="particletext bubbles" style="font-size:48px; position: relative;">This is bubbles</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 0x006 Confetti 特效
|
||||
|
||||
#### 1. JS 代码
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
function confetti() {
|
||||
$.each($(".particletext.confetti"), function(){
|
||||
var confetticount = ($(this).width()/50)*10;
|
||||
for(var i = 0; i <= confetticount; i++) {
|
||||
$(this).append('<span class="particle c' + $.rnd(1,2) + '" style="top:' + $.rnd(10,50) + '%; left:' + $.rnd(0,100) + '%;width:' + $.rnd(6,8) + 'px; height:' + $.rnd(3,4) + 'px;animation-delay: ' + ($.rnd(0,30)/10) + 's;"></span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
jQuery.rnd = function(m,n) {
|
||||
m = parseInt(m);
|
||||
n = parseInt(n);
|
||||
return Math.floor( Math.random() * (n - m + 1) ) + m;
|
||||
}
|
||||
confetti();
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 2. CSS 代码
|
||||
|
||||
```css
|
||||
<style>
|
||||
.confetti > .particle {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
-webkit-animation: confetti 3s ease-in infinite;
|
||||
animation: confetti 3s ease-in infinite;
|
||||
}
|
||||
.confetti > .particle.c1 {
|
||||
background-color: rgba(76, 175, 80, 0.5);
|
||||
}
|
||||
.confetti > .particle.c2 {
|
||||
background-color: rgba(156, 39, 176, 0.5);
|
||||
}
|
||||
@-webkit-keyframes confetti {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(0%) rotate(0deg);
|
||||
transform: translateY(0%) rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
35% {
|
||||
-webkit-transform: translateY(-800%) rotate(270deg);
|
||||
transform: translateY(-800%) rotate(270deg);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(2000%) rotate(1440deg);
|
||||
transform: translateY(2000%) rotate(1440deg);
|
||||
}
|
||||
}
|
||||
@keyframes confetti {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(0%) rotate(0deg);
|
||||
transform: translateY(0%) rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
35% {
|
||||
-webkit-transform: translateY(-800%) rotate(270deg);
|
||||
transform: translateY(-800%) rotate(270deg);
|
||||
}
|
||||
80% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(2000%) rotate(1440deg);
|
||||
transform: translateY(2000%) rotate(1440deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### 3. HTML 代码
|
||||
|
||||
```html
|
||||
<div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;" >
|
||||
<span class="particletext confetti" style="font-size:48px; position: relative;">This is confetti</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 0x007 Sunbeams 特效
|
||||
|
||||
#### 1. JS 代码
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
function sunbeams() {
|
||||
$.each($(".particletext.sunbeams"), function(){
|
||||
var linecount = ($(this).width()/50)*10;
|
||||
for(var i = 0; i <= linecount; i++) {
|
||||
$(this).append('<span class="particle" style="top:' + $.rnd(-50,00) + '%; left:' + $.rnd(0,100) + '%;width:' + $.rnd(1,3) + 'px; height:' + $.rnd(80,160) + '%;animation-delay: -' + ($.rnd(0,30)/10) + 's;"></span>');
|
||||
}
|
||||
});
|
||||
}
|
||||
jQuery.rnd = function(m,n) {
|
||||
m = parseInt(m);
|
||||
n = parseInt(n);
|
||||
return Math.floor( Math.random() * (n - m + 1) ) + m;
|
||||
}
|
||||
sunbeams();
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 2. CSS 代码
|
||||
|
||||
```css
|
||||
<style>
|
||||
.sunbeams > .particle {
|
||||
position: absolute;
|
||||
background-color: rgba(253, 216, 53, 0.5);
|
||||
-webkit-animation: sunbeams 3s linear infinite;
|
||||
animation: sunbeams 3s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes sunbeams {
|
||||
0% {
|
||||
-webkit-transform: translateY(40%) rotate(0deg);
|
||||
transform: translateY(40%) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translateY(-40%) rotate(180deg);
|
||||
transform: translateY(-40%) rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(40%) rotate(360deg);
|
||||
transform: translateY(40%) rotate(360deg);
|
||||
}
|
||||
0%,14%,17%,43%,53%,71%,80%,94%,100% {
|
||||
opacity: 0;
|
||||
}
|
||||
6%,15%,24%,28%,48%,55%,78%,82%,99% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes sunbeams {
|
||||
0% {
|
||||
-webkit-transform: translateY(40%) rotate(0deg);
|
||||
transform: translateY(40%) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translateY(-40%) rotate(180deg);
|
||||
transform: translateY(-40%) rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(40%) rotate(360deg);
|
||||
transform: translateY(40%) rotate(360deg);
|
||||
}
|
||||
0%,14%,17%,43%,53%,71%,80%,94%,100% {
|
||||
opacity: 0;
|
||||
}
|
||||
6%,15%,24%,28%,48%,55%,78%,82%,99% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
#### 3. HTML 代码
|
||||
|
||||
```html
|
||||
<div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;" >
|
||||
<span class="particletext sunbeams" style="font-size:48px; position: relative;">This is sunbeams</span>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,261 @@
|
||||
---
|
||||
title: markdown
|
||||
abbrlink: 96be88e3
|
||||
date: 2022-04-23 20:34:26
|
||||
tags:
|
||||
mathjax: true
|
||||
---
|
||||
|
||||
[toc]
|
||||
|
||||
# Markdown
|
||||
|
||||
## Markdown索引
|
||||
|
||||
### 索引文件夹
|
||||
|
||||
[效率](【2】学习/效率)
|
||||
|
||||
### 索引文件
|
||||
|
||||
[markdown](【2】学习\效率\markdown.md)
|
||||
|
||||
### 图片超链接
|
||||
|
||||
````html
|
||||
<p align="left">
|
||||
<a href="https://mp.weixin.qq.com/s/ePhaYezFblgt0NgbvtWqww" target="_blank">
|
||||
<img src="https://cdn.jsdelivr.net/gh/justacoder99/r2coding@master/img/localsoftware.2x9vakmja2g.png" width=""/>
|
||||
</a>
|
||||
</p>
|
||||
```
|
||||
````
|
||||
|
||||
<p align="left">
|
||||
<a href="https://mp.weixin.qq.com/s/ePhaYezFblgt0NgbvtWqww" target="_blank">
|
||||
<img src="https://cdn.jsdelivr.net/gh/justacoder99/r2coding@master/img/localsoftware.2x9vakmja2g.png" width=""/>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Markdown插入图片
|
||||
|
||||
### 直接插入
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
**[PicGo + Gitee(码云)实现免费markdown图床](https://link.zhihu.com/?target=https%3A//www.jianshu.com/p/b69950a49ae2)**
|
||||
|
||||
|
||||
|
||||
### HTML插入-排版
|
||||
|
||||
```html
|
||||
<center>
|
||||
<img src ="https://gitee.com/tianzhendong/img/raw/master//images/202202111342399.png"
|
||||
width = "25%">
|
||||
<br>
|
||||
这是图注
|
||||
</center>
|
||||
```
|
||||
|
||||
|
||||
|
||||
<center>
|
||||
<img src ="https://gitee.com/tianzhendong/img/raw/master//images/202202111342399.png"
|
||||
width = "25%">
|
||||
<img src ="https://gitee.com/tianzhendong/img/raw/master//images/202202111342399.png"
|
||||
width = "25%">
|
||||
<br>
|
||||
这是图注
|
||||
</center>
|
||||
|
||||
|
||||
## Markdown插入音频
|
||||
|
||||
### 使用audio 标签
|
||||
|
||||
```markdown
|
||||
<audio id="audio" controls="" preload="none">
|
||||
<source id="mp3" src="音频地址">
|
||||
</audio>
|
||||
```
|
||||
|
||||
<audio id="audio" controls="" preload="none">
|
||||
<source id="mp3" src="https://i.y.qq.com/v8/playsong.html?songid=332928560&songtype=0#webchat_redirect">
|
||||
</audio>
|
||||
|
||||
|
||||
|
||||
|
||||
### 使用iframe标签
|
||||
|
||||
我们以网易云音乐为例 1.首先在网易云音乐播放界面，点击生成外链播放器
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1858139145&auto=0&height=66">
|
||||
</iframe>
|
||||
|
||||
|
||||
|
||||
## Markdown插入视频
|
||||
|
||||
### html中的iframe标签
|
||||
|
||||
```html
|
||||
<iframe
|
||||
src="视频或者网页路径"
|
||||
scrolling="no"
|
||||
border="0"
|
||||
frameborder="no"
|
||||
framespacing="0"
|
||||
allowfullscreen="true"
|
||||
height=600
|
||||
width=800>
|
||||
</iframe>
|
||||
<!-- 相当于是子网页 -->
|
||||
<!-- B站分享链接提供 -->
|
||||
```
|
||||
|
||||
<iframe src="//player.bilibili.com/player.html?aid=87731293&bvid=BV1E7411b7w4&cid=149892227&page=1&as_wide=1&high_quality=1&danmaku=1" allowfullscreen="true" width="100%" height="450" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
|
||||
|
||||
### html中的video标签
|
||||
|
||||
```html
|
||||
<!-- mp4格式 -->
|
||||
<video id="video" controls="" preload="none" poster="封面">
|
||||
<source id="mp4" src="mp4格式视频" type="video/mp4">
|
||||
</videos>
|
||||
|
||||
<!-- webm格式 -->
|
||||
<video id="video" controls="" preload="none" poster="封面">
|
||||
<source id="webm" src="webm格式视频" type="video/webm">
|
||||
</videos>
|
||||
|
||||
<!-- ovg格式 -->
|
||||
<video id="video" controls="" preload="none" poster="封面">
|
||||
<source id="ogv" src="ogv格式视频" type="video/ogv">
|
||||
</videos>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 如何优雅地在Markdown中输入数学公式
|
||||
|
||||
[来自CSDN文章](https://blog.csdn.net/m0_37167788/article/details/78809779?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.pc_relevant_default&utm_relevant_index=2)
|
||||
|
||||
### 基础部分
|
||||
|
||||
#### 公式标记
|
||||
|
||||
在Markdown中，有两种输入公式的方法：一是行内公式（inline），用一对美元符号`$`包裹。二是整行公式（displayed），用一对紧挨的两个美元符号`$$`包裹。
|
||||
|
||||
这是一个行内公式$E=mc^2$，写法是：`$E=mc^2$`。
|
||||
|
||||
这是一个整行公式：
|
||||
|
||||
写法是：
|
||||
|
||||
```tex
|
||||
\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
$$
|
||||
\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}
|
||||
$$
|
||||
|
||||
```txt
|
||||
$$
|
||||
\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}
|
||||
$$
|
||||
```
|
||||
|
||||
#### 希腊字母
|
||||
|
||||
| 名称 | 大写 | Tex | 小写 | Tex |
|
||||
| ------- | ---------- | -------- | ---------- | -------- |
|
||||
| alpha | $A$ | A | $\alpha$ | \alpha |
|
||||
| beta | $B$ | B | $beat$ | \beat |
|
||||
| gamma | $\Gamma$ | \Gamma | $\gamma$ | \gamma |
|
||||
| delta | $\Delta$ | \Delta | $\delta$ | \delta |
|
||||
| epsilon | $E$ | E | $\epsilon$ | \epsilon |
|
||||
| zeta | $Z$ | Z | $\zeta$ | \zeta |
|
||||
| eta | $H$ | H | $\eta$ | \eta |
|
||||
| theta | $\Theta$ | \Theta | $\theta$ | \theta |
|
||||
| iota | $I$ | I | $\iota$ | \iota |
|
||||
| kappa | $K$ | K | $\kappa$ | \kappa |
|
||||
| lambda | $\Lambda$ | \Lambda | $\lambda$ | \lambda |
|
||||
| mu | $M$ | M | $\mu$ | \mu |
|
||||
| nu | $N$ | N | $\nu$ | \nu |
|
||||
| xi | $\Xi$ | \Xi | $\xi$ | \xi |
|
||||
| omicron | $O$ | O | $\omicron$ | \omicron |
|
||||
| pi | $\Pi$ | \Pi | $\pi$ | \pi |
|
||||
| rho | $P$ | P | $\rho$ | \rho |
|
||||
| sigma | $\Sigma$ | \Sigma | $\sigma$ | \sigma |
|
||||
| tau | $T$ | T | $\tau$ | \tau |
|
||||
| upsilon | $\Upsilon$ | \Upsilon | $\upsilon$ | \upsilon |
|
||||
| phi | $\Phi$ | \Phi | $\phi$ | \phi |
|
||||
| chi | $X$ | X | $\chi$ | \chi |
|
||||
| psi | $\Psi$ | \Psi | $\psi$ | \psi |
|
||||
| omega | $\Omega$ | \Omega | $\omega$ | \omega |
|
||||
|
||||
#### 上标与下标
|
||||
|
||||
上标和下标分别使用`^`和`_`来表示。例如`x_i^2`：$x_i^2$，`\log_2 x`：$\log_2 x$。
|
||||
|
||||
默认情况下，**上下标符号仅仅对下一个组起作用**。一个组即单个字符或者使用`{}`包裹起来的内容。也就是说，如果使用`10^10`会得到$10^10$，而`10^{10}`才是$10^{10}$。同时，大括号还能消除二义性，如`x^5^6`会显示错误，必须使用大括号来界定`^`的结合性，如`{x^5}^6`${x^5}^6$或者`x^{5^6}`：$x^{5^6}$。注意区分`x_i^2`：$x_i^2$和`x_{i_2}`：$x_{i_2}$。
|
||||
|
||||
另外，如果要在左右两边都有上下标，可以用`\sideset`来表示，如`\sideset{^1_2}{^3_4}\bigotimes`：$\sideset{^1_2}{^3_4}\bigotimes$。
|
||||
|
||||
#### 括号
|
||||
|
||||
- **小括号与方括号：**使用原始的`()`和`[]`即可。如`(2+3)[4+4]`：$(2+3)[4+4]$。
|
||||
- **大括号：**由于大括号`{}`被用来分组，因此需要使用`\{`和`\}`表示大括号，也可以使用`\lbrace`和`\rbrace`来表示。如`\{a*b\}`或者`\lbrace a*b \rbrace`，都会显示为$\lbrace a*b \rbrace$。
|
||||
- **尖括号：**使用`\langle`和`\rangle`分别表示左尖括号和右尖括号。如`\langle x \rangle`：$\langle x \rangle$。
|
||||
- **上取整：**使用`\lceil`和`\rceil`表示。如`\lceil x \rceil`：$\lceil x \rceil$。
|
||||
- **下取整：**使用`\lfloor`和`\rfloor`表示。如`\lfloor x \rfloor`：$\lfloor x \rfloor$。
|
||||
|
||||
需要注意的是，原始括号并不会随着公式大小缩放。如`(\frac12)`：。可以使用`\left( ...\right)`来自适应的调整括号。如`\left( \frac12 \right)`：$\left( \frac12 \right)$。可以明显看出，后一组公式中的括号是经过缩放的。
|
||||
|
||||
#### 求和与积分
|
||||
|
||||
`\sum`用来表示求和符号，其下标表示求和下限，上标表示上线。如`\sum_1^n`：$\sum_1^n$。
|
||||
|
||||
`\int`用来表示积分符号，同样地，其上下标表示积分的上下限。如`\int_1^\infty`：$\int_1^\infty$。
|
||||
|
||||
与此类似的符号还有，`\prod`：$\prod$，`\bigcup`：$\bigcup$，`\bigcap`：$\bigcap$，`\iint`：$\iint$。
|
||||
|
||||
#### 分式与根式
|
||||
|
||||
分式有两种表示方法。第一种，使用`\frac ab`，其中`\frac`作用于气候的两个组a和b，结果为$\frac ab$。如果分子或分母不是单个字符，需要使用`{}`来分组。第二种，使用`\over`来分隔一个组的前后两部分，如`{a+1\over b+1}`：${a+1\over b+1}$。
|
||||
|
||||
根式使用`\sqrt[a]b`来表示。其中，方括号内的值用来表示开几次方，省略方括号则表示开方，如`\sqrt[4]{\frac xy}`：$\sqrt[4]{\frac xy}$，`\sqrt{x^3}`：$\sqrt{x^3}$。
|
||||
|
||||
#### 字体
|
||||
|
||||
- 使用`\it`显示意大利体（公式默认字体）：$ACDEFGHIJKLMnopqrstuvwxyz$。
|
||||
- 使用`\mathbb`或`\Bbb`显示黑板粗体（黑板黑体），如`\mathbb{CHNQRZ}`：$\mathbb{CHNQRZ}$。
|
||||
- 使用`\mathbf`或`\bf`示黑体：$\bf ABCDEFGHIJKLMnopqrstuvwxyzABCDEFGHIJKLMnopqrstuvwxyz$。
|
||||
- 使用`\mathtt`或`\tt`显示打印机字体：$\tt{ABCDEFGHIJKLMnopqrstuvwxyz}$
|
||||
|
||||
### MarkDown符号大全
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user