搭建好简洁的博客框架后,回看时发现,简洁之中透露着一丝丝简陋,好的,网上关于丰富hexo的文章也很多

记录一下自己的一些瞎操作。

在你的hexo目录下,你可以看到themes文件夹里有个默认的landscape主题,网上一般的建议是使用next主题

关于NexT的下载与使用见以下链接:http://theme-next.iissnan.com/

记得,这个next主题文件夹也应该放在themes文件夹里面,就是这样

然后一般的修改配置无非就是hexo本身配置文件上和对应主题的配置文件上修改。

具体的配置就看个人需求,一般google或者百度都有一大堆比较大众化的修改,小众化的就要自己看hexo和对应主题的文档来操作了。大同小异。

当博客的样式勉强看得过去的时候,我尝试使用markdown的语法写点东西试做提交,哈哈哈哈,发现markdown确实是个好玩的东西,比如我写标题时  #后面没有空格,马上就翻车了

然后就是在markdown里插入本地图片的操作 :hexo生成博文插入图片

首先 把主页配置文件_config.yml 里的post_asset_folder:这个选项设置为true;

然后在你的hexo目录下 操作一下以下的命令 npm install hexo-asset-image --save

上述操作成功后,当你使用 hexo n "xxxx"来生成md博文时,/source/_posts文件夹内除了xxxx.md文件还有一个与之同名的文件夹(就是xxxx)

这时如果你想在 xxxx.md 中使用 pic.jpg 图片时,只要将这张图片放到 xxxx文件夹里,然后在markdown中使用     ![](xxxx/pic.jpg) 语句就阔以了。

好像生成的 .md 博文就是 markdown的缩写?

关于博文的排版问题,你会发现默认下每篇博文都是全部内容显示出来的,这些都可以设置的,“关于只显示部分内容:这个只要在文章中加上<!--more--> 标记 ,该标记以后部分就不在显示了,只有展开全部才显示,这是hexo定义的。 ”  https://www.jianshu.com/p/393d067dba8d

还有以下其他的什么设置圆框头像,旋转头像,背景动态线条,总之一般你在网上能看到的骚操作,百度的话都会有代码或者插件的。这些就看个人所需了。

重点说一下关于模板样式的修改问题,举个栗子,在     ....\themes\next\source\css\_common\components\post 下有很多关于样式的文件,你可以按需修改

因为可能有些修改比较小众,在网上一时难以找到你要的答案,这时你就要发挥主观能动性了,花在找来找去的时间说不定自己早就可以解决问题了。

比如,我看到博客标题与正文的间隔太多,我想修改一下

就是空色框框内的间隔缩小一点。

这时不妨用用开发者工具

这时你可以看到要修改的是 .post-meta 这个类里面的内容,

改一改,margin的参数,四个参数分别代表的是 上 右 下 左 的距离,关于margin和 padding以及其他css,自行学习。

修改完的效果如下。

还有一点就是,每次修改完后想预览一下效果,直接使用 hexo g 后使用 hexo  s 进行本地的预览就好,不用每次都 hexo d -g ,毕竟后者没有前者的反应那么快。

使用Hexo搭建一个简单的博客(一)的更多相关文章

  1. 使用Hexo搭建一个简单的博客(二)

    昨天想着用Hexo和github搭一个自己简单的博客,记录一下自己踩过的坑,具体的流程就不重复了,主要参考了一下几篇文章 GitHub+Hexo 搭建个人网站详细教程 使用Hexo+Github一步步 ...

  2. 用express搭建一个简单的博客系统

    转自:https://blog.csdn.net/qq_29721837/article/details/62055603 Express 简介 Express 是一个简洁而灵活的 node.js W ...

  3. 利用Github和Hexo搭建独立的个人博客--基础篇

    利用Github和Hexo搭建独立的个人博客--基础篇 摘要:本文主要参考了使用hexo和Github上创建自己的博客.如何搭建一个独立博客--简明Github Pages与Hexo教程和使用GitH ...

  4. Express入门教程:一个简单的博客

    来自:  http://ourjs.com/detail/56b2a6f088feaf2d031d2468 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, ...

  5. Django 学习笔记之六 建立一个简单的博客应用程序

    最近在学习django时建立了一个简单的博客应用程序,现在把简单的步骤说一下.本人的用的版本是python 2.7.3和django 1.10.3,Windows10系统 1.首先通过命令建立项目和a ...

  6. Django1.8教程——从零开始搭建一个完整django博客(一)

    第一个Django项目将是一个完整的博客网站.它和我们博客园使用的博客别无二致,一样有分类.标签.归档.查询等功能.如果你对Django感兴趣的话,这是一个绝好的机会.该教程将和你一起,从零开始,搭建 ...

  7. 使用hexo搭建属于自己的博客

    如果你喜欢拥有自己的博客域名,如果你喜欢折腾,可以先点击luckykun.com,看看效果,再选择要不要进来看看--- 之前一直都在博客园写博客,不过最近在逛园子的时候不小心看到了hexo,简直有种相 ...

  8. Hexo搭建 github.io 静态博客使用指南

    What? Hexo 是一个快速.简洁且高效的博客框架.可以使用markdown 解析成文章,在几秒内,即可利用靓丽的主题生成静态网页. Why? 笔记需要整理 How? github 创建 char ...

  9. 使用Hugo,只需5分钟,轻松搭建一个自己的博客

    前面跟大家介绍过hexo这款静态博客系统,功能强大,基本能满足博客的各种需求.今天,我再跟大家介绍一款优秀的静态博客系统,那就是Hugo. Hugo是由Go语言实现的静态网站生成器.简单.易用.高效. ...

随机推荐

  1. Opencv改变图像亮度和对比度以及优化

    https://blog.csdn.net/u013139259/article/details/52145377 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.cs ...

  2. camera按键采集图像及waitKey的用法(转)

    源: camera按键采集图像及waitKey的用法

  3. xtrabackup 对pxc节点进行备份恢复

    xtrabackup 对pxc节点进行备份恢复 全量备份一个节点的数据,当节点挂掉时,使用备份恢复到最近状态,再启动节点加入集群. 备份 xtrabackup 命令小解释: --defaults-fi ...

  4. Python数据类型的显式转换

    数据类型的显示转换,也称为数据类型的强制类型转换,是通过Python的内建函数来实现的类型转换. 显式转换的多种类型: int(x [,base]) ⇒ 将x转换为一个十进制的整数 long(x [, ...

  5. linux上的文件服务

    主要的文件服务vsftp.Samba.NFS对比 服务器名称 用户客户端平台 使用范围 服务端口 VSFTP Windows/linux/unix/macOS等 发布网站,文件共享 Tcp/21 Sa ...

  6. js通过 URL下载文件

    页面上一个button,点击之后触发一个function去请求数据,返回 pdf/epub 的URL,然后下载这个文件. 本来是直接用 a 写的,href里放资源地址,target设为'_blank' ...

  7. ubuntu----VMware 鼠标自由切换问题及主机虚拟机共享剪切板问题

    VMware 安装了Ubuntu之后,在正常安装了VMware tools后,仍然不能正常的在Ubuntu与物理机之间自由的切换,每次都要按下ctrl+Alt,而且鼠标指针会经常性的离奇的失灵 解决方 ...

  8. Codeforces 37D Lesson Timetable - 组合数学 - 动态规划

    题目传送门 神奇的门I 神奇的门II 题目大意 有$n$组学生要上课2次课,有$m$个教室,编号为$1$到$m$.要确定有多少种不同的安排上课的教室的方案(每组学生都是本质不同的),使得它们满足: 每 ...

  9. 2018年12月7日 字符串格式化2 format与函数1

    tp7="i am \033[44;1m %(name)-25.6s\033[0m"%{"name":"sxj2343333"} print ...

  10. 从Git上导入Maven 项目到Eclipse

    Note: 经验之谈,操作过程中有不懂的地方可以留言问. Step: Open the Eclipse: --1.File>>Import>>Git:Project from ...