文档章节

hexo干货系列:(三)hexo的Jacman主题优化

嘟嘟MD
 嘟嘟MD
发布于 2016/03/20 16:03
字数 901
阅读 153
收藏 0

正文


首页文章展示摘要


该主题首页文章列表默认是全部展开,感觉不好,我关闭掉了,只展示少量摘要。
修改\themes\jacman下面_config.yml中的expand改成false即可

index:
  expand: false           ## default is unexpanding,so you can only see the short description of each post.
  excerpt_link: Read More  

主题背景色修改


我给主题添加了个背景图片,看清来很文艺
修改\themes\jacman\source\css\_base下的public.styl,找到body,添加background-image url('/img/bg.jpg'),图片放在\themes\jacman\source\img即可

body
  background color-background
  background-image url('/img/bg.jpg')
  font-family font-default
  font-size font-size
  color color-font
  line-height line-height
  min-height: 100vh
  display: -webkit-flex
  display: flex
  -webkit-flex-direction: column
  flex-direction: column

文章内容选中颜色修改


内容选中默认是蓝色的,偶然看到推酷网站上面是绿色的,很喜欢就打算把自己博客也改改。 打开\themes\jacman\source\css\_partial下面的index.styl在最下面添加如下代码,需要配置选中背景色和字体颜色

::selection
    background #33a183
    color #fff
::-moz-selection
    background #33a183
    color #fff
::-webkit-selection
    background #33a183
    color #fff

重新部署一下点开一篇文章查看下效果,如图

顶部头像修改


默认的黑桃感觉不好看,我自己找了张图片替代,并且图片弄成圆形效果
修改\themes\jacman下_config.yml中的imglogo的src属性,我这里使用gif会动的图

imglogo:
  enable: true             ## display image logo true/false.
  src: img/dudu.gif        ## `.svg` and `.png` are recommended,please put image into the theme folder `/jacman/source/img`.
favicon: img/favicon.ico   ## size:32px*32px,`.ico` is recommended,please put image into the theme folder `/jacman/source/img`.     
apple_icon: img/jacman.jpg ## size:114px*114px,please put image into the theme folder `/jacman/source/img`.
author_img: img/author.jpg ## size:220px*220px.display author avatar picture.if don't want to display,please don't set this.
banner_img: #img/banner.jpg ## size:1920px*200px+. Banner Picture

这时候头像还是正方形的。修改\themes\jacman\source\css\_partial下的header.styl,在#imglogo这个下面新增border-radius 100%属性

#imglogo
  float left
  width 4em
  height 4em
  @media mini
    width @width+1
  @media tablet
    width @width+1.5
  img
    width 4em
    border-radius 100%
    @media mini
      width @width+1.5
    @media tablet
      width @width+2

开启多说评论


修改\themes\jacman_config.yml中的duoshuo_shortname属性,

#### Comment
duoshuo_shortname: rlovep ## e.g. wuchong   your duoshuo short name.
disqus_shortname:    ## e.g. wuchong   your disqus short name.

关于获取shoutname,大家注意了,shoutname不是你登陆的用户昵称,而是应该去多说首页点击我要安装,注册你的多说二级域名。去掉 .duoshuo.com 部分 就是你的shoutname,下图中tengj就是我的shoutname

配置文章模板


我们可以修改根目录下\scaffolds\post.md文件,配置好基本的信息,比如:

title: {{ title }}
date: {{ date }}
categories: 
tags: 
---

配置RSS


RSS是个好东西,可以让别人订阅你,这里先只介绍如何安装,以后专门写篇介绍RSS一些资料。
安装步骤如下:

  1. 安装插件
npm install hexo-generator-feed --save
  1. 根目录下面_config.yml配置文件中添加如下
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  1. themes\jacman下的_config.yml默认会有下面代码,如果你的没有就添加
#### RSS 
rss: /atom.xml ## RSS address.
  1. 编译部署
hexo deploy -g

5.查看是否成功,输入你的博客域名,后面加上/atom.xml,比如我的是http://tengj.top/atom.xml 如果打开有下面数据就表示成功。

总结


暂时先优化这么多,已经感觉很不错了。我们关心的应该是内容,而不是死命折腾博客本身,总觉得它会被我们玩坏。冏。


最后,厚颜无耻的求打赏..如果您认为博主的教程帮助到了你~ 你懂的o(^▽^)o (/▽\=)  

© 著作权归作者所有

嘟嘟MD
粉丝 25
博文 26
码字总数 37858
作品 0
福州
程序员
私信 提问
加载中

评论(1)

蓝色雨滴
蓝色雨滴
谢谢楼主的分享,按照您的教程,已经成功地创建了自己的独立技术博客,但是在阅读这个帖子时,遇到了下面的问题,描述为:在完成所有相关设置并重新生成静态文件,采用hexo s命令发现在本地能够正常显示,但是调用hexo g进行部署时,出现了下面的问题:

FATAL Fatal: TaskCanceledException encountered.
bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': Invalid argument

Error: Fatal: TaskCanceledException encountered.
bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': Invalid argument

不知道楼主之前是否遇到过类似的问题,怎么样才能够解决这个问题呢?
如何搭建一个独立博客——简明Github Pages与Hexo教程

重要更新 由于我在2015-07-26换了 mac ,博客平台从 hexo 转移 jekyll. 为什么用 keyll?因为用keyll搭建博客真的好简单.比 hexo 简单多了. 接下来,我将用十步教你搭建博客. 继续用我的教程一直...

CasparLi
2015/09/21
473
1
基于github pages与hexo搭建一个独立博客

原文地址:http://lawlietfans.github.io/blog/2015/11/09/using-hexo-with-jekyll/ 介绍基于github pages搭建独立博客的博文已经有很多了,而本文旨在帮助读者了解基于github pages与hexo搭...

realsa
2015/11/08
482
0
slim framework and github pages

composer require slim/slim:^3.0 新建slim文件夹再执行以上命令,在此之前当然得安装好comper。(推荐:COMPOSER設計原理與基本用法 用git bash或者cmd都可以,新建个index.php cmd: echo...

phala
2015/12/30
79
0
开发工具总结(13)之Hexo制作文档并发布到GitHub

在线文档制作工具系列篇 ↓: 第一篇:GitBook制作文档并发布到GitHub 第二篇:Hexo制作文档并发布到GitHub 第三篇:Jekyll制作文档并发布到GitHub 第四篇:Vuepress制作文档并发布到GitHub ...

AWeiLoveAndroid
07/05
0
0
Hexo搭建Github-Pages博客填坑教程

目录: 1.安装Hexo 2.部署Hexo 3.Hexo命令 4.一些报错处理 5.博客管理 6.插件(RSS、Sitemap) 7.评论设置 8.404页面 9.统计 10.更新 11.总结 12.参考引用 13.搭建博客相关网站 简述 本文主要...

ihtcboy
2015/09/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

可能是国内第一篇全面解读 Java 现状及趋势的文章

作者 | 张晓楠 Dragonwell JDK 最新版本 8.1.1-GA 发布,包括全新特性和更新! 导读:InfoQ 发布《2019 中国 Java 发展趋势报告》,反映 Java 在中国发展的独特性,同时也希望大家对 Java 有...

阿里云官方博客
20分钟前
5
0
Spring Boot 2.x基础教程:Swagger静态文档的生成

前言 通过之前的两篇关于Swagger入门以及具体使用细节的介绍之后,我们已经能够轻松地为Spring MVC的Web项目自动构建出API文档了。如果您还不熟悉这块,可以先阅读: Spring Boot 2.x基础教程...

程序猿DD
24分钟前
4
0
《毅力》读书笔记

1.确信你全身心地投入 2.准备好为目标进行艰难的跋涉 3.通过减少需要使用毅力的情形,为将来的挑战做好准备 4.尽可能具体细致地确定你的目标和实现目标的过程 5.把挑战分解为小而易于管理的小...

lingch
25分钟前
3
0
zk中快速选举FastLeaderElection实现

选举涉及概念 服务器状态 投票 如何选择投票? 协议 选举 如何进行选举? epoch 发送者 接收者 发送队列 接收队列 服务器状态 public enum ServerState { LOOKING,寻找Leader状态,当服务处于...

writeademo
28分钟前
3
0
教你玩转Linux—磁盘管理

Linux磁盘管理好坏直接关系到整个系统的性能问题,Linux磁盘管理常用三个命令为df、du和fdisk。 df df命令参数功能:检查文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了多少...

Linux就该这么学
31分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部