content.json

{"meta":{"title":"Luckey","subtitle":"Luckeyの博客","description":"本科 | 计算机科学与技术 | 网络安全","author":"Luckey","url":"http://www.luckyzmj.cn","root":"/"},"pages":[{"title":"","date":"2021-07-14T06:23:05.005Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"baidu_verify_xxxxxxx.html","permalink":"http://www.luckyzmj.cn/baidu_verify_xxxxxxx.html","excerpt":"","text":"wvlc3L96QK"},{"title":"","date":"2021-07-14T06:11:04.668Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"google1xxxxxxx0.html","permalink":"http://www.luckyzmj.cn/google1xxxxxxx0.html","excerpt":"","text":"google-site-verification: google110e5e5e14c8dcf0.html"},{"title":"放松一下","date":"2019-08-10T08:41:10.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/index.html","permalink":"http://www.luckyzmj.cn/List/index.html","excerpt":"","text":"影音资源共享"},{"title":"404","date":"2019-08-10T08:41:10.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"404.html","permalink":"http://www.luckyzmj.cn/404.html","excerpt":"","text":""},{"title":"about","date":"2019-10-24T16:00:00.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"about/index.html","permalink":"http://www.luckyzmj.cn/about/index.html","excerpt":"","text":""},{"title":"categories","date":"2019-10-24T16:00:00.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"categories/index.html","permalink":"http://www.luckyzmj.cn/categories/index.html","excerpt":"","text":""},{"title":"archives","date":"2019-10-24T16:00:00.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"archives/index.html","permalink":"http://www.luckyzmj.cn/archives/index.html","excerpt":"","text":""},{"title":"留言板","date":"2019-10-24T16:00:00.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"contact/index.html","permalink":"http://www.luckyzmj.cn/contact/index.html","excerpt":"","text":"畅所欲言 在这里可以留下你的足迹，欢迎在下方留言，欢迎交换友链，一起交流学习！ 友链 Luckeyの友链信息 博客名称: Luckeyの博客 博客网址: http://www.luckyzmj.cn 博客头像: https://s1.ax1x.com/2020/05/17/YRWsYT.png 博客介绍: The harder you work, the luckier you will be"},{"title":"统计","date":"2020-10-31T02:11:28.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"census/index.html","permalink":"http://www.luckyzmj.cn/census/index.html","excerpt":"","text":""},{"title":"友链","date":"2019-07-19T08:42:10.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"friends/index.html","permalink":"http://www.luckyzmj.cn/friends/index.html","excerpt":"","text":""},{"title":"资源分享","date":"2019-07-19T08:40:27.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"resource/index.html","permalink":"http://www.luckyzmj.cn/resource/index.html","excerpt":"","text":""},{"title":"tags","date":"2019-07-19T08:40:27.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"tags/index.html","permalink":"http://www.luckyzmj.cn/tags/index.html","excerpt":"","text":""},{"title":"相册","date":"2021-07-14T06:11:04.354Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/index.html","excerpt":"","text":""},{"title":"视频","date":"2019-08-10T08:41:10.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/movies/index.html","permalink":"http://www.luckyzmj.cn/List/movies/index.html","excerpt":"","text":""},{"title":"听听音乐","date":"2019-07-19T08:40:27.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/music/index.html","permalink":"http://www.luckyzmj.cn/List/music/index.html","excerpt":"","text":""},{"title":"听听音乐","date":"2019-07-19T08:40:27.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/tools/index.html","permalink":"http://www.luckyzmj.cn/List/tools/index.html","excerpt":"","text":""},{"title":"乖巧小狗","date":"2021-07-14T06:11:04.356Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/乖巧小狗/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/%E4%B9%96%E5%B7%A7%E5%B0%8F%E7%8B%97/index.html","excerpt":"","text":""},{"title":"二次元风","date":"2021-07-14T06:11:04.359Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/二次元风/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/%E4%BA%8C%E6%AC%A1%E5%85%83%E9%A3%8E/index.html","excerpt":"","text":""},{"title":"动漫插画","date":"2021-07-14T06:11:04.364Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/动漫插画/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/index.html","excerpt":"","text":""},{"title":"动漫人物","date":"2021-07-14T06:11:04.361Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/动漫人物/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/%E5%8A%A8%E6%BC%AB%E4%BA%BA%E7%89%A9/index.html","excerpt":"","text":""},{"title":"呆萌猫咪","date":"2021-07-14T06:11:04.369Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/呆萌猫咪/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/%E5%91%86%E8%90%8C%E7%8C%AB%E5%92%AA/index.html","excerpt":"","text":""},{"title":"动漫风景","date":"2021-07-14T06:11:04.366Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/动漫风景/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/index.html","excerpt":"","text":""},{"title":"清新花卉","date":"2021-07-14T06:11:04.374Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/清新花卉/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/%E6%B8%85%E6%96%B0%E8%8A%B1%E5%8D%89/index.html","excerpt":"","text":""},{"title":"城市风光","date":"2021-07-14T06:11:04.371Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/城市风光/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/%E5%9F%8E%E5%B8%82%E9%A3%8E%E5%85%89/index.html","excerpt":"","text":""},{"title":"炫酷跑车","date":"2021-07-14T06:11:04.376Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/炫酷跑车/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/%E7%82%AB%E9%85%B7%E8%B7%91%E8%BD%A6/index.html","excerpt":"","text":""},{"title":"璀璨星空","date":"2021-07-14T06:11:04.378Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/璀璨星空/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/index.html","excerpt":"","text":""},{"title":"甜美食品","date":"2021-07-14T06:11:04.380Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/甜美食品/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/%E7%94%9C%E7%BE%8E%E9%A3%9F%E5%93%81/index.html","excerpt":"","text":""},{"title":"自然风景","date":"2021-07-14T06:11:04.382Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"List/galleries/自然风景/index.html","permalink":"http://www.luckyzmj.cn/List/galleries/%E8%87%AA%E7%84%B6%E9%A3%8E%E6%99%AF/index.html","excerpt":"","text":""}],"posts":[{"title":"Hello World","slug":"hello-world","date":"2021-07-14T06:06:16.329Z","updated":"2021-07-14T06:16:22.367Z","comments":true,"path":"posts/4a17b156.html","link":"","permalink":"http://www.luckyzmj.cn/posts/4a17b156.html","excerpt":"","text":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post$ hexo new \"My New Post\" More info: Writing Run server$ hexo server More info: Server Generate static files$ hexo generate More info: Generating Deploy to remote sites$ hexo deploy More info: Deployment","categories":[],"tags":[]},{"title":"LuckyBlog开源搭建教程","slug":"BlogOpen","date":"2020-09-16T16:00:00.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"posts/d74d8b76.html","link":"","permalink":"http://www.luckyzmj.cn/posts/d74d8b76.html","excerpt":"","text":"前言之前在B站上发布了个人博客的视频，播放量也破千了，有网友私聊也想要搭建一个这样的博客。经过一段时间的准备，现将本人博客的源代码公布出来，大家只需要根据以下的步骤，即可快速搭建一个漂亮完善的博客。 0x01 LuckyBlog 介绍上一个LuckyBlog版本发布于2020年的9月份，是在 洪卫の博客 基础上进行修改的。自从发布以来有很多网友都私信搭建了博客，同时也发现了旧版本中存在的一些问题需要解决，例如：搜索框不适配XML代码搜索，部分图片失效，代码块问题以及各种小问题。现在将最新的LuckyBlog版本代码发布出来，修复改进了不少的BUG，使其更加稳定运行。同时完善了博客的基础功能，例如：音乐、视频、相册、百宝箱等页面。同时增加了不少的新功能，例如：适配Hexo5.x、黑白天浏览模式、仿Windows页面，站点统计等。 博客演示地址：http://luckyzmj.cn/ 开源项目地址：https://github.com/LuckyZmj/LuckyBlog 主题特性 简单漂亮，文章内容美观易读 Material Design 设计 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现 首页轮播文章及每天动态切换 Banner 图片 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替） 时间轴式的归档页 词云的标签页和雷达图的分类页 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等） 可自定义的数据的友情链接页面 支持文章置顶和文章打赏 支持 MathJax TOC 目录，优化了目录显示效果 可设置复制文章内容时追加版权信息 可设置阅读文章时做密码验证 Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Valine） 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能 支持在首页的音乐播放和视频播放功能 修改了原主题以及基础主题中的一些BUG 加入图片懒加载功能，在根目录配置文件开启和关闭 增加留言板功能 在关于板块,加入简历功能页 增加完善音乐、相册、视频等功能页面 支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情 增加网站运行时间显示 增加live2d 动漫人物模型 整体替换Banner图片和文章特色图片 增加实用的快捷导航栏功能 修改了一些控件的参数以及部分样式 优化了代码显示块的效果 增加页面樱花飘落动效 增加鼠标点击烟花爆炸动效 增加页面雪花飘落动效 增加博客白云背景效果 增加天气接口控件 加入鼠标点击文字特效 增加DaoVoice在线聊天插件 增加博客代码、图片压缩功能 增加黑白天浏览模式功能 增加仿Windows功能 增加站点统计功能 增加留言版一言功能 其他 0x02 LuckyBlog 安装1. 安装GitGit是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。Git的作用是将本地的网页文件传到github上。 Git下载地址 Git教程 windows： 到git官网上下载.exe文件,Download git,安装选项全部默认即可。 2. 安装node.jsHexo是基于node.js编写的，所以需要安装一下node.js和里面的npm工具。 windows： 到Node.js官网下载.exe文件，安装选项全部默认。安装好之后，按Win+R打开cmd命令提示符，输入node -v和npm -v，若出现版本号，则说明安装成功。 3. 添加npm国内源使用阿里的国内镜像进行加速下载 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。可能会有几个报错，不用理会。 npm install -g hexo-cli 安装完后输入hexo -v验证是否安装成功。 接下来初始化一下hexo,即初始化我们的博客网站。例如我的在C:\\MyBlog文件夹下的命令行中，输入hexo init初始化文件夹 hexo init 新建完成后，指定文件夹MyBlog目录下有： node_modules: 依赖包 public：存放生成的页面 scaffolds：生成文章的一些模板 source：用来存放你的文章 themes：主题** _config.yml: 博客的配置文件** 到此为止，本地的Hexo基础环境搭建完成了。 5. 安装LuckyBlog下载源代码到本地文件下 git clone https://github.com/LuckyZmj/LuckyBlog.git 将下载好的LuckyBlog全部复制到MyBlog目录下，如果复制过程中出现重复文件，点击替换。 最后使用 npm i 或者 npm install 安装依赖环境包即可。 如果安装依赖环境出错，可以参考这篇文章。 最后执行 hexo clean 和 hexo s -g 启动Hexo本地预览，即可看到效果。 到此为止LuckyBlog安装完成，接下来就是个性化设置了。 0x03 LuckyBlog 个性化 注意！注意！注意！在阅读以下博客个性化之前，最好希望大家有Hexo博客配置主题的基础。如果是完全小白，建议去网上搜索学习相关Hexo搭建博客的过程，另外去B站上也有很多视频教程。博客个性化是需要大家有耐心的，因为每个人的操作不同，在配置过程中可能会遇到一些不可预期的问题，希望大家可以克服这些困难，如有需要帮助，也可以私信博主帮助大家解决问题。 1. 修改部署平台编辑根目录下的配置文件MyBlog/_config.yml，找到如下内容并修改 deploy: - type: git repo: git@github.com:LuckyZmj/LuckyZmj.github.io.git # 替换为你的部署平台地址 branch: master 2. 修改网站信息编辑根目录下的配置文件MyBlog/_config.yml，找到如下内容并修改 # 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，找到如下内容并修改 # 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，修改你想要内容即可 --- 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音乐网页版，点击打开自己喜欢的音乐列表，在网页的URL处包含了音乐列表的id，如下图所示 编辑主题目录下的配置文件MyBlog/themes/matery/_config.yml，找到如下内容并修改 # 默认是博主的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，找到如下内容并修改 # 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，找到如下内容并修改 daovoice: enable: true app_id: 4xxxxxxxe #DaoVoice中的app_id 8. 快捷导航页面个性化编辑文件MyBlog/source/tools/index.html，以下简单标记出几处，还有其他涉及到博客信息的内容都需要改为你自己的博客信息即可。 9. 添加友情链接编辑文件MyBlog/suorce/_data/friends.json，按如下格式添加友情 [ { \"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. 添加相册比如你的图片上传图床后，链接地址如下 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 ... 首先提取出图片链接公共的部分，作为图床地址 https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/ 然后再提取图片地址中不同的部分，作为图片地址 璀璨星空/01.jpg 璀璨星空/02.jpg 动漫风景/01.jpg 动漫风景/03.jpg ... 具体怎么分割根据你自己图床的链接格式而定，以上为我的github图床格式为例。 将相册图床的地址改为你自己的图床地址，需要更改两处文件 # 例如我的图床地址为： 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中添加图片链接，格式如下, [ { \"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. 站点统计功能站点统计的数据来源于百度统计,当你的网站被百度收录后就会在百度统计中出现数据，具体效果如下： 由于博客的统计页面数据不能直接从百度站点中调用，因此需要自行从百度站点中将相应数据填入博客站点统计页面的源代码文件中，个人建议每隔一个月手动更新一次数据。 打开MyBlog\\themes\\matery\\layout\\census.ejs文件，将百度统计中的数据填入源代码中，修改代码如下： 11. 仿Windows个性化仿Windows页面是采用YLUI实现的，YLUI提供了社区版本供大家学习使用，具体效果如下： 大家可以查看YLUI官方的开发文档进行开发，有不懂的可以加官方的QQ群：191372634 进行讨论。 12. 博客动漫风格背景图因为在上一个LuckyBlog版本发布的网站风格是偏向动漫风格的，如果大家喜欢动漫风格，只需要替换以下配置即可。 博客每日轮播图： 以下链接图片全部下载保存到MyBlog\\themes\\matery\\source\\medias\\banner中，以0~7.jpg的文件名格式命名即可。 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，修改替换如下代码即可： # 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主题优化的教程，大家如果遇到问题，可以参考其中的方法。 个人博客搭建 Hexo+Github博客搭建完全教程 hexo-theme-matery作者教程 Hexo+github搭建博客(超级详细版，精细入微) hexo（matery）背景、滚动条优化+增加点击跳评论","categories":[{"name":"博客篇","slug":"博客篇","permalink":"http://www.luckyzmj.cn/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"hexo-blog-lucky","slug":"hexo-blog-lucky","permalink":"http://www.luckyzmj.cn/tags/hexo-blog-lucky/"},{"name":"博客搭建教程","slug":"博客搭建教程","permalink":"http://www.luckyzmj.cn/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B/"}],"author":"luckyzmj"},{"title":"Hexo之渲染绕过","slug":"Hexo-xr","date":"2020-04-27T16:00:00.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"posts/17fd92ae.html","link":"","permalink":"http://www.luckyzmj.cn/posts/17fd92ae.html","excerpt":"","text":"0x001 Hexo 渲染 在Hexo部署时会默认渲染source下的所有html页面，但有时候想在Hexo博客上单独自定义html页面或README.md时，却不希望被Hexo渲染。因此对某个文件或者目录进行排除渲染是非常必要的。 0x002 方法一：font matterHexo新建网站页面，然后将你的代码直接写入 index.md 中 在 Front matter 中添加 layout: false，此方法适用于单一的纯HTMLCSS 页面。 --- title: tools date: 2020-04-28 00:00:00 type: \"tools\" layout: false --- 0x003 方法二：skip render在博客根目录下的 _config.yml，找到 skip_render，大概在32行左右，写入你想要的跳过渲染的路径，注意缩进和空格。 # 指定目录跳过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 在博客根目录 source/下新建tools，然后新建index.html,将webstack网页源码全选复制粘贴到里面。 本站的webstack源码：view-source:http://luckyzmj.cn/tools/ 注意：将源码里的部分信息以及跳转链接按照你真实个人博客的环境进行修改。 然后打开博客根目录下配置文件_config.yml，找到skip_render，做如下修改： 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","categories":[{"name":"博客篇","slug":"博客篇","permalink":"http://www.luckyzmj.cn/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"http://www.luckyzmj.cn/tags/Hexo/"},{"name":"渲染绕过","slug":"渲染绕过","permalink":"http://www.luckyzmj.cn/tags/%E6%B8%B2%E6%9F%93%E7%BB%95%E8%BF%87/"}],"author":"Luckey"},{"title":"文字背景粒子特效","slug":"jQuery+CSS3","date":"2020-03-26T16:00:00.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"posts/4b3510a4.html","link":"","permalink":"http://www.luckyzmj.cn/posts/4b3510a4.html","excerpt":"","text":"前言一款jQuery+CSS3的文字背景粒子动画特效，一共6种粒子效果，每种文字背景的粒子效果都不同，有漂浮的有坠落的等等。 0x001 特效演示 This is fires This is lines This is hearts This is bubbles This is confetti This is sunbeams .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; } } function fire() { $.each($(\".particletext.fire\"), function(){ var firecount = ($(this).width()/50)*20; for(var i = 0; i .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%); } } function lines() { $.each($(\".particletext.lines\"), function(){ var linecount = ($(this).width()/50)*10; for(var i = 0; i .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); } } function hearts() { $.each($(\".particletext.hearts\"), function(){ var heartcount = ($(this).width()/50)*5; for(var i = 0; i .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%); } } function bubbles() { $.each($(\".particletext.bubbles\"), function(){ var bubblecount = ($(this).width()/50)*10; for(var i = 0; i .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); } } function confetti() { $.each($(\".particletext.confetti\"), function(){ var confetticount = ($(this).width()/50)*10; for(var i = 0; i .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; } } function sunbeams() { $.each($(\".particletext.sunbeams\"), function(){ var linecount = ($(this).width()/50)*10; for(var i = 0; i","categories":[{"name":"前端篇","slug":"前端篇","permalink":"http://www.luckyzmj.cn/categories/%E5%89%8D%E7%AB%AF%E7%AF%87/"}],"tags":[{"name":"jQuery+CSS3","slug":"jQuery-CSS3","permalink":"http://www.luckyzmj.cn/tags/jQuery-CSS3/"},{"name":"粒子特效","slug":"粒子特效","permalink":"http://www.luckyzmj.cn/tags/%E7%B2%92%E5%AD%90%E7%89%B9%E6%95%88/"}],"author":"Luckey"},{"title":"PicGo+GitHub 图床搭建","slug":"PicGo-GitHub","date":"2020-03-14T16:00:00.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"posts/7a46f93c.html","link":"","permalink":"http://www.luckyzmj.cn/posts/7a46f93c.html","excerpt":"","text":"前言用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官网注册一个 创建一个新的图床仓库，点击右上角的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后却上传图片失败，可以参考以下方法： 检查自定义域名是否正确 仓库名不要有空格 图片名字不要带有特殊符号，如：%、+、*、空格等 建议开启时间戳重命名，防止图片名字重复 上传图片间歇太短，需在PicGo设置中关闭Server选项 PicGo应用不稳定因素，需重启应用 参考文章 https://blog.csdn.net/sunhwee/article/details/100109956","categories":[{"name":"博客篇","slug":"博客篇","permalink":"http://www.luckyzmj.cn/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"PicGo","slug":"PicGo","permalink":"http://www.luckyzmj.cn/tags/PicGo/"},{"name":"GitHub图床","slug":"GitHub图床","permalink":"http://www.luckyzmj.cn/tags/GitHub%E5%9B%BE%E5%BA%8A/"}],"author":"Luckey"},{"title":"阿里云服务器部署Hexo博客","slug":"blog-aliyun","date":"2020-02-26T16:00:00.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"posts/19d2a4e6.html","link":"","permalink":"http://www.luckyzmj.cn/posts/19d2a4e6.html","excerpt":"","text":"前言 相信大部分人使用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下载地址 Git教程 2.安装Nodejs 到Node.js官网下载.exe文件，安装选项全部默认。安装好之后，按Win+R打开cmd命令提示符，输入node -v和npm -v，若出现版本号，则说明安装成功。 使用npm阿里的国内镜像进行加速下载 npm config set registry https://registry.npm.taobao.org 4.安装Hexo 先创建一个文件夹MyBlog，用来存放自己的博客文件，然后cd到这个文件夹下（或者在这个文件夹下直接右键git bash here打开）。 定位到该目录下，输入npm install -g hexo-cli安装Hexo。可能会有几个报错，不用理会。 npm install -g hexo-cli 安装完后输入hexo -v,若出现版本号则，说明安装成功。 接下来初始化一下hexo,即初始化我们的博客，输入hexo init初始化文件夹 hexo init MyBlog 新建完成后，指定文件夹MyBlog目录下有： node_modules: 依赖包 public：存放生成的页面 scaffolds：生成文章的一些模板 source：用来存放你的文章 themes：主题** _config.yml: 博客的配置文件** 输入hexo g生成静态网页，然后输入hexo s打开本地服务器预览 hexo g hexo s 生成ssh公钥在本地桌面点击右键Git Bash Here打开Git终端，执行如下命令`,一路回车 ssh-keygen -t rsa 这个时候它会告诉你已经生成了.ssh的文件夹。在git bash中输入 cat ~/.ssh/id_rsa.pub 输出的内容就是公钥信息了 阿里云服务器环境搭建安装Git yum install git 创建Git账户 adduser git 添加账户权限 chmod 740 /etc/sudoers vim /etc/sudoers 找到 ## Allow root to run any commands anywhere root ALL=(ALL) ALL 添加以下内容 git ALL=(ALL) ALL 保存退出并改回权限 chmod 400 /etc/sudoers 设置git账户密码 sudo passwd git 切换至git用户，创建 ~/.ssh 文件夹和 ~/.ssh/authorized_keys 文件，并赋予相应的权限 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后不用密码就说明好了 ssh -v git@SERVER 创建目录 #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 仓库 cd var/repo git init --bare hexoBlog.git 创建一个新的 Git 钩子，用于自动部署 在 /var/repo/hexoBlog.git 下，有一个自动生成的 hooks 文件夹。我们需要在里边新建一个新的钩子文件 post-receive。 vim /var/repo/hexoBlog.git/hooks/post-receive 按 i 键进入文件的编辑模式，在该文件中添加两行代码（将下边的代码粘贴进去)，指定 Git 的工作树（源代码）和 Git 目录（配置文件等） #!/bin/bash git --work-tree=/var/www/hexo --git-dir=/var/repo/hexoBlog.git checkout -f 然后，按 Esc 键退出编辑模式，输入”:wq” 保存退出。 修改文件权限，使得其可执行 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稳定版)： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh Linux面板6.0升级专业版 curl http://download.bt.cn/install/update6.sh|bash 安装完成后会显示面板后台地址·账号·密码。打开面板后台地址登陆面板，选择Nginx的部署方案，静静等待部署。 部署完成，点击网站-添加站点-输入域名(没有域名的输入自己的IP地址)-底部的PHP版本选择”纯静态”-提交。 网站创建完成后点击设置-配置文件 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 ，保存 重启宝塔面板服务 service bt restart 本地Hexo部署到阿里云服务器进入到本地Hexo博客的文件夹MyBlog,右键点击Git Bash Here，输入命令 #定义邮箱(更换为你的邮箱地址就行) git config --global user.email \"you@example.com\" #定义名称(更换自定义一个名称就行) git config --global user.name \"Your Name\" 配置_config.yml,完成自动化部署 打开本地Hexo博客的文件夹MyBlog文件夹下的_config.yml, 找到deploy 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，输入命令 hexo clean hexo g -d 不报错说明完成，打开浏览器输入你的域名或ip地址就可以看到你部署的Hexo博客了。 到此为止，我们已经成功部完成，并且访问自己的服务器端比访问Github快多了。 小贴士 在部署过程中，执行 hexo d发现部署老是出错，什么权限不允许之类的，这里我们需要检查我们在上述的git操作部署是否使用了git用户操作，若是没有，需要给相应的目录更改用户组 使用 chown -R git:git /var/repo/ 这条命令递归的将repo目录及其子目录用户组设置为git。 同时使用 chown -R git:git /var/www/hexo 这样即可解决此类问题。 还有一个问题就是绑定域名后不能访问。原因是在国内任何域名只要绑定到国内的服务器主机上都必须去工信部和公安部备案完后才能正常使用。如果是港澳台的服务器或者是国外的服务器则可以不需要备案。 参考文章 https://blog.csdn.net/weixin_33907511/article/details/91398208?utm_source=distribute.pc_relevant.none-task","categories":[{"name":"博客篇","slug":"博客篇","permalink":"http://www.luckyzmj.cn/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"http://www.luckyzmj.cn/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"http://www.luckyzmj.cn/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"阿里云","slug":"阿里云","permalink":"http://www.luckyzmj.cn/tags/%E9%98%BF%E9%87%8C%E4%BA%91/"}],"author":"Luckey"},{"title":"个人博客搭建","slug":"Blog","date":"2019-08-27T03:41:03.000Z","updated":"2021-06-13T05:55:39.000Z","comments":true,"path":"posts/e3e08109.html","link":"","permalink":"http://www.luckyzmj.cn/posts/e3e08109.html","excerpt":"","text":"0x001 效果演示 0x002 简单介绍 前前后后大概花了一周多的时间，目前个人博客已经完善的差不多了，现在写个文章做个阶段总结，后续如果有更新的地方，会及时补充。本博客基于Hexo框架，采用hexo-theme-matery主题，在这里非常感谢作者洪卫的hexo-blog-fly博客开源，极大简化了构建博客的工作量和复杂度。在此开源博客的基础上做了改进，修复了一些bug，顺利搭建完成了我的个人博客。大家对此主题有兴趣的可以下载源代码，搭建属于自己的个性化博客。 个人博客 演示：http://luckyzmj.cn 0x003 Hexo 初级搭建 1. 安装GitGit是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。Git的作用是将本地的网页文件传到github上。 Git下载地址 Git教程 windows： 到git官网上下载.exe文件,Download git,安装选项还是全部默认，最后一步添加路径时选择Use Git from the Windows Command Prompt。 2. 安装node.jsHexo是基于node.js编写的，所以需要安装一下node.js和里面的npm工具。 windows： 到Node.js官网下载.exe文件，安装选项全部默认。安装好之后，按Win+R打开cmd命令提示符，输入node -v和npm -v，若出现版本号，则说明安装成功。 3. 添加npm国内源使用阿里的国内镜像进行加速下载 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。可能会有几个报错，不用理会。 npm install -g hexo-cli 安装完后输入hexo -v验证是否安装成功。 到此为止hexo就安装完了。 接下来初始化一下hexo,即初始化我们的网站，输入hexo init初始化文件夹 hexo init MyBlog 新建完成后，指定文件夹MyBlog目录下有： node_modules: 依赖包 public：存放生成的页面 scaffolds：生成文章的一些模板 source：用来存放你的文章 themes：主题** _config.yml: 博客的配置文件** 到此为止，本地的网站配置完成了。 输入hexo g生成静态网页，然后输入hexo s打开本地服务器 hexo g hexo s 5. 注册Github账号创建个人仓库接下来就去注册一个github账号，用来存放我们的网站。 打开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，然后输入下面命令： git config --global user.name \"注册GitHub用户名\" git config --global user.email \"注册GitHub的邮箱\" 用以下两条，检查一下你有没有输对 git config user.name git config user.email 然后创建SSH,一路回车 ssh-keygen -t rsa -C \"注册GitHub的邮箱\" 这个时候它会告诉你已经生成了.ssh的文件夹。在git bash中输入 cat ~/.ssh/id_rsa.pub 将输出的内容复制到框中，点击确定保存。 打开github，在头像下面点击settings，再点击SSH and GPG keys，新建一个SSH，名字随便取一个都可以，把你的id_rsa.pub里面的信息复制进去。如图： 在git bash输入ssh -T git@github.com，如果如下图所示，出现你的用户名，那就成功了。 ssh -T git@github.com 7. 将hexo部署到GitHub将hexo生成的文章部署到GitHub上，打开博客根目录下的_config.yml文件，这是博客的配置文件，在这里你可以修改与博客配置相关的各种信息。找到如下配置进行修改： deploy: type: git repository: https://github.com/LuckyZmj/LuckyZmj.github.io branch: master repository修改为你自己的github项目地址即可，就是部署时，告诉工具，将生成网页通过git方式上传到你对应的链接仓库中。 这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。 npm install hexo-deployer-git --save 然后就可以部署提交到github，过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了 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。 npm i hexo-deployer-git 然后输入hexo new post \"article title\"，新建一篇文章。 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这个文件夹就行了。 - node_modules - public - scaffolds - source - _data - _posts - about - archives - categories - friends - tags - themes 1.2 hexo基本配置在文件根目录下的_config.yml，就是整个hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。 1.2.1 网站参数描述title网站标题subtitle网站副标题description网站描述author您的名字language网站使用的语言timezone网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。 其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。 1.2.2 网址参数描述url网址root网站根目录 permalink文章的永久链接格式permalink_defaults永久链接中各部分的默认值 在这里，你需要把url改成你的网站域名。 permalink，也就是你生成某个文章时的那个链接格式。 比如我新建一个文章叫temp.md，那么这个时候他自动生成的地址就是http://yoursite.com/2018/09/05/temp。 以下是官方给出的示例，关于链接的变量还有很多，需要的可以去官网上查找永久链接 。 参数结果 :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博客主题，该主题是基于hexo-theme-matery优化的，需要把博客相关信息换成您自己的就可以部署了，极大简化了构建博客的工作量和复杂度。 2.1 简单使用方法 安装Git, 安装nodeJS，安装Hexo 你可以直接fork一份源码到你的仓库，clone到本地博客文件夹内 在本地博客仓库运行npm i命令安装依赖包 直接修改配置信息，改成自己的信息 运行命令hexo clean（清除生成文件），hexo g（生成网页）， hexo s（本地预览），hexo d（部署） 2.2 原主题特性: 简单漂亮，文章内容美观易读 Material Design 设计 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现 首页轮播文章及每天动态切换 Banner 图片 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替） 时间轴式的归档页 词云的标签页和雷达图的分类页 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等） 可自定义的数据的友情链接页面 支持文章置顶和文章打赏 支持 MathJax TOC 目录 可设置复制文章内容时追加版权信息 可设置阅读文章时做密码验证 Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk） 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能 支持在首页的音乐播放和视频播放功能 2.3 新增加特性: 修改了原主题的一些很多bug 加入图片懒加载功能，在根目录配置文件开启和关闭 增加留言板功能 在关于板块,加入简历功能页 增加视听[视觉听觉影音]板块 支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。 增加网站运行时间显示 增加动漫模型 整体替换Banner图片和文章特色图片 增加分类相册功能 修改了一些控件的参数 修改部分样式,比如: 文章卡片,固定高度,使其不至于因为文章摘要的长短不同导致卡片大小不一使页面布局很不美观,类似的还有友链卡片,优化了页面内容布局,视觉更整齐美观 解决首页文章列表卡片上方 border-radius圆角失效的bug 添加页面樱花飘落动效 添加鼠标点击烟花爆炸动效 加入天气接口控件 加入鼠标点击文字特效 添加页面雪花飘落动效 添加在线聊天插件 调整线聊天插件参数，使之能够随着鼠标滑动位置自适应调整 持续更新… 2.4 切换主题如果想自己动手对hexo-theme-matery优化的话，可以修改Hexo根目录下的 _config.yml的 theme 的值 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 文件，那么你就需要新建一个，命令如下： hexo new page \"categories\" 编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容： --- title: categories date: 2018-09-30 17:25:30 type: \"categories\" layout: \"categories\" --- 2.6 新建标签 tags 页tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下： hexo new page \"tags\" 编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容： --- title: tags date: 2018-09-30 18:23:38 type: \"tags\" layout: \"tags\" --- 2.7 新建关于我 about 页about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下： hexo new page \"about\" 编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容： --- title: about date: 2018-09-30 17:25:30 type: \"about\" layout: \"about\" --- 2.8 新建留言板 contact 页（可选的）contact 页是用来展示留言板信息的页面，前提是已经开启了第三方评论系统才能显示。如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下： hexo new page \"contact\" 编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容： --- title: contact date: 2018-09-30 17:25:30 type: \"contact\" layout: \"contact\" --- 2.9 新建友情链接 friends 页（可选的）friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下： hexo new page \"friends\" 编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容： --- title: friends date: 2018-12-12 21:25:30 type: \"friends\" layout: \"friends\" --- 同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示： [{ \"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 中查找 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. 注意每个二级菜单模块前要加 -. 注意缩进格式 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 插件来做代码高亮，安装命令如下： npm i -S hexo-prism-plugin 然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下： 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 插件来做内容搜索，安装命令如下： npm install hexo-generator-search --save 在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项： search: path: search.xml field: post 2.14 文章字数统计插件（建议安装）如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount 插件。 安装命令如下： npm i --save hexo-wordcount 然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可： 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表情，安装命令如下： npm install hexo-filter-github-emojis --save 在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项： githubEmojis: enable: true className: github-emoji inject: true styles: customEmojis: 2.16 添加 RSS 订阅支持（可选的）本主题中还使用到了hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下： npm install hexo-generator-feed --save 在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项： 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 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码： <% 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配置即可 # 是否在首页显示音乐 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 中的一个 注意: 如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。 date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则 以下为文章的 Front-matter 示例。最简示例 --- title: typora-vue-theme主题介绍 date: 2018-09-07 09:25:00 --- 最全示例 --- 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 来修改背景颜色： /* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */ .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> 代码中： $('.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，修改内容如下： .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博客搭建完全教程 hexo-theme-matery作者教程 Hexo+github搭建博客(超级详细版，精细入微) hexo（matery）背景、滚动条优化+增加点击跳评论","categories":[{"name":"博客篇","slug":"博客篇","permalink":"http://www.luckyzmj.cn/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"http://www.luckyzmj.cn/tags/Hexo/"},{"name":"Github","slug":"Github","permalink":"http://www.luckyzmj.cn/tags/Github/"},{"name":"博客","slug":"博客","permalink":"http://www.luckyzmj.cn/tags/%E5%8D%9A%E5%AE%A2/"}],"author":"Luckey"}],"categories":[{"name":"博客篇","slug":"博客篇","permalink":"http://www.luckyzmj.cn/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"},{"name":"前端篇","slug":"前端篇","permalink":"http://www.luckyzmj.cn/categories/%E5%89%8D%E7%AB%AF%E7%AF%87/"}],"tags":[{"name":"hexo-blog-lucky","slug":"hexo-blog-lucky","permalink":"http://www.luckyzmj.cn/tags/hexo-blog-lucky/"},{"name":"博客搭建教程","slug":"博客搭建教程","permalink":"http://www.luckyzmj.cn/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B/"},{"name":"Hexo","slug":"Hexo","permalink":"http://www.luckyzmj.cn/tags/Hexo/"},{"name":"渲染绕过","slug":"渲染绕过","permalink":"http://www.luckyzmj.cn/tags/%E6%B8%B2%E6%9F%93%E7%BB%95%E8%BF%87/"},{"name":"jQuery+CSS3","slug":"jQuery-CSS3","permalink":"http://www.luckyzmj.cn/tags/jQuery-CSS3/"},{"name":"粒子特效","slug":"粒子特效","permalink":"http://www.luckyzmj.cn/tags/%E7%B2%92%E5%AD%90%E7%89%B9%E6%95%88/"},{"name":"PicGo","slug":"PicGo","permalink":"http://www.luckyzmj.cn/tags/PicGo/"},{"name":"GitHub图床","slug":"GitHub图床","permalink":"http://www.luckyzmj.cn/tags/GitHub%E5%9B%BE%E5%BA%8A/"},{"name":"博客","slug":"博客","permalink":"http://www.luckyzmj.cn/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"阿里云","slug":"阿里云","permalink":"http://www.luckyzmj.cn/tags/%E9%98%BF%E9%87%8C%E4%BA%91/"},{"name":"Github","slug":"Github","permalink":"http://www.luckyzmj.cn/tags/Github/"}]}