| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> 开发工具 -> Hexo博客搭建以及优化 -> 正文阅读 |
|
[开发工具]Hexo博客搭建以及优化 |
作者:treeSkill |
--- ## 0x001 效果演示 --- ## 0x002 简单介绍 --- 目前个人博客已经完善的差不多了,现在写个文章做个阶段总结,后续如果有更新的地方,会及时补充。本博客基于Hexo框架,采用[hexo-theme-matery](https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md)主题,个人博客 演示:[https://showcoding.github.io/] --- ## 0x003 Hexo 初级搭建 --- ### 1. 安装Git - Git[下载地址](https://git-scm.com/download) **windows:** 到git官网上下载.exe文件,Download git,安装选项还是全部默认,最后一步添加路径时选择`Use Git from the Windows Command Prompt`。 ### 2. 安装node.js **windows:** 到[Node.js官网](http://nodejs.cn/download/)下载`.exe`文件,安装选项全部默认。安装好之后,按`Win+R`打开cmd命令提示符,输入`node -v`和`npm -v`,若出现版本号,则说明安装成功。 ### 3. 添加npm国内源 使用阿里的国内镜像进行加速下载 ```bash ### 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 安装完后输入`hexo -v`验证是否安装成功。 到此为止`hexo`就安装完了。 接下来初始化一下`hexo`,即初始化我们的网站,输入`hexo init`初始化文件夹 ```bash 新建完成后,指定文件夹`MyBlog`目录下有: - `node_modules`: 依赖包 到此为止,本地的网站配置完成了。 输入`hexo g`生成静态网页,然后输入`hexo s`打开本地服务器 ```bash ![](https://s1.ax1x.com/2020/03/12/8VdlGD.png) ### 5. 注册Github账号创建个人仓库 接下来就去注册一个`github`账号,用来存放我们的网站。 打开[https://github.com/](https://github.com/),新建一个项目仓库`New repository`,如下所示: ![](https://s1.ax1x.com/2020/03/12/8VwrtK.png) 然后如下图所示,输入自己的项目名字,后面一定要加`.github.io`后缀,README初始化也要勾上 ![](https://s1.ax1x.com/2020/03/12/8VdoQJ.png) >要创建一个和你用户名相同的仓库,后面加`.github.io`,只有这样,将来要部署到`GitHub page`的时候,才会被识别,也就是`http://xxxx.github.io`,其中xxx就是你注册`GitHub`的用户名。例如我的:`http://LuckyZmj.github.io` ### 6. 生成SSH添加到GitHub 生成`SSH`添加到`GitHub`,连接`Github`与本地。 ```bash 用以下两条,检查一下你有没有输对 ```bash 然后创建`SSH`,一路回车 ```bash 这个时候它会告诉你已经生成了`.ssh`的文件夹。在`git bash`中输入 ```bash 将输出的内容复制到框中,点击确定保存。 打开`github`,在头像下面点击`settings`,再点击`SSH and GPG keys`,新建一个`SSH`,名字随便取一个都可以,把你的`id_rsa.pub`里面的信息复制进去。如图: ![](https://s1.ax1x.com/2020/03/12/8Vwnyj.png) 在`git bash`输入`ssh -T git@github.com`,如果如下图所示,出现你的用户名,那就成功了。 ```bash ### 7. 将hexo部署到GitHub ```bash `repository`修改为你自己的`github`项目地址即可,就是部署时,告诉工具,将生成网页通过`git`方式上传到你对应的链接仓库中。 这个时候需要先安装`deploy-git` ,也就是部署的命令,这样你才能用命令部署到`GitHub`。 ```bash 然后就可以部署提交到`github`,过一会儿就可以在`http://yourname.github.io` 这个网站看到你的博客了 ```bash >注意`deploy`时可能要你输入`username`和`password`。 ### 8. 写文章和发布文章 首先在博客根目录下右键打开`git bash here`,安装一个扩展`npm i hexo-deployer-git`。 ```bash 然后输入`hexo new post "article title"`,新建一篇文章。 ```bash 然后打开`E:\MyBlog\source\_posts`的目录,可以发现下面多了一个文件夹和一个`.md`文件,一个用来存放你的图片等数据,另一个就是你的文章文件。 另外推荐直接使用`有道云`编写`markdown`文章,不仅可以实时预览,还可以快捷的生成`markdown`语法格式,具体效果如下图所示。 ![有道云](https://s1.ax1x.com/2020/03/12/8VwItf.png) 编写完`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 #### 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 ### 2. 定制主题 这里推荐作者`洪卫`的[hexo-blog-fly](https://github.com/shw2018/hexo-blog-fly.git)博客主题,该主题是基于[hexo-theme-matery](https://github.com/blinkfox/hexo-theme-matery)优化的,需要把博客相关信息换成您自己的就可以部署了,极大简化了构建博客的工作量和复杂度。 #### 2.1 简单使用方法? #### 2.2 原主题特性: - 简单漂亮,文章内容美观易读 #### 2.3 新增加特性: #### 2.4 切换主题 如果想自己动手对[hexo-theme-matery](https://github.com/blinkfox/hexo-theme-matery)优化的话,可以修改Hexo根目录下的` _config.yml`的 `theme` 的值 ```bash `_config.yml` 文件的其它修改建议: - 请修改 `_config.yml` 的 `url` 的值为你的网站主 `URL`(如:`http://xxx.github.io`)。 #### 2.5 新建分类 categories 页 `categories` 页是用来展示所有分类的页面,如果在你的博客 `source` 目录下还没有 `categories/index.md` 文件,那么你就需要新建一个,命令如下: ```bash 编辑你刚刚新建的页面文件 `/source/categories/index.md`,至少需要以下内容: ```bash #### 2.6 新建标签 tags 页 `tags` 页是用来展示所有标签的页面,如果在你的博客 `source` 目录下还没有 `tags/index.md` 文件,那么你就需要新建一个,命令如下: ```bash 编辑你刚刚新建的页面文件 `/source/tags/index.md`,至少需要以下内容: ```bash #### 2.7 新建关于我 about 页 `about` 页是用来展示关于我和我的博客信息的页面,如果在你的博客 `source` 目录下还没有 `about/index.md` 文件,那么你就需要新建一个,命令如下: ```bash 编辑你刚刚新建的页面文件 `/source/about/index.md`,至少需要以下内容: ```bash #### 2.8 新建留言板 contact 页(可选的) `contact` 页是用来展示留言板信息的页面,前提是已经开启了第三方评论系统才能显示。如果在你的博客 `source` 目录下还没有 `contact/index.md` 文件,那么你就需要新建一个,命令如下: ```bash 编辑你刚刚新建的页面文件 `/source/contact/index.md`,至少需要以下内容: ```bash #### 2.9 新建友情链接 friends 页(可选的) `friends` 页是用来展示友情链接信息的页面,如果在你的博客 `source` 目录下还没有 `friends/index.md` 文件,那么你就需要新建一个,命令如下: ```bash 编辑你刚刚新建的页面文件 `/source/friends/index.md`,至少需要以下内容: ```bash 同时,在你的博客 `source` 目录下新建 `_data` 目录,在 `_data` 目录中新建 `friends.json` 文件,文件内容如下所示: ```bash #### 2.10 一级菜单导航配置 - 菜单导航名称可以是中文也可以是英文(如:`Index`或主页)? ```bash #### 2.11 二级菜单配置方法 如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作 ```bash 执行 `hexo clean` && `hexo g` 重新生成博客文件。 #### 2.12 代码高亮 由于 `Hexo` 自带的代码高亮主题显示不好看,所以主题中使用到了 `hexo-prism-plugin` 的 `Hexo` 插件来做代码高亮,安装命令如下: ```bash 然后,修改 `Hexo` 根目录下 `_config.yml` 文件中 `highlight.enable` 的值为 `false`,并新增 `prism` 插件相关的配置,主要配置如下: ```bash prism_plugin: >更多代码块优化详细内容请访问:http://luckyzmj.cn/posts/1b9a9e28.html #### 2.13 搜索 本主题中还使用到了 `hexo-generator-search` 的 `Hexo` 插件来做内容搜索,安装命令如下: ```bash 在 `Hexo` 根目录下的 `_config.yml` 文件中,新增以下的配置项: ```bash #### 2.14 文章字数统计插件(建议安装) 如果你想要在文章中显示文章字数、阅读时长信息,可以安装 `hexo-wordcount` 插件。 安装命令如下: ```bash 然后只需在本主题下的 `_config.yml` 文件中,将各个文章字数相关的配置激活即可: ```bash #### 2.15 添加emoji表情支持(可选的) 本主题新增了对`emoji`表情的支持,使用到了 `hexo-filter-github-emojis` 的 `Hexo` 插件来支持 `emoji`表情的生成,把对应的`markdown` `emoji`语法(::,例如:`:smile:`)转变成会跳跃的`emoji`表情,安装命令如下: ```bash 在 `Hexo` 根目录下的 `_config.yml` 文件中,新增以下的配置项: ```bash #### 2.16 添加 RSS 订阅支持(可选的) 本主题中还使用到了`hexo-generator-feed` ?的 `Hexo` 插件来做 `RSS`,安装命令如下: ```bash 在 `Hexo` 根目录下的` _config.yml` 文件中,新增以下的配置项: ```bash 执行 `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 其中,社交图标(如:`fa-github`)你可以在 `Font Awesome` 中搜索找到。以下是常用社交图标的标识,供你参考: - Facebook: fab fa-facebook 注意: 本主题中使用的 `Font Awesome` 版本为 5.11.0。 #### 2.21 修改打赏的二维码图片 在主题文件的 `source/medias/reward` 文件中,你可以替换成你的的微信和支付宝的打赏二维码图片。 #### 2.22 配置音乐播放器(可选的) 要支持音乐播放,在主题的 `_config.yml` 配置文件中激活`music`配置即可
提示: ? ? type可选song(歌曲),playlist(歌单),album(专辑),search(搜索关键字),artist(歌手) ? ? id获取示例: 浏览器打开网易云音乐,点击我喜欢的音乐歌单,地址栏有一串数字,playlist的id即为这串数字。 #### 2.23文章 Front-matter 介绍 `Front-matter` 选项中的所有内容均为非必填的。但我仍然建议至少填写 `title` 和 `date` 的值。 配置选项 | 默认值 |?? ?描述
```bash 最全示例 ```bash #### 2.24 自定制修改 在本主题的 `_config.yml` 中可以修改部分自定义信息,有以下几个部分: - 菜单 我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意,可以在主题中自定义修改,很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成,需要修改源代码才来完成。以下列出了可能对你有用的地方: 在主题文件的 `/source/css/matery.css` 文件中,搜索 `.bg-color` 来修改背景颜色: ```css @-webkit-keyframes rainbow { @keyframes rainbow { body { #### 2.25 修改 banner 图和文章特色图 你可以直接在 `/source/medias/banner` 文件夹中更换你喜欢的 `banner` 图片,主题代码中是每天动态切换一张,只需 7 张即可。如果你会 `JavaScript` 代码,可以修改成你自己喜欢切换逻辑,如:随机切换等,banner 切换的代码位置在 `/layout/_partial/bg-cover-content.ejs` 文件的 `<script></script>` 代码中: ```css 在 `/source/medias/featureimages` 文件夹中默认有 24 张特色图片,你可以再增加或者减少,并需要在 `_config.yml` 做同步修改。
在 `themes\Matery\layout\_partial\post-detail-toc.ejs`,修改内容如下: ```css #toc-content { |
|
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 | -2024/12/24 10:09:52- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |
数据统计 |