admin管理员组文章数量:1602102
文章比较长,需要侧边栏目录的,可以点击我的个人博客地址:http://zwd596257180.gitee.io/blog
如果有什么问题想问的,请在 CSDN 上留言。
准备环境
- 安装 Node
- 安装 Git
- 注册码云
- 安装 Hexo
npm install hexo-cli -g
- 出现下图表示安装成功:
搭建本地个人博客
初始化 hexo
- 新建一个空白文件夹(下文提到的“项目根目录”是指你新建的文件夹的位置)用于存放 hexo 资源。在空白文件夹里面打开 Git Bash ,输入下列命令行进行初始化,初始化成功后会在文件夹生成如下图的文件。
hexo init
生成静态页面
hexo g
启动本地服务
hexo s
- 关闭本地服务器在 Git Bash 界面按 Ctrl+C, 在浏览器输入:http://localhost:4000 查看
美化个人博客
博客主题设置
克隆主题
- 在项目根目录下的 themes 文件中,打开 Git Bash ,用命令行克隆下新的主题。我这里用的 Next 主题,需要其他主题的自己百度找。
git clone https://github/theme-next/hexo-theme-next.git
配置主题
- 用文本的方式打开项目根目录下的 _config.yml 配置文件,找到 theme 把原来默认的
landscape主题名字,改成刚刚克隆的主题名字(主题名字为上图中文件夹的名字)。
测试主题
-
重新回到项目根目录下,打开 Git Bath ,用命令行启动服务器。在浏览器访问 http://localhost:4000
发布文章
- **方法一:**在项目根目录下,打开 Git Bash ,执行新建命令,然后 hexo 会自动在指定目录下生成对应文件,如下图所示。然后找到新建好的文件,打开即可进行编辑。
hexo new "此处输入文章名字"
- **方法二:**可以直接把已经准备的 md 格式的文章复制到 项目名称 /source/_posts 目录下,然后打开文件,在文件头加入 front-matter 部分,title 表示文章标题,date 表示发布时间。如图所示,图片上用到的其他参数,后面会介绍到。
- 重要的事情说三遍!!!
- front-matte 书写的时候要注意,冒号后面要跟一个空格号。
- front-matte 书写的时候要注意,冒号后面要跟一个空格号。
- front-matte 书写的时候要注意,冒号后面要跟一个空格号。
---
title: a
date: 2019-04-14 23:10:17
---
- 准备好 md 格式文件后,使用下面命令生成网站静态文件到默认设置的 public 文件夹,然后再启动本地服务器。
hexo g
主题风格设置
- 打开主题文件夹下的 _config.yml 配置文件(注意:这里要区别,不是項目根目录,主题文件夹的路径为:新建空白文件夹名称/themes/主题文件夹名称)。通过查找功能找到 Schemes 模块,修改为 Gemini 风格。如果喜欢其他风格可以自己修改。如下图所示:
- 刷新页面可以看到新风格的界面如下图所示:
博客左侧栏设置
- 在上面的网站界面,可以发现网站的文字是英文,只要修改一下语言模式即可。打开根目录文件夹下的 _config.yml 配置文件。找到 language,设置为 zh-CN。标题等其他参数的设置如下。可以对照效果图的具体位置,根据自己的实际需求进行修改。(注意:修改了项目根目录下的 _config.yml配置文件,需要重启部署项目后才能生效)
分类设置
添加分类列表
- 在项目根目录下,执行下面的命令行,新建分类页面,然后会在项目根目录下的 source 文件夹中新建一个 categories 文件夹。
hexo new page categories
- 打开 categories 文件夹中的 index.md 文件,添加 type 字段,设置为 “categories”。如下图所示。
- 接着到主题文件夹下的 _config.yml 配置文件下,找到 menu 模块,把 categories 的注释给去掉。如下图所示。
- 刷新页面(如果刷新没效果,可以重启服务),可以在页面左侧栏上看到多了一个“分类”列表。
如何将文章添加到对应分类?
- 文章发布前,在 front-matter 部分,多写一个 categories 字段,然后参数写上类别的名称,保存后重启服务,在网页上点击“分类”,可以看到分类下已经生成了刚刚设置的类别,并把刚刚发布的文章归类在此类别下。如下图所示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9gWMcfIn-1571454072700)(http://zwd.yyzheng/hexo_manong_blog/9c256cae759cdcffs.png)]
标签设置
- 方法跟分类设置一样,所以不再赘述介绍。
- 但是需要补充一点, front-matter 中字段有多个参数的时候,可以使用如下图的写法。
Hexo 博客添加站内搜索
- NexT主题支持集成 Swiftype、 微搜索、Local Search 和 Algolia。下面介绍 Local Search 的安装吧。注意:安装的时候要是项目根目录下安装。
- 安装 hexo-generator-search
npm install hexo-generator-search --save
- 安装 hexo-generator-searchdb
npm install hexo-generator-searchdb --save
- 在项目根目录下的 _config.yml 配置文件的文末添加下面这段代码。
search:
path: search.xml
field: post
format: html
limit: 10000
- 编辑主题文件夹的 _config.yml 配置文件,设置 Local searchenable 为 ture。
- 重启服务,效果图如下:
博客头像设置
添加博客头像
- 打开主题文件夹下的 _config.yml 配置文件,通过查找功能找到 avatar,然后把一个在线的头像图片地址(百度图片中直接复制链接即可),作为 url 的参数。如下图所示:
- 然后刷新页面,可以看到网站上已经显示了相应的头像了:
设置头像圆角并旋转打开
- 打开主题文件夹的 source\css_common\components\sidebar 目录下的 sidebar-author.styl 文件,然后把下面的代码添加进去即可。
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
- 效果图如下:
右上角 fork me 设置
- 在 GitHub Corners 上选择你喜欢的挂饰,复制方框内的代码。
- 打开主题文件夹下的 layout 文件夹,用记事本的方式打开 _layout.swig,把刚刚复制的代码放到
下面,并把 href 的参数,修改为自己的 github 链接(放自己要跳转的网址即可)。
- 重启服务器,查看效果图:
网页背景设置
动态背景设置
- 打开主题文件夹下的 layout 文件夹,用文本的方式打开 _layout.swig 文件,在文末加上如下的代码:
<!-- 动态背景 -->
<script type="text/javascript" src=
版权声明:本文标题:码云 + Hexo 搭建个人博客 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1728395319a1156958.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论