Hexo主题更改以及小功能的添加
栏目: JavaScript · 发布时间: 6年前
内容简介:之前搭建的博客基本功能已经实现了,现在就折腾着好好维护一下我的博客了,于是参考着别人的博客添加一些小功能,并且整理了下来。新搭建的博客的默认主题都是具体的使用可以参考官方文档
之前搭建的博客基本功能已经实现了,现在就折腾着好好维护一下我的博客了,于是参考着别人的博客添加一些小功能,并且整理了下来。
新搭建的博客的默认主题都是 landscape
,我的主题是基于 yelee
风格的,作者也是在 hexo-theme-yilia 的基础上进行的修改。
具体的使用可以参考官方文档
首先给大家介绍下添加的功能吧
主题更改
下载主题
git clone https://github.com/MOxFIVE/hexo-theme-yelee.git 复制代码
修改主题
打开项目目录下的_config.yml文件
主题更改,注意的是在yelee前面有个空格
theme: yelee 复制代码
语言更换
打开项目目录下的_config.yml文件
# Site language: zh-Hans 复制代码
目前可用语言:
en | English | 英语 |
---|---|---|
zh-Hans | Chinese (Simplified) | 大陆简体 |
zh-Hant-HK | Chinese (Traditional) | 港澳繁體 |
zh-Hant-TW | Chinese (Traditional) | 台灣正體 |
个人头像
默认头像存储于 yelee/source/img/avatar.png
配置中对应填写 /img/avatar.png
,可替换图片或指定新地址
themes/yelee/_config.yml
背景参数:
avatar: /img/avatar.png 复制代码
文章摘要
目前主题可使用两种方式在首页显示文章摘要而不是全文。
方法一: <!-- more -->
title: Hello World date: 2015-12-03 00:00:00 --- <Excerpt in index | 首页摘要> <!-- more --> <The rest of contents | 余下全文> 复制代码
<!-- more -->
之前最好不要有空格等字符;
方法二: description
inFront-matter
title: Hello World date: 2015-12-03 00:00:00 description: "Welcome to Hexo! This is your very first post." --- <Contents> 复制代码
通过 description
添加的摘要只能为纯文本;
description
中的内容加引号,可以避免一些程序错误,例如当内容里包含英文冒号时。
主菜单
按下面格式添加边栏菜单,菜单前的 #
表示注释掉该行,即隐藏掉该条目
themes/yelee/_config.yml
背景参数:
menu: 主页: / 所有文章: /archives/ #随笔: /tags/随笔 标签云: /tags/ 关于我: /about/ 复制代码
标签云
使用 Hexo 命令新建一个名为 tags
的页面即可
hexo new page tags 复制代码
该页面标题可以在文件 \hexo\source\tags\index.md
中修改
同一篇文章设置多个分类后的问题 issue#4
关于我的页面
使用 Hexo 命令新建一个名为 about
的页面即可
hexo new page about 复制代码
该页面内容在文件 \hexo\source\about\index.md
中修改
本地搜索
使用搜索需先安装对应插件,用于生成索引数据
插件主页: hexo-generator-search
#on: true
改为 on: true
即为启用搜索
search: #on: true onload: false 复制代码
onload: true
: 索引数据 search.xml
随页面一起加载 [效率优先]
onload: false
: 当激活搜索框时再下载索引数据 `[按需加载]
站点小图标
若将图标存储于 yelee/source/favicon.png
则配置中对应填写 /favicon.png
,另外填网络图片的地址也可
themes/yelee/_config.yml
背景参数:
favicon: /favicon.png 复制代码
社交图标
去掉设置前的 #
再填写链接即可
themes/yelee/_config.yml
背景参数:
subnav: Email: "mailto:1287530995@qq.com" #新浪微博: "sina weibo" GitHub: https://github.com/nullcxy #V2EX: "#" #RSS: "/atom.xml" 复制代码
设置 Email 时保留 mailto:
可考虑加密邮件地址ctrlq.org/encode/
使用 RSS 需先安装对应插件 github.com/hexojs/hexo…
网站成立年份
themes/yelee/_config.yml
背景参数:
since: 2016 复制代码
默认为 2016
,若填入年份小于当前年份,则显示为 2015-2016
类似的格式
背景图片
背景图文件所在路径:
/yelee/source/background/ 复制代码
themes/yelee/_config.yml
背景参数:
background_image: 5 复制代码
- 默认值为5,可按需修改
- "5": 设置
/yelee/source/background/
文件夹中bg-1.jpg
到bg-5.jpg
这5张图片为背景 - "0": 取消网页背景图,使用淳朴的灰白主题
文章目录
配置中启用目录
themes/yelee/_config.yml
背景参数:
toc: on: true 复制代码
指定文章中关闭目录 toc: false
title: Hello World date: 2015-08-19 00:00:00 toc: false --- 复制代码
版权
配置中启用目录
themes/yelee/_config.yml
背景参数:
copyright: true 复制代码
指定文章中关闭目录 original: false
title: Hello World date: 2015-08-19 00:00:00 original: false --- 复制代码
原始链接设置
修改站点配置 文件中 url
的值为你的网站域名
url: http://MOxFIVE.xyz 复制代码
左边主菜单鸟屋
themes/yelee/_config.yml
背景参数:
左边栏鸟屋
关闭鸟屋
# 边栏多标签切换 tagcloud: false 复制代码
友情链接
## 编辑友链 friends: Hexo: https://hexo.io GitHub: https://pages.github.com/ MOxFIVE: http://moxfive.xyz/ ## 关闭友链 friends: false 复制代码
关于我
# 是否开启“关于我”。 aboutme: 专注于前端 # 关闭“关于我” aboutme: false 复制代码
评论
来必力评论
介绍
yelee原生是支持Disqus、多说和有言的,可以参考官网-评论系统
但是多说已经关闭,有言支持又不友好,又发现Disqus在手机上展示不出来,发现还需要翻墙,那实在对用户太不友好了,于是我选择使用来必力评论系统
注册
注册后可以查看数据分析
代码管理,我们需要用到这个data-uid
集成
添加data-uid
打开 theme/yelee/_config.yml
,添加配置信息
livere: on: true livere_uid: Your uid 复制代码
创建ejs文件
在 themes/yelee/layout/_partial/comments
文件夹创建 livere.ejs
文件,将代码拷贝进去,将你注册后的代码拷贝到
里面。
<section class="livere" id="comments"> <!-- 来必力City版安装代码 --> <div id="lv-container" data-id="city" data-uid="Your uid"> <script type="text/javascript"> (function(d, s) { var j, e = d.getElementsByTagName(s)[0]; if (typeof LivereTower === 'function') { return; } j = d.createElement(s); j.src = 'https://cdn-city.livere.com/js/embed.dist.js'; j.async = true; e.parentNode.insertBefore(j, e); })(document, 'script'); </script> <noscript> 为正常使用来必力评论功能请激活JavaScript</noscript> </div> <!-- City版安装代码已完成 --> </section> 复制代码
追加逻辑判断
打开 themes/yelee/layout/_partial/article.ejs
,在下图位置插入下面的逻辑判断代码
else if (theme.livere.on) { %> <%- partial('comments/livere') %> <% } 复制代码
如此,就大功告成,可以进行留言了,看下效果:
文章字数统计以及阅读时长
前言
next主题是已经集成这个功能的,但是yelee就需要我们自己配置了,可以看下官网对hexo-wordcount的介绍
集成
安装hexo-wordcount
npm i --save hexo-wordcount 复制代码
文件配置
在 yelee/layout/_partial/post/word.ejs
下创建 word.ejs
文件:
<div style="margin-top:10px;"> <span class="post-time"> <span class="post-meta-item-icon"> <i class="fa fa-keyboard-o"></i> <span class="post-meta-item-text"> 字数统计: </span> <span class="post-count"><%= wordcount(post.content) %>字</span> </span> </span> <span class="post-time"> | <span class="post-meta-item-icon"> <i class="fa fa-hourglass-half"></i> <span class="post-meta-item-text"> 阅读时长: </span> <span class="post-count"><%= min2read(post.content) %>分</span> </span> </span> </div> 复制代码
然后添加逻辑判断
打开 themes/yelee/layout/_partial/article.ejs
<% if(theme.word_count && !post.no_word_count){ %> <%- partial('post/word') %> <% } %> 复制代码
在下图位置添加
word_count
是主题 _config.yml
中配置是否需要添加字数统计功能控制 flag,
no_word_count
即配置文章是否需要显示字数统计的功能。
看一下效果吧
网易云音乐
前言
对于一名 Android
开发者来讲, 网易云音乐
是必不可少的功能,那博客也要添加这个功能咯。
集成
MarkDown
是支持 h5
代码的,所以集成过来很简单,打开网易云音乐,搜索你想要的音乐
点击对应的 生成外链播放器
,当然前提是要有版权的,很多音乐还是没有版权的,可以设置尺寸,是否自动播放,最后拷贝对应的代码,拷贝到你想要放置的位置即可。
看一下效果吧
鼠标点击桃心效果
前言
如果鼠标点击的时候出现特效,那一定会使整个博客的颜值提升一大截
集成
拷贝需要的文件
进入 我的备份 ,拷贝需要的文件
添加配置
打开 themes/yelee/layout/_partial/after-footer.ejs
文件,添加刚刚添加文件的配置。
<script type="text/javascript" src="/resources/float.js"></script> <script type="text/javascript" src="/resources/love.js"></script> <script type="text/javascript" color=0,104,183 opacity=1 zindex=-1 count=50 src="/resources/particle.js"></script> <script type="text/javascript" src="/resources/typewriter.js"></script> 复制代码
点击页面查看一下效果
添加可爱的萌妹子或者萌宠
前言
如果在页面上添加个萌宠或者萌妹纸,那是不是很卡哇伊呢。大家可以查看 源码 来挑选自己喜欢的模型。
集成
安装
npm install --save hexo-helper-live2d 复制代码
配置
在站点的 _config.yml
下配置
live2d: enable: true scriptFrom: local model: use: live2d-widget-model-miku display: position: right width: 150 height: 300 mobile: show: true 复制代码
其中,live2d.model.use使用来配置对应的萌宠模型,我这边是live2d-widget-model-miku
看一下效果吧
添加网站运行时间
前言
可以实时展示自己的博客的运行时间,还是蛮有成就感的。
集成
在 hexo/themes/yelee/layout
文件夹下找到你的 footer
文件,即脚布局文件,在对应的位置添加一下代码。
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span> <script> var now = new Date(); function createtime() { var grt= new Date("02/14/2018 12:49:00");//此处修改你的建站时间或者网站上线时间 now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; } setInterval("createtime()",250); </script> 复制代码
运行效果
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- MongoDB更改oplog大小
- ios – 更改NSURL的方案
- Vagrant更改默认的SSH端口
- Firefox 75.0 发布,地址栏更改
- Vagrant更改默认的SSH端口
- Flink 能否动态更改 Checkpoint 配置
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
数据库系统实现
加西亚-莫利纳(Hector Garcia-Molina)、Jeffrey D.Ullman、Jennifer Widom / 杨冬青、吴愈青、包小源 / 机械工业出版社 / 2010-5 / 59.00元
《数据库系统实现(第2版)》是斯坦福大学计算机科学专业数据库系列课程第二门课的教科书。书中对数据库系统实现原理进行了深入阐述,并具体讨论了数据库管理系统的三个主要成分——存储管理器、查询处理器和事务管理器的实现技术。此外,第2版充分反映了数据管理技术的新进展,对内容进行了扩充,除了在第1版中原有的“信息集成”一章(第10章)中加入了新的内容外,还增加了两个全新的章:“数据挖掘”(第11章)和“数据......一起来看看 《数据库系统实现》 这本书的介绍吧!