欢迎光临搜索优化网站,为您在线提供搜索引擎优化问题!

搜索优化

我们提供一站式关键词优化快速稳定,解决网站排名查询困难。

Hexo+NexT+GithubPages的博客优化

作者:jcmp      发布时间:2021-04-19      浏览量:0
开始之前这篇主要是针对个人已经大号的博客

开始之前

这篇主要是针对个人已经大号的博客网站进行个性化定制和整理;如果你还没有搭建的话请参考如下文章搭建。 这里重点介绍个人的本地环境:

$ hexo versionhexo: 3.4.0hexo-cli: 1.0.4os: Windows_NT 10.0.15063 win32 x64http_parser: 2.7.0node: 8.9.0v8: 6.1.534.46uv: 1.15.0zlib: 1.2.11ares: 1.10.1-DEVmodules: 57nghttp2: 1.25.0openssl: 1.0.2licu: 59.1unicode: 9.0cldr: 31.0.1tz: 2017b。

基本的优化设置

界面优化

实现效果图

具体实现:

在路径

\themes\next\layout\_macro

中新建

passage-end-tag.swig

{% if not is_index %}
-------------本文结束感谢您的阅读-------------
{% endif %}

{% if not is_index %} {% include 'passage-end-tag.swig' %} {% endif %}

实现点击出现桃心效果

实现效果图

具体实现:

在网址输入如下:

http://7u2ss1.com1.z0.glb.clouddn.com/love.js。

修改文章底部的那个带#号的标签

实现效果图

具体实现方法

修改模板

/themes/next/layout/_macro/post.swig。

,搜索

rel="tag">#

,将 # 换成

修改作者头像并旋转

实现效果图

具体实现方法

打开

\themes\next\source\css\_common\components\sidebar\sidebar-author.styl。

.site-author-image { display: block; margin: 0 auto; padding: $site-author-image-padding; max-width: $site-author-image-width; height: $site-author-image-height; border: $site-author-image-border-width solid $site-author-image-border-color; /* 头像圆形 */ border-radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; box-shadow: inset 0 -1px 0 #333sf; /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/ /* 鼠标经过头像旋转360度 */ -webkit-transition: -webkit-transform 1.0s ease-out; -moz-transition: -moz-transform 1.0s ease-out; transition: transform 1.0s ease-out;}img:hover { /* 鼠标经过停止头像旋转 -webkit-animation-play-state:paused; animation-play-state:paused;*/ /* 鼠标经过头像旋转360度 */ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); transform: rotateZ(360deg);}/* Z 轴旋转动画 */@-webkit-keyframes play { 0% { -webkit-transform: rotateZ(0deg); } 100% { -webkit-transform: rotateZ(-360deg); }}@-moz-keyframes play { 0% { -moz-transform: rotateZ(0deg); } 100% { -moz-transform: rotateZ(-360deg); }}@keyframes play { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); }}

网站logo设置

实现效果图

具体实现方法

实现效果图

具体实现方法

打开

\themes\next\layout\_partials\head.swig。

代码如下:

只需修改主题配置文件(_config.yml)将pace: false改为pace: true就行了;具体代码如下:

# 文档的加载进度条pace: truepace_theme: pace-theme-minimal。

在文章底部增加版权信息

实现效果图

具体实现方法

在目录

next\layout\_macro\

my-copyright.swig

{% if page.copyright %}

本文标题:{{ page.title }}

文章作者:{{ theme.author }}

发布时间:{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}

最后更新:{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}

原始链接:{{ page.permalink }}

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

{% endif %}

.my_post_copyright { width: 85%; max-width: 45em; margin: 2.8em auto 0; padding: 0.5em 1.0em; border: 1px solid #d3d3d3; font-size: 0.93rem; line-height: 1.6em; word-break: break-all; background: rgba(255,255,255,0.4);}.my_post_copyright p{margin:0;}.my_post_copyright span { display: inline-block; width: 5.2em; color: #b5b5b5; font-weight: bold;}.my_post_copyright .raw { margin-left: 1em; width: 5em;}.my_post_copyright a { color: #808080; border-bottom:0;}.my_post_copyright a:hover { color: #a3d2a3; text-decoration: underline;}.my_post_copyright:hover .fa-clipboard { color: #000;}.my_post_copyright .post-url:hover { font-weight: normal;}.my_post_copyright .copy-path { margin-left: 1em; width: 1em; +mobile(){display:none;}}.my_post_copyright .copy-path:hover { color: #808080; cursor: pointer;}

修改 next\layout\_macro\post.swig ,修改位置:

{% if not is_index %} {% include 'wechat-subscriber.swig' %} {% endif %}

修改 next\source\css\_common\components\post\post.styl 文件,在最后一行增加代码:

@import "my-post-copyright";

保存重新生成即可。 如果要在该博文下面增加版权信息的显示,需要在 Markdown 中增加 copyright: true 的设置,类似:

文章加密访问

实现效果图

具体实现方法 打开 themes\next\layout\_partials\head.swig 文件,在以下位置插入这样一段代码:

实现效果图

具体实现方法

在根目录下安装

hexo-wordcount

,运行:

npm install hexo-wordcount --save。

然后在主题配置文件后面加入;如下配置:

# 开启字数统计word_count: true

操作优化

首页摘要里显示文章图片

实现效果图

具体实现方法

方式一:

直接用markdown编辑就可以吧,图片指令

![]()

,如果想要图片在摘要显示的格式如下:

这里显示图片这里是全文

方式二:

---title: categories: tags:copyright: truecomments: falsedescription: date: 2017-11-09 14:33:32top:photos: - "http://oz2tkq0zj.bkt.clouddn.com/17-11-9/52323298.jpg"

Hexo博客中插入音乐、视频

播放音乐

实现效果图

具体实现方法

这个其实用两种方案:

重点介绍一下第二种方式: 下面我就隆重介绍一款html5音乐播放器: Aplayer 。把Aplayer加入hexo需要用到 hexo-tag-aplayer 插件。 切换到hexo目录,运行:

npm install --save hexo-tag-aplayer。

{% aplayer "歌曲名称" "作者" "音乐_url" "封面图片_url" "autoplay" %}

hexo d --g之后就会出现你想要的音乐啦!

播放视频

视频播放也有两种方案:

2.用插件,功能更加强大,比如可以"弹幕",非常建议使用 切换到hexo目录,运行:

npm install hexo-tag-dplayer --save。

在文章使用如下格式内容:

{% dplayer "url=https://什么什么什么.mp4" "https://封面图.jpg" "api=https://api.prprpr.me/dplayer/" "id=" "loop=true" %}

参考文章