前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >通过github搭建个人博客2-博客个性化设置

通过github搭建个人博客2-博客个性化设置

作者头像
锦小年
发布2019-05-26 10:35:08
4770
发布2019-05-26 10:35:08
举报

摘要:上一节主要介绍了基本环境的配置,通过上一节的操作,已经能完成简单博客的搭建,但是还有很多不完美的地方,比如主页显示内容太多等。本节主要介绍如何个性化定制自己的blog,主要涉及到主题的安装以及设置,插入图片技巧,以及首页显示摘要等。

再次声明,本文中的所有操作都是基于windows操作系统,具体版本为win10 64位。

1. 主题的安装以及配置

hexo框架可以选用多种主题渲染,主题主页为:https://hexo.io/themes/ , 用户可以在该网站下载任意主题并进行个性化配置。我喜欢next这个主题,该小节以next主题为例。

(1) 下载主题:将next主题下载到博客目录下的themes里面的next文件夹中。

git clone https://github.com/theme-next/hexo-theme-next themes / next

完成后可以看到:

在这里插入图片描述
在这里插入图片描述

(2)启用主题:修改blog目录下的_config.yml 文件中的theme值改为next

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

(3) 主题设置

  • a. 选择Scheme Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 为你提供多种不同的外观。同时,几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持4种 Scheme,分别是:
    • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
    • Mist - Muse 的紧凑版本,整洁有序的单栏外观
    • Pisces - 双栏 Scheme,小家碧玉似的清新
    • Gemini - 左侧网站信息及目录,块+片段结构布局

    Scheme 的更改通过更改next目录下的_config.yml ,搜索 scheme 关键字。 你会看到有四行 scheme 的配置,将你需用启用的 scheme 前面注释 # 去除即可。

在这里插入图片描述
在这里插入图片描述

我选择的是第三个。

  • b. 将语言设置为中文 在next目录下的_config.yml中,进行如下修改
在这里插入图片描述
在这里插入图片描述
  • 设置其他信息,例如作者等
在这里插入图片描述
在这里插入图片描述

2. 插入图片技巧

因为hexo渲染是根据markdown文档渲染,在处理图片的时候会直接引用地址,需要做一些修改。

(1) 在blog文件夹的source目录下建立一个…/images文件夹,专门用来存放图片。而且这样设置之后的好处是既可以本地实时预览,部署网页又不需要修改,能够做到所见即所得。

在这里插入图片描述
在这里插入图片描述

b. markdown 编辑器使用typota(一款我觉得最优秀的markdown编辑器,下载地址:https://www.typora.io/),设置图片目录:编辑-图片工具-当插入图片时,目录选择a中建立的../images目录,此时文档的最上面会出现如下代码:

在这里插入图片描述
在这里插入图片描述

这样操作之后,由于hexo new blog所建立的文档都在_posts中,图片引用地址为:…/images/pic.jpg

,这样markdown编辑器刚好能实时预览。

(2)修改博客目录下的_config.yml文件,

在这里插入图片描述
在这里插入图片描述

也就是去掉前面的日期,这样渲染的过程中不会自动产生日期目录,文档目录为:

在这里插入图片描述
在这里插入图片描述

图中三步分刚好对应了github上的目录,public是主目录,第二个是每个博客网页的目录,图片都在images目录中,博客网页目录中只有一个index.HTML文件,刚好图片引用地址为:…/images/pic.jpg,与本地实时预览一样,做到网页与本地一致的效果。

hexo 新建的时候有post和page之分,唯一的区别是page会建立一个单独的文件夹,而post默认在_post文件夹下,上述图片插入方式只支持post,也是默认方式。

3. 主页显示摘要

默认情况下hexo博客(如本站)的首页显示的是完整的文章 – 而文章比较长的时候这无疑会带来很多不方便的地方。通过在每篇博客中添加:

做到主页仅仅显示摘要的效果,在 之前为主页显示的内容。之后为文章剩下的内容。复制该段代码一定选择粘贴文本。

在这里插入图片描述
在这里插入图片描述

4. 总结

经过上面的操作实例,个人博客基本构建完成,剩下的就是一些细节美化,参考文中提到的参考链接即可。

5. 效果图

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018年09月29日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 主题的安装以及配置
  • 2. 插入图片技巧
  • 3. 主页显示摘要
  • 4. 总结
  • 5. 效果图
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档