hexo的matery主题

最新推荐文章于 2024-08-08 08:00:45 发布

csmikezheng

最新推荐文章于 2024-08-08 08:00:45 发布

阅读量996

点赞数

本文链接：https://blog.csdn.net/qq_45792080/article/details/106095206

版权

一. 写博客

hexo n "博客名称"

根据提示路径进入/source/_posts/目录，vim打开新建文章，即可开始书写
写完之后保存退出(frontmatter中的summary是显示在博客下方的字，不写就取博客前面的字)
在hexo博客根目录，删除，部署，托管上传

hexo cl
hexo g
hexo d

`hexo代码块进阶写法`

二. 修改gitub上的主题

找到主题的gitub仓库地址(网址)
在hexo博客目录下的theme目录下，git clone 网址
找到hexo根目录的_config.yml文件中的theme行，将后面的主题改为你需要修改的在themes目录下的主题文件夹名后，保存退出。
在托管之前我们可以通过hexo s，在服务器的4000端口进行调试(在线渲染)，观看效果。完成之后，ctrl+c退出，再托管项目。
最后在hexo根目录删除cl，部署g，托管上传d，完成。

(另主题的一些相关操作，我们可以看新主题目录下的readme.md来进行完善)

疑问：为何在服务器上部署，需要手动开启，一直挂着才能访问，而上传托管之后，就不需要了，可直接访问了？

解释(待更新.....)：因为确实项目的部署就是一直挂着，但是类似coding(github)你将代码上传后，coding这个项目仓库就相当于是你的服务器项目，平台就相当于是你的服务器，通过平台的构建部署功能可以一键部署，平台帮你一直开着这个网站一直挂着。对于ZCROJ来说，只要你服务器开着，他通过本地多容器的运行来实现支撑网站运行，容器是自动运行，只要服务器不关，就用不会关。

三. hexo博客代码托管实现访问

coding，github双托管

在hexo根目录将_config.yml的deploy行修改如下
（repo的网址为你gitub，coding新建仓库网址）
在coding，gitub分别新建仓库，并确保ssh公钥的添加
(两个平台都是在点击头像的个人设置中添加ssh公钥)
gitub，coding添加公钥教程
gitub: 仓库名为用户昵称 + github.io
coding: 仓库名自定义
源码上传

hexo d // 自动上传

(注意在上传过程中，gitub账号为你的昵称，coding的账号为你注册时预留的邮箱)

github：直接用https://用户昵称.github.io访问博客(但是github很慢，没访问成功也正常，经常访问不到，所以不推荐)
coding：
访问教程

四. valine评论删除

由于valine是依赖lencloud的，所以我们如果想删除评论区的评论的话，到lencloud账户将你博客依赖的lencloud应用删掉，在重建一个应用，将主题目录下的_config.yml中的valine块的id(新建应用的设置的应用id)和key都改成新建仓库的，就能实现了。格式化评论区。当然亦可以在应用评论直接删除。

小结：hexo博客网页就是一个服务器上的hexo目录，网页上的按钮，就是一键进入hexo目录下的二级目录，所以如果hexo目录下的二级目录没有生成(创建)，点击按钮就会404，这就是前端没有后端支持的结果。

五. 博客美化

点我
页脚的时间在hexo-theme-matery目录的配置文件中修改，站点工作时间即可。

六. 代码块分成两块

当我们按照read.me配置好博客之后，出现这种情况，是没有把原来hexo的代码高亮关闭，导致重了，在博客配置文件中修改即可

highlight:
  enable: false // 将这里的true修改成false即可

七. matery博客置顶与横幅滚动

在文件frontmatter修改修改

top: true
cover: true
coverImg: // 博客滚动封面 图片路径  没有就默认用博客封面

八. logo与favicon

favicon只能用jpg格式
logo只能用png格式
图片可以用抠图软件扣掉底色，不然很丑，hhh

九. matery背景图片设置

改/themes/matery/source/css/matery.css中的body块

body {
    /*background-color: #eaeaea;*/
    /*第一个url是模糊渲染，第二个url是背景图片*/
    background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover, url("https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png"), url("https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg") 0px 0px;
    background-attachment: fixed;
    margin: 0;
    color: #34495e;
}

详解

十. Latex渲染

见洪卫博客，在博客目录下的scanffold目录下的post.md，添加mathjax：true，打开渲染。

十一. 樱花

在 /themes/matery/source/js 新建文件 sakura.js，并添加如下代码
code
然后在 /themes/matery/layout.ejs 中添加如下代码：

<% if (theme.sakura.enable) { %>
    <script type="text/javascript">
    //只在桌面版网页启用特效
    var windowWidth = $(window).width();
    if (windowWidth > 768) {
        document.write('<script type="text/javascript" src="/js/sakura.js"></script>');
    }
    </script>
<% } %>

在主题的配置文件中增加

# 页面樱花飘落动效
sakura:
  enable: true

十二. 动漫人物

我们npm下好model之后，我们直接在博客目录下的配置文件中修改即可。

十三. 滚动条美化

在/themes/matery/source/css/matery.css下添加以下代码：

::-webkit-scrollbar-thumb {
    background-color: #FF2A68;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    border-radius: 3em;
}
::-webkit-scrollbar-track {
    background-color: #ffcacaff;
    border-radius: 3em;
}
::-webkit-scrollbar {
    width: 8px;
    height: 15px;
}

详解