Hexo+Github博客搭建之Matery主题个性化修改篇（二）

修改原有相册

参考教程：https://yafine-blog.cn/posts/3b98.html

matery主题自定义字体

参考教程：https://yafine-blog.cn/posts/49fb.html

添加天气小插件

首先去中国天气官网：https://cj.weather.com.cn/plugin/pc

配置自己的插件，选择自定义插件—>自定义样式——>生成代码，然后会生成一段代码，复制粘贴到 themes/matery/layout/layout.ejs即可。

关于我页面添加个人简历

打开theme/matery/layout/about.ejs文件，大约在13行。有一个<div class="card">标签，找出其对应结尾的标签，大约在61行左右，然后在新增如下代码：

<div class="card">
     <div class="card-content">
         <div class="card-content article-card-content">
             <div class="title center-align" data-aos="zoom-in-up">
                 <i class="fa fa-address-book"></i>&nbsp;&nbsp;<%- __('个人简历') %>
              </div>
                 <div id="articleContent" data-aos="fade-up">
                     <%- page.content %>
                 </div>
           </div>
      </div>
</div>

注意粘贴的位置和空格要正确，这里的位置随你自己设置，你也可以把简历作为第一个card，然后/source/about/index.md下面写上你的简历了（就像写博客一样）。

豆瓣书单电影页面

注意：首先需要检查你的hexo版本是多少，在你的博客目录下执行命令 hexo -v
即可，这个豆瓣插件需要的版本需要<4.2.0，否则会出现bug，比如点击书单的在读，想读或者已读会出现一个新的弹出页面，解决办法就是降低hexo的版本，先卸载目前的hexo版本，再安装4.0.0版本的hexo即可，我的版本为4.0.0。

npm uninstall hexo
npm install hexo@4.0.0 -g

1. 首先在博客站点目录执行下面的命令安装豆瓣插件：

npm install hexo-douban --save	

2. 紧接着在博客站点目录的配置文件_config.yml下，添加如下配置：

douban: 
  user: 252345665    #这个需要修改为你个人的id  
  builtin: false   #如果想生成豆瓣页面，这个需要设置为true
  book: 
  	title: 'This is my book title' 
  	quote: 'This is my book quote' 
  movie: 
  	title: 'This is my movie title' 
  	quote: 'This is my movie quote' 
  game: 
  	title: 'This is my game title' 
  	quote: 'This is my game quote' 
  timeout: 10000

• user:：你的豆瓣ID。打开豆瓣，登入账户，然后在右上角点击 ”个人主页“，这时候地址栏的URL大概是这样：https://www.douban.com/people/xxxxxx/ ，其中的”xxxxxx”就是你的个人ID了。
• builtin：是否将生成页面的功能嵌入 hexo s 和 hexo g 中，默认是 false ，另一可选项为 true 。
• title： 该页面的标题。
• quote： 写在页面开头的一段话,支持html语法。
• timeout： 爬取数据的超时时间，默认是 10000ms，如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。

如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可。

3. 然后再主题配置文件_config.yml中添加关于此页面的菜单：(下面是我的配置)

menu:
    媒体:
       url: /
       icon: fas fa-list
       children:
         - name: 电影
           url: /movies
           icon: fas fa-film
         - name: 书单
           url: /books
           icon: fas fa-book
         - name: 游戏
           url: /games
           icon: fas fa-gamepad

4. 适配Matery主题：在 /themes/hexo-theme-matery/layout 文件夹下面创建一个名为 douban.ejs 的文件，并将下面的内容复制进去：

<%- partial('_partial/post-cover') %> 
<style> 
    .hexo-douban-picture img {
   
        width: 100%; 
    } 
</style>
<main class="content"> 
    <div id="contact" class="container chip-container"> 
        <div class="card"> 
            <div class="card-content" style="padding: 30px"> 
                <h1 style="margin: 10px 0 10px 0px;"><%= page.title %></h1> 
                <%- page.content %> 
            </div> 
        </div> 
        <div class="card"> 
            <div class="card-content" style="text-align: center"> 
                <h3 style="margin: 5px 0 5px 5px;">如果你有好的内容推荐，欢迎在下面留言！</h3> 
            </div> 
        </div> 
        <div class="card"> 
            <% if (theme.gitalk && theme.gitalk.enable) {
    %>
            	<%- partial('_partial/gitalk') %>
            <% } %> 
            <% if (theme.gitment.enable) {
    %> 
            	<%