2017年最新基于hexo搭建个人免费博客——自定义页面样式二

2017年最新基于hexo搭建个人免费博客——自定义页面样式

前言

本篇文章继续讲解一些hexo下next主题博客样式的修改。主要内容为修改首页文章摘要样式,文章详情样式,以及文章阅读次数的统计深入讲解,酷炫的博客背景,在首页菜单里添加的独立的标签页,文章结尾的模版样式修改。暂时想到了这么多,欢迎大家提出新的东西,等后面有空了再讲新东西。

首页文章摘要样式修改

准备

假设看这篇文章的人是没有前端样式调试基础的,建议去看我上一篇文章——,看完后再继续看这篇。

传送门:2017年最新基于hexo搭建个人免费博客——自定义页面样式一 http://www.cduyzh.com/hexo-settings-3/

查看对应样式

查看对应样式

通过浏览器的开发者工具可以查看到首页文章摘要对应的CSS
可以看到header标签内为文章的头部的样式,大家可以进行一些修改,但是基本没什么需要改动的,大家可以自己DIY,

给文章首页摘要添加阴影效果

查看对应样式

大家看下箭头,修改对应的CSS样式,进行重写覆盖,修改的文件路径如下(以我自己的为例):

D:\hexo\blog\themes\next\source\css\_custom\custom.styl

修改代码如下

// Custom styles.
//首页文章阴影样式
.post {
    margin-top: 60px;
    margin-bottom: 60px;
    padding: 25px;
    -webkit-box-shadow: 0 0 14px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 14px rgba(202, 203, 204, .5);
}

阅读文章按钮样式修改

阅读文章按钮样式修改

主要为三个CSS样式的修改

.post-button .btn
.post-button .btn a
.btn:hover, .post-button .btn:hover
阅读文章按钮样式修改

最后一个为伪类,有时候查找元素的时候不能第一时间看到,多抓取几次。

也可以自己在本地编辑器测试修改.btn:hover, .post-button .btn:hover样式下的属性,测试显示效果就行。
默认主题下把鼠标移入按钮时的样式中,按钮下方有个阴影,是主题自带的,如果不想要可以添加对应的CSS样式
border:none来取消这效果,然后调整一下圆角值,居中设置,还有颜色的变化,大家自己参考下我之前发的样式表,或自己测试。

文章详情样式修改

文章详情头部样式

这个样式的修改和前面首页那个的样式基本一致,所以此处跳过,但是说一点


文章详情头部样式

图中框内的图标元素更改CSS样式是无法更改的,我更改了字数统计和阅读市场的ICON,具体做法大家可以看我以前写过的一篇文章,要在源码中更改CSS的值。

2017年最新基于hexo搭建个人免费博客——基本设置和了解http://www.cduyzh.com/hexo-settings-2/

文章相应底部样式修改

文章相应底部样式修改

最大的红框部分的内容都不是我编辑的文章里的,都是我更改了源代码加入的DIV样式标签形成的效果,当然还可以在每一篇文章最后加入对应的代码也可以,但是为了麻烦每次来粘贴所以我就没去这样做

思路

修改文章模板文件
哪个是文章主要内容的模板文件,对应的路径themes\next\layout\_macro\post.swig
文章底部的代码位置如下:

         {{ content.substring(0, theme.auto_excerpt.length) }}
          {% if content.length > theme.auto_excerpt.length %}...{% endif %}

          <div class="post-more-link text-center">
            <a class="btn" href="{{ url_for(post.path) }}{% if theme.scroll_to_more %}#more{% endif %}" rel="contents">
              {{ __('post.read_more') }} »
            </a>
          </div>
        {% else %}
          {% if post.type === 'picture' %}
            <a href="{{ url_for(post.path) }}">{{ post.content }}</a>
          {% else %}
            {{ post.content }}
          {% endif %}
        {% endif %}
      {% else %}
        {{ post.content }}
        
### 编辑区域
        
      {% endif  %}

那个打赏功能是主题自带的一个参数配置,大家可以去next主题官方文档上看。

文章底部的横线样式修改

文章底部的横线样式修改

小红框里面的一条线,有些人觉得想换样式,换颜色或直接去掉。
直接在.post-nav下加入一个样式

.post-nav {
    border: none;
}

文章阅读次数的统计深入讲解

对比分析方法

文章详情头部样式

再次用下这张图,我这里面的阅读次数是通过leanCloud,来实现文章阅读量统计的,next主题还自带了一个不蒜子的统计参数配置,相信大家用过了,在主题的配置文件里有如下代码:

# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 访问用户:
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 访问次数:
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: false
  page_pv_header: <i class="fa fa-file-o"></i>&nbsp点击量 
  page_pv_footer: 次

我设置page_pv为false因为我打算用leanCloud来实现,因为用不蒜子这个来统计是没问题,但是它说了 # custom pv span for one page only意思是只显示在文章相应这里,你在首页是看不到阅读次数统计的,对用户体验来说十分不好,所以打算用leanCloud,如果觉得首页不展示阅读次数什么的无所谓的,就可以用next主题的不蒜子插件,具体的查看官方文档上面有写方法。


这里讲下官方文档上没有详细说明的leanCloud,来实现文章阅读量统计的方法

leanCloud来实现阅读统计

我现在版本的next主题是集成了这个插件的,并且给出了对应的参数配置

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: TxBSdzFliqxOpec29xEd8pO5-gzGzoHsz
  app_key: 5rH911Nhs9V7AWFjEYqe8Bz7

过程是:
1.注册leancloud账户并完成验证后登录leanCloud的,创建应用并配置相关操作
2.获取对应的AppID和AppKey
3.配置相应参数完成阅读文章的数量的统计

注册账户

过程省略...没啥好说的

创建一个应用

leanCloud来实现阅读统计

进入应用创建Class

leanCloud来实现阅读统计

我之前已经创建好了一个Class名为Counter,创建成功就会出来了。

获取AppID和AppKey

leanCloud来实现阅读统计

设置主题配置文件

设置主题配置文件_config.yml相关字段,实现阅读数量的统计
添加以下字段

leancloud_visitors:
  enable: true
  app_id: #你的App ID
  app_key: #你的的App Key

完成配置并重新编译。

通过在本地服务器测试是看不到阅读次数的统计的,所以要发布到网上查看才行。


酷炫的博客背景

添加背景特效

背景的几何线条是采用的nest效果,一个基于html5
canvas绘制的网页背景效果,非常赞!来自github的开源项目canvas-nest 特性

    不依赖任何框架或者内库,比如不依赖jQuery,使用原生的javascript。
    非常小,只有1.66kb,如果开启gzip,可以更小。
    非常容易实现,配置简单,即使你不是web开发者,也能简单搞定。

使用非常简单

color: 线条颜色, 默认: ‘0,0,0’ ;三个数字分别为(R,G,B),注意用,分割
opacity: 线条透明度(0~1), 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1

添加修改代码

next/layout/_layout.swig,在body标签之前添加如下代码:

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

打开next/_config.yml,添加以下代码:

# Canvas-nest
canvas_nest: true

如果是最新的next主题是集成了这段代码的,如果没手动添加,有就设置为true

完成

重新编译配置后,在本地测试就能看到效果了。

在首页菜单里添加的独立的标签页

标题的意思大概是文章列表实现
效果如图:

文章列表实现

实现过程思想

1、修改HEXO POST模板,添加categories。以后的文章将会以此作为模板新增。
2、新增一文章,并修改分类属性。分类属性如果被设置,在HEXO编译会生成对应分类目录
3、修改主题配置文件(config.yml),添加MENU分类字段 ,导航栏显示分类链接
4、假定为中文网站,修改主题目录下的语言配置文件(zh-Hans.yml) .导航栏链接显示中文

修改HEXO POST模板

添加categories
在你的HEXO根目录下,找到文件夹scaffolds,此文件夹下定义创建文章的基本模型,你可以修改此模板
实现每次进行HEXO NEW 文章名,文章会以您的模板进行对应配置属性创建。这里我们主要是新增categories
字段,让每次新增文章都会打上此属性字段。
scaffolds里有三个文件分别对应草稿、页面、文章,建议都加上如下代码:

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

新增一文章,并修改分类属性
新建文章后如: hexo new 你的文章名,并打开您的文章,在categories写上你的分类名字,
此操作后并保存文档,在你进行hexo g编译的时候会在你的PUBLIC目录下的 categories下建立以你分类名字命名的
文件夹,
以后的链接将定向到此文件夹。(本文的测试分类名为:life 中文名生活)

修改主题配置文件添加MENU分类字段

修改代码大概如下,参考下就行了。

menu:
  home: /
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags
  #commonweal: /404.html
  #sitemap: /sitemap.xml
  life: /categories/life
  technology: /categories/technology

修改主题目录下的语言配置文件

路径为themes\next\languages 文件为zh-Hans.yml
修改代码如下

menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404
  life: 生活
  technology: 技术

完成

重新编译预览下效果。

总结

这篇写了不少小技巧,都是平时总结的,当然还有一些没讲到的点,如果有疑问的可以在下面评论说,我会在后面的文章提及。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容