hexo-theme-matery主题美化

hexo 主题

发布日期: 2020-01-29

更新日期: 2020-12-27

文章字数: 3.8k

阅读时长: 17 分

阅读次数:

概述

熟悉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

这些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>

评论区美化

注册

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

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

添加图片

路径：layout/_partial/minivaline.ejs

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

效果如图：（非常nice）

打开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>

效果如图：

文章配置

配置选项	默认值	描述
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，。。。。。

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

去除页面的上一篇

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

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

所以

可视化图表

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

更新代码版本

为毛要更新代码版本勒？

因为博主想了解做一个网站需要知道哪些库，如果不想折腾的话，请不要轻易尝试，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>

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

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>

古客

http://blog.guke.cf/posts/39e2c676/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源古客 !

hexo 主题

markdown使用流程图

2020-01-29 markdown

CSS笔记之图标

2020-01-29 前端

CSS,图标,主题,Hexo

hexo-theme-matery主题美化

概述

二级标题

代码示例

link前面加一个icon

自定义列表后面加加文字

修改all.css

匹配不同屏幕

修改页面配色

添加文章显示作者名字

添加一言

评论区美化

注册

添加图片

文章配置

去除页面的上一篇

可视化图表

更新代码版本

awesome

materialize

aos

CSS

JS

Animate.css

lightgallery

aplayer

dplayer

gitalk

jqcloud

tocbot

jquery

jQuery UI

jQuery Mobile

prism

Masonry

scrollprogress

你的赏识是我前进的动力