最终还是将博客部署到了hexo,找到了很漂亮的主题Matery,应该会一直使用下去,本篇文章就记录一下对该主题的修改历程

添加Aplayer播放器

在单独的页面添加音乐播放器

新建一个界面:

npm new page playlist

修改/hexo/source/playlist/index.md

---
title: 歌单
date: 2019-10-27 21:00:00
---
{% meting "94700905" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

关于各参数可以参考我之前的文章: https://jinjis.cn/2019/09/28/wei-bo-ke-tian-jia-aplayer-yin-le-bo-fang-qi/

为menu创建一个子项:

 歌单:
  url: /playlist
  icon: fas fa-music

安装aplayer插件

安装hexo-tag-aplayer插件,可以参阅官方文档

npm install --save hexo-tag-aplayer

在hexo根目录中的_config.yml加上

aplayer:
  meting: true

但是Matery主题会在文章底端显示前一篇和后一篇,否则的话显示本篇文章,所以效果就不是很好,这里我修改了themeshexo-theme-materylayout_partialprev-next.ejs里的部分内容:

<%
var hashCode = function (str) {
    if (!str && str.length === 0) {
        return 0;
    }

    var hash = 0;
    for (var i = 0, len = str.length; i < len; i++) {
        hash = ((hash << 5) - hash) + str.charCodeAt(i);
        hash |= 0;
    }
    return hash;
};

var featureimg = '/medias/featureimages/0.jpg';
var featureImages = theme.featureImages;
%>

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        <% if (page.prev) { %>
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;<%= __('prev') %></div>
            <div class="card">
                <a href="<%- url_for(page.prev.path) %>">
                    <div class="card-image">
                        <% if (page.prev.img) { %>
                        <img src="<%= page.prev.img %>" class="responsive-img" alt="<%- page.prev.title %>">
                        <% } else { %>
                        <%
                            var len = featureImages.length;
                            var num = Math.abs(hashCode(page.prev.title) % len);
                            featureimg = featureImages[num];
                        %>
                        <img src="<%= featureimg %>" class="responsive-img" alt="<%- page.prev.title %>">
                        <% } %>
                        <span class="card-title"><%- page.prev.title %></span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        <% if (page.prev.summary && page.prev.summary.length > 0) { %>
                            <%- page.prev.summary %>
                        <% } else { %>
                            <%- strip_html(page.prev.content).substring(0, 120) %>
                        <% } %>
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i><%= date(page.prev.date, config.date_format) %>
                        </span>
                        <span class="publish-author">
                            <% if (page.prev.categories && page.prev.categories.length > 0) { %>
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            <% page.prev.categories.forEach(category => { %>
                            <a href="<%- url_for(category.path) %>" class="post-category">
                                    <%- category.name %>
                                </a>
                            <% }); %>
                            <% } else if (page.prev.author && page.prev.author.length > 0) { %>
                            <i class="fas fa-user fa-fw"></i>
                            <%- page.prev.author %>
                            <% } else { %>
                            <i class="fas fa-user fa-fw"></i>
                            <%- config.author %>
                            <% } %>
                        </span>
                    </div>
                </div>
                <% if(page.prev.tags && page.prev.tags.length > 0) { %>
                <div class="card-action article-tags">
                    <% page.prev.tags.forEach(tag => { %>
                    <a href="<%- url_for(tag.path) %>">
                        <span class="chip bg-color"><%= tag.name %></span>
                    </a>
                    <% }); %>
                </div>
                <% } %>
            </div>
        </div>
        <% }  %>
        <% if (page.next) { %>
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                <%= __('next') %>&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="<%- url_for(page.next.path) %>">
                    <div class="card-image">
                        <% if (page.next.img) { %>
                        <img src="<%= page.next.img %>" class="responsive-img" alt="<%- page.next.title %>">
                        <% } else { %>
                        <%
                            var len = featureImages.length;
                            var num = Math.abs(hashCode(page.next.title) % len);
                            featureimg = featureImages[num];
                        %>
                        <img src="<%= featureimg %>" class="responsive-img" alt="<%- page.next.title %>">
                        <% } %>
                        <span class="card-title"><%- page.next.title %></span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        <% if (page.next.summary && page.next.summary.length > 0) { %>
                            <%- page.next.summary %>
                        <% } else { %>
                            <%- strip_html(page.next.content).substring(0, 120) %>
                        <% } %>
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i><%= date(page.next.date, config.date_format) %>
                            </span>
                        <span class="publish-author">
                            <% if (page.next.categories && page.next.categories.length > 0) { %>
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            <% page.next.categories.forEach(category => { %>
                            <a href="<%- url_for(category.path) %>" class="post-category">
                                    <%- category.name %>
                                </a>
                            <% }); %>
                            <% } else if (page.next.author && page.next.author.length > 0) { %>
                            <i class="fas fa-user fa-fw"></i>
                            <%- page.next.author %>
                            <% } else { %>
                            <i class="fas fa-user fa-fw"></i>
                            <%- config.author %>
                            <% } %>
                        </span>
                    </div>
                </div>
                <% if(page.next.tags && page.next.tags.length > 0) { %>
                <div class="card-action article-tags">
                    <% page.next.tags.forEach(tag => { %>
                    <a href="<%- url_for(tag.path) %>">
                        <span class="chip bg-color"><%= tag.name %></span>
                    </a>
                    <% }); %>
                </div>
                <% } %>
            </div>
        </div>
        <% }  %>
    </div>
</article>

因为这些代码的逻辑是底部两个div,如果有前一篇或后一篇就显示,否则的话显示本篇,这里把显示本篇的代码去掉了,会影响到其他所有的文章不过也确实不用这个功能。

最终效果:

添加一言API

一言api官网: https://hitokoto.cn/

我是对首页里我的梦想这一部分进行修改

打开E:HexoBlogHexoBlogthemeshexo-theme-materylayoutindex.ejs

<i class="fa fa-volume-up fa-lg fa-fw text-color"></i>

在这一句后面加上

<i class="fa fa-volume-up fa-lg fa-fw text-color"></i> <%- '<span id="hitokoto">获取中……</span> (来源:一言API)' %>
                        <script>
                            fetch('https://v1.hitokoto.cn')
                              .then(function (res){
                                return res.json();
                              })
                              .then(function (data) {
                                var hitokoto = document.getElementById('hitokoto');
                                var from = document.getElementById('from')
                                hitokoto.innerText = data.hitokoto+"———"+data.from; 
                              })
                              .catch(function (err) {
                                console.error(err);
                              })
                          </script>

部分api参数

Last modification:July 12th, 2020 at 01:17 am