hexo-theme-matery主题美化

发表于 更新于

概述

熟悉CSS能够很好地帮助你

二级标题

可以参考我的配置

menu:
  主页:
    url: /
    icon: fas fa-home
  tags:
    url: /tags
    icon: fas fa-tags
  分类:
    url: /categories
    icon: fas fa-bookmark
  目录:
    icon: fas fa-list
    children:
      - name: About
        url: /about
        icon: fas fa-user-circle
      - name: Archives
        url: /archives
        icon: fas fa-archive
      - name: Contact
        url: /contact
        icon: fas fa-comments
  友链:
    url: /friends/
    icon: fas fa-address-book
  # 二级菜单写法如下
  Medias:
    icon: fas fa-list
    children:
      - name: 音乐
        url: /music
        icon: fas fa-music
      - name: 电影
        url: /movies
        icon: fas fa-film
      - name: 书籍
        url: /books
        icon: fas fa-book
      - name: 壁纸
        url: /galleries
        icon: fas fa-image
      - name: 追番
        url: /bangumis
        icon: fas fa-film
  Extension:
    icon: fas fa-list
    children:
      - name: 时间
        url: /time
        icon: fas fa-image
      - name: 美图
        url: /Mito
        icon: fas fa-images
      - name: 导航
        url: /navigation
        icon: fas fa-image
      - name: 弹幕室
        url: /bb
        icon: fas fa-film
      - name: IP定位
        url: /position
        icon: fas fa-book

如果想添加图标，在source/libs/awesome/css/all.css

image-20201216092237477

这些CSS带吗是啥意思呢？

解答：

CSS的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的*可替换元素。*

而content 是图标的Unicode值

代码示例

link前面加一个icon

HTML

<a href="http://www.mozilla.org/en-US/">Home Page</a>

CSS

a::before{
    content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
    font:    x-small Arial,freeSans,sans-serif;
    color:   gray;
}

自定义列表后面加加文字

HTML

<div>
  <ul class="brightIdea">
    <li>This is my first idea</li>
    <li>and another good idea</li>
  </ul>
</div>

CSS

/* first import the icon from a suitable site */
@import url(http://weloveiconfonts.com/api/?family=entypo);

.brightIdea li::after{
    content: '\1f4a1';
    font-family: 'entypo', sans-serif;
}

修改all.css

参数有很多，我们可以随意调整，以下为官方的一个示例

/* Step 1: Common Properties: All required to make icons render reliably */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Step 2: Reference Individual Icons */
.login::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

/* Note: Make sure to include the correct weight and Unicode value for the icon */
.tps::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f1ea";
}

具体编码可以在这里查，可以需要翻墙才能完整浏览

匹配不同屏幕

@media在媒体查询中使用该规则为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情，例如：

  • 视口的宽度和高度
  • 设备的宽度和高度
  • 方向（平板电脑/手机处于横向还是纵向模式？）
  • 解析度

命名使用了@media重写css样式但是依然@media里面的样式失效。

原因在于css选择器优先级问题，后面的css样式优先级大于前面的。

@media screen and (max-width: 800px) {}的样式应该放到后面，不应该放到没有@media的前面。

吐槽：有些坑，被主题设计者坑了一把，他竟然没考虑优先级的问题，

解决：把前面的放在后面就好了

修改页面配色

查找方法基本就是打开chrome浏览器的检查,选择想要查看的页面元素,然后看他的Style文件,找到关键词之后去hexo-theme-matery主题的css文件中查找后修改即可

打开 matery/source/css/matery.css 文件 搜索 .bg-color 大概在198行
修改background-image属性中linear-gradient内的值即可改成你自己想要的颜色。

添加文章显示作者名字

---------------------- layout/_partial/post-detail.ejs -----------------------

<div class="info-break-policy">
    <% if (page.author && page.author.length > 0) { %>
        <i class="fa fa-pencil"></i> 作者: <%- page.author %>
     <% } else { %>
    <i class="fa fa-pencil"></i> 作者: <%- config.author %>
    <% } %>
</div>

添加一言

如果需要出处的话可以使用以下代码，不过应该有更简便的写法，不过id的参数我调了好几次都没成功。

--------------------------- layout/_widget/dream.ejs ---------------------------

<div class="row">
   <div class="col l8 offset-l2 m10 offset-m1 s10 offset-s1 center-align text">
	<div id="hitokoto">:D 获取中...</div>
	<i id="hitofrom">:D 获取中...</i>
	<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
	<script>
	fetch('https://v1.hitokoto.cn')
		.then(function (res){
		return res.json();
		})
		.then(function (data) {
		var hitokoto = document.getElementById('hitokoto');
		hitokoto.innerText = '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + data.hitokoto;
		var hitofrom = document.getElementById('hitofrom');
		hitofrom.innerText = "——" + "《" + data.from + "》" + '\xa0'; 
		})
		.catch(function (err) {
		console.error(err);
		})
	</script>
   </div>
 </div>

评论区美化

注册

  1. 前往 LeanCloud 国际版，注册账号。
  2. 注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
  3. 绑定完成之后点击创建应用，应用名称随意，接着在结构化数据中创建 class，命名为 shuoshuo。
  4. 在你新建的应用中找到结构化数据下的用户。点击添加用户，输入想用的用户名及密码。
  5. 回到结构化数据中，点击 class 下的 shuoshuo。找到权限，在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。
  6. 然后新建一个名为atComment的class，权限什么的使用默认的即可。
  7. 点击 class 下的 _User 添加列，列名称为 img，默认值填上你这个账号想要用的发布说说的头像url，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。
  8. 在最菜单栏中找到设置-> 应用 keys，记下来 AppID 和 AppKey ，一会会用。
  9. 最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据已达到强制发布说说。

算了，大家直接从以下两个链接参考就行：

推荐，全都可以使用

部分过时，仅供参考

颜色选择可以从下面找：

颜色名称及色样表(HTML版)

或者谷歌某个颜色的代号，然后就可以选取自己喜欢的演策

image-20201210112158274

MD5生成网站

https://www.md5hashgenerator.com/

添加图片

路径：layout/_partial/minivaline.ejs

教大家一个非常方便定位代码位置的办法，直接在github搜，示例如下：

20201213104145

效果如图：（非常nice）

image-20201213104230321

打开layout/_partial/minivaline.ejs，修改如下：

<style>
    .mvaline-card {
        margin: 1.5rem auto;
    }

    .mvaline-card .card-content {
        padding: 20px 20px 5px 20px;
        background-image: url(https://cdn.jsdelivr.net/gh/zyoushuo/Blog/images/valinebg.webp);
        background-position: right bottom;
		background-repeat: no-repeat;
    }
</style>

效果如图：

image-20201215132017071

文章配置

配置选项 默认值 描述
title Markdown 的文件标题 文章标题，强烈建议填写此选项
date 文件创建时的日期时间 发布时间，强烈建议填写此选项，且最好保证全局唯一
author 根 _config.yml 中的 author 文章作者
img featureImages 中的某个值 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top true 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
cover false v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg 无 v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password 无 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc true 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax false 是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary 无 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories 无 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags 无 文章标签，一篇文章可以多个标签
keywords 文章标题 文章关键字，SEO 时需要
reprintPolicy cc_by 文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

难受的是他img也加了cdn，。。。。。

image-20201215135636021

如果不愿意放弃cdn的话，也可以修改成这样

image-20201215141211040

去除页面的上一篇

有些只有一个页面，上一篇下一篇显得有些多余了

hexo-theme-matery/layout/_partial/post-detail.ejs

image-20201226235747399

所以

可视化图表

要画一个可视化的图表就要知道数据从何而来，从下图可以看出是通过site.获取的

image-20201227090415961

更新代码版本

为毛要更新代码版本勒？

因为博主想了解做一个网站需要知道哪些库，如果不想折腾的话，请不要轻易尝试，Bug可能比你想象的多

（以下已剔除无关紧要的库）

libs:
  css:
    fontAwesome: /libs/awesome/css/all.css # V5.11.1
    materialize: /libs/materialize/materialize.min.css # 1.0.0
    aos: /libs/aos/aos.css
    animate: /libs/animate/animate.min.css # V3.5.1  https://animate.style/
    lightgallery: /libs/lightGallery/css/lightgallery.min.css # V1.6.11
    aplayer: /libs/aplayer/APlayer.min.css
    dplayer: /libs/dplayer/DPlayer.min.css
    gitalk: /libs/gitalk/gitalk.css
    jqcloud: /libs/jqcloud/jqcloud.css
    tocbot: /libs/tocbot/tocbot.css
    prism: /libs/prism/prism.css
  js:
    matery: /js/matery.js
    jquery: /libs/jquery/jquery.min.js  # https://jquery.com/
    materialize: /libs/materialize/materialize.min.js # 1.0.0
    masonry: /libs/masonry/masonry.pkgd.min.js # v4.0.0
    aos: /libs/aos/aos.js
    scrollProgress: /libs/scrollprogress/scrollProgress.min.js
    lightgallery: /libs/lightGallery/js/lightgallery-all.min.js # V1.6.11
    clicklove: /libs/others/clicklove.js
    busuanzi: /libs/others/busuanzi.pure.mini.js
    aplayer: /libs/aplayer/APlayer.min.js
    dplayer: /libs/dplayer/DPlayer.min.js
    crypto: /libs/cryptojs/crypto-js.min.js
    echarts: /libs/echarts/echarts.min.js
    gitalk: /libs/gitalk/gitalk.min.js
    valine: /libs/valine/Valine.min.js # 若想保持最新版，请替换为 https://unpkg.com/valine/dist/Valine.min.js  默认为 /libs/valine/Valine.min.js
    minivaline: /libs/minivaline/MiniValine.js
    jqcloud: /libs/jqcloud/jqcloud-1.0.4.min.js
    tocbot: /libs/tocbot/tocbot.min.js
    canvas_nest: /libs/background/canvas-nest.js
    ribbon: /libs/background/ribbon.min.js
    ribbonRefresh: /libs/background/ribbon-refresh.min.js
    ribbon_dynamic: /libs/background/ribbon-dynamic.js
    instantpage: /libs/instantpage/instantpage.js

如果要使用链接形式，且用了主题的jsDelivr，需要改成下列形式

<script src="<%- url_for(theme.libs.js.materialize) %>"></script>
<script src="<%- url_for(theme.libs.js.masonry) %>"></script>
<script src="<%- url_for(theme.libs.js.aos) %>"></script>
<script src="<%- url_for(theme.libs.js.scrollProgress) %>"></script>
<script src="<%- url_for(theme.libs.js.lightgallery) %>"></script>

或者改成配置版，修改方便

image-20201225125156471

awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

因为官方说

  • 根据Adobe的要求，我们已删除Adobe品牌图标以符合其品牌和法律准则。如果您在项目中使用此图标，则升级到5.15版后将不会呈现该图标。

所以退而求其次把

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" />

cdn还是用国内的最好了

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

materialize

这东西很久没更新了，我也没看懂，不管他

<link href="https://cdn.bootcdn.net/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

aos

CSS

<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">

JS

<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>

一些弹跳动画

Animate.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

先用兼容

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.min.css" rel="stylesheet">

Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库。非常适合强调，主页，滑块和引导注意的提示。

对于新项目，强烈建议使用默认的前缀版本，因为这将确保您几乎不会有与项目冲突的类。此外，在更高版本中，我们可能决定终止该animate.compat.css文件。

加了个前缀

lightgallery

一个针对jQuery的可定制，模块化，响应式灯箱画廊插件。

<script src="https://cdn.bootcdn.net/ajax/libs/lightgallery/1.10.0/js/lightgallery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/lightgallery/1.10.0/css/lightgallery.min.css" rel="stylesheet">

aplayer

<link href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.9.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.9.1/APlayer.min.js"></script>

dplayer

<link href="https://cdn.bootcdn.net/ajax/libs/dplayer/1.9.1/DPlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/dplayer/1.9.1/DPlayer.min.js"></script>

gitalk

<link href="https://cdn.bootcdn.net/ajax/libs/gitalk/1.7.0/gitalk.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/gitalk/1.7.0/gitalk.min.js"></script>

jqcloud

<link href="https://cdn.bootcdn.net/ajax/libs/jqcloud/1.0.4/jqcloud.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jqcloud/1.0.4/jqcloud.min.js"></script>

tocbot

<script src="https://cdn.bootcdn.net/ajax/libs/tocbot/4.9.1/tocbot.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/tocbot/4.9.1/tocbot.css" rel="stylesheet">

jquery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery UI

jQuery UI是在jQuery JavaScript库之上构建的一组精选的用户界面交互，效果，小部件和主题。无论是构建高度交互的Web应用程序，还是只需要向表单控件添加日期选择器，jQuery UI都是最佳选择。

jQuery UI包含许多保持状态的小部件，因此使用方式与典型的jQuery插件略有不同。jQuery UI的所有小部件都使用相同的模式，因此，如果您学习如何使用它们，那么您将知道如何使用所有这些模式。

<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

jQuery Mobile

jQuery Mobile是构建可在所有流行的智能手机，平板电脑和台式设备上访问的网站和应用程序的最简单方法。该框架提供了一组易于触摸的UI小部件和一个支持AJAX的导航系统，以支持动画页面过渡。

<link href="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.css" rel="stylesheet">

prism

<link href="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/themes/prism.min.css" rel="stylesheet">

Masonry

一个瀑布流布局工具库。

<script src="https://cdn.bootcdn.net/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

scrollprogress

创建一个进度条，指示您在网站上滚动了多少

<script src="https://cdn.bootcdn.net/ajax/libs/scrollprogress/3.0.2/scrollProgress.min.js"></script>