搭建博客(二) —— 进阶

Author Avatar
xiaoLit Created: May 06, 2019 Updated: May 15, 2020

一、图片

1. 优化描述

当插入图片格式如下:

![description](xxx.jpg)

默认是不显示description的,所以我们使用hexo-image-caption

add caption for images within posts

2. 点击放大

详情参见大佬的参考 Hexo 折腾:利用 Fancybox 添加图片放大预览查看功能
博主已经更新过了开关,在评论中的类似links的和其他页面的跳转问题可以直接在其目录下的index.md中写入fancybox: false关闭即可。

3. 图片居中和显示大小

可以在主题文件夹下的 source/css/style.min.css 中增加样式,在 #post-content img中加入了以下样式实现了图片居中:display:flex;justify-content:center;margin:0 auto;
文章内图片居中显示

4. 首页图片缩放样式

默认首页的文章图样式是放大且填充,但是很多时候你的图片并不能比较好的处理放大之后的显示效果。(其实就是将大图片缩小容易,小图片放大不清晰)所以我们就需要修改这个样式了。由于我对H5只通了六窍,所以只能是按图索骥,看一步尝试走一步。

首先全局搜索是一个方向,但是经过了查看众多关于thumbnailCSS样式代码后,发现直接读代码并不太实际。然后尝试了浏览器直接查看样式,也就是下图。

通过那里看不懂点哪里,找到了样式代码。

配合CSS代码大全MDN web文档,我们可以直接在浏览器上调试样式。

background-size: auto;
background-repeat: no-repeat;

找到了满足需求的样式代码,并填写进去。

可以看到图片已经居中并且保持为图片本来的大小。
接下来就只需要我们把样式代码放到相应的CCS文件里了。
点击我们修改样式那里的style标签

会跳到这里

然后我们根据style_css在博客主题文件下搜索。
只有这一个文件并且可以找到样式的文件路径了。只差一步之遥啦。

style.min.css文件中搜索上面的样式标题

#scheme-Paradox .material-layout .mdl-card__media

可以找到相应代码区,然后将我们的调试样式代码拼接在后面:

构建搞定:

然后我们接着把这个默认的蓝色背景去掉。

5. 首页文章缩略图和文章内的图片尺寸不一样

由于以上我们改了适配方式,不是蛮横的拉伸填充了,所以会发现一些细节问题。比如:

首页展示效果,可以看到四周略微漏出背景色。然后我们再看:

这是文章内图片展示效果,惊了!为什么不是通一种布局呢?那么就小改一下吧~

还是按照以上的笨方法,找到文章内的样式文件。

将280修改为250。
构建,搞定。

以后我们的图片以一个比例为准就可以了。
885 * 250刚好的尺寸。

顺便首页顶部标题图尺寸为:590 * 250

二、搜索引擎验证

主题下_config.yml文件中site_verification
google: #谷歌 Search Console 验证
baidu: #百度站长平台验证

向搜索引擎验证你对站点的所有权,用于向搜索引擎提交 sitemap 和管理站点被搜索引擎收录的情况
登录搜索引擎后台,选择使用 HTML 标记 验证站点所有权,搜索引擎后台会给你一串类似于这样的东西:

<meta name="xxxx-site-verification" content="xxxxxxxxxxxxxxxxxxxxxxxxxxxx" />

将 xxxxxxxxxxxxxxxxxxxxxxxxxxxx 字符串复制出来,填入对应搜索引擎的设置中,博客更新以后即可通过验证。

三、网址链接优化

固定链接插件:hexo-abbrlink

涉及到中文作为标题会有点蠢,发出去的链接无法直接识别为链接,还会导致某些功能异常,所以一般都会再起一个英文标题作为文件名,使用这个插件之后神就没这些问题了,神清气爽。

原本格式:
permalink: post/:year/:month/:day/:title/
例:http://xiaolit/2019/04/03/你好 

使用之后:
例:http://xiaolit/posts/9c7a901c/

1. 安装

npm install hexo-abbrlink --save

2. 配置

根目录下_config.yml修改配置为:

permalink: posts/:abbrlink/
abbrlink:
  alg: crc32  #support crc16(default) and crc32
  rep: hex    #support dec(default) and hex

四、播放音乐

hexo-tag-aplayer是将APlayer内嵌入博客页面的Hexo插件。

1. 安装

npm install --save hexo-tag-aplayer

2. 使用

3.0支持了meting模式,直接根目录下_config.yml添加配置

alpaca:
  meting: true
 {% meting "2788014076" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

效果如下:

Hexo 折腾:音乐播放

五、看板娘

看板娘采用的以 live2d 技术为核心,hexo可以使用 hexo-helper-live2d插件hexo-helper-live2d来集成。

可以添加更多的交互事件:给博客添加能动的看板娘(Live2D)-将其添加到网页上吧

六、版权声明

考虑爬虫等因素将版权声明放到文章内部。
主题配置文件 _config.yml 中添加字段,作为总开关:

post_license:
 enable: true # or false

文章的Front-matter中添加字段,作为独立开关:

post_license: true # or false

创建 material/layout/_partial/post_license.ejs:

<div>
   <br/>
   <ul id="post-license" class="post-license">
       <li class="post-license-author">
           <strong>本文作者:</strong>
           <a href="<%= config.url %>"><%= theme.author %></a>
       </li>
       <li class="post-license-link">
           <strong>本文链接:</strong>
           <a href="<%= page.permalink %>"><%= page.title %></a>
       </li>
       <li class="post-license-statement">
           <strong>版权声明: </strong>
           本文由 <%= config.author %> 原创,采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="license" target="_blank">署名-非商业性使用-相同方式共享(CC BY-NC-SA)4.0 国际许可协议</a> </br>转载请保留以上声明信息!
       </li>
   </ul>
</div>

material/layout/_partial/post-content.ejs 引入 post_license.ejs:

<% if(theme.post_license.enable && page.post_license !== false){%>
   <%- partial('_partial/post_license') %>
<% } %>

material/source/css/style.min.css 中添加 版权声明 样式:

#post-license {
   margin: 2em 0 0;
   padding: 0.5em 1em;
   border-left: 3px solid #ff4081;
   background-color: #f9f9f9;
   list-style: none;
}

即可!

七、文章创建和更新日期

添加更新文章日期功能
文章更新問題 #675

八、添加文章列表描述

Hexo Front Matter Excerpt此插件可以在文章列表显示摘要,并且不入侵文章主体。配置如下:

---
title: "Example Post"
excerpt: "This is my post excerpt"
---

Reference

Hexo 折腾记

Hexo-Material Theme 的一些设置和优化