您的位置: 首页  >  文章  >  博客折腾记——tranquilpeak主题个性化

博客折腾记——tranquilpeak主题个性化

分类: 文章 • 2024-08-12 19:30:16

博客折腾记——tranquilpeak主题个性化

文章首发于博客du_ok’s Notes，本文链接为博客折腾记——tranquilpeak主题个性化

最近把博客的主题从Next换成了tranquilpeak，于是小打小闹的把这个主题个性化了一下下，主要包括版权信息、评论系统、404、博文加密、文章字数统计、访问人数统计。

基本配置

关于Tranquilpeak的基本配置我就不细说了，主要参见大神LouisBarranqueiro的配置文档就好啦。

404 not found

关于404界面的配置在官方文档中给出了一种方法：

To create a custom 404 page that fits the theme first create a 404.md file in your Hexo source folder.
Hide post meta, actions and comments using front-matter settings:

title: Page not found 
meta: false 
actions: false 
comments: false

Finally, you need to tell your server to use /404.html (which Hexo generates out of 404.md) as your default 404 error page.Here are tutorials for some common web servers/providers: Apache, Nginx, GitHub Pages, Amazon Cloudfront/S3.

而我是这样干的?：
在主题的source文件夹中直接创建一个404.html。在404.html中写入自己个性化的404界面，如果引用了图片或者js脚本等资源的话可以将其放在主题的source/image和source/js文件夹中。在我的404界面如下（我的404） 。

404
you find my dog!
Thanks so much. He loves to run away and hide on pages that don’t exist.
Please let us know how you found him, then we’ll make sure it doesn’t happen again. Or just help him find his way back home.

博文加密

关于博文的加密只需要一个插件即可实现。

  1. 首先在博客的根目录安装hexo-blog-encrypt，并将其写入package.json文件中：
cd blog
npm install --save hexo-blog-encrypt
  1. 然后在博客根目录的_config.yml中添加如下：
encrypt:
    enable: true
  1. 写文章时，在front-matter中设置你的密码如下
---
password: `your password`
---

评论系统

在我之前使用的评论系统是disqus，然而由于大家都懂得原因，disqus在国内难以使用，于是乎使用了gitment。

  1. 首先进入tranquilpeak的配置文件_config.yml中，找到如下代码，接下来只需要补充完整这些配置即可。 在评论配置中，提供了两种评论系统，一种便是被墙了的disqus，另一种便是gitment。
# Your Disqus shortname
disqus_shortname: 
# Your Gitment information
gitment:
    enable: true
    github_id: 你的github账户名
    repo: 需要存放评论的repository，可以新建一个repository专门存放评论
    client_id: OAuth App的client_id
    client_secret: OAuth App的client_secret
  1. 然后登陆自己的github，根据这个顺序进行点击操作：Personal setting->Developer settings->OAuth Apps->New OAuth App。对于新建的OAuth app的配置如下：
  • Application name：app的名字，随便写；
  • Homepage URL：填写自己的主页地址即可，如我的为http://notes.duyichao.site。
  • Application description：随便填
  • Authorization callback URL：这一步最重要，也是填写自己的博客地址，这里要注意到底是http与https，填写的一定要与自己的博客使用的一致。github会使用callback url回调传你一个code参数。
  1. 当上面的都填写完毕时，就可以获得这个app的client_id和client_secret。
  2. 写文章时，在front-matter中添加:
---
comment: true
---

对于gitment还有问题：

  1. Not Found，这一般是owner或者repo配置错误了，注意名字和仓库名字的大小写。
  2. Comments Not Initialized：这一般是Authorization callback URL配置错误或者在这一个评论区没有登录github账号。
  3. validation failed：这是由于github issue的Label的长度限制小于50字符，我们可以将tranquilpeak\layout_partial\scripts.ejs的id由window.location.pathname改为post.date：
function render() {
    new Gitment({
        // id: window.location.pathname,
        id: '<%= post.date %>',
        owner: '<%- theme.gitment.github_id %>',
        repo: '<%- theme.gitment.repo %>',
        oauth: {
            client_id: '<%- theme.gitment.client_id %>',
            client_secret: '<%- theme.gitment.client_secret %>',
        }
    }).render('gitment');
}

还有一个坑：登录失败，报错[object ProgressEvent]，似乎是gitment的作者提供js脚本的网址更改了，所以会登录不了。以防万一，还是把脚本down下来，使用自己的服务器提供服务，或者直接存放于本地。

//更换下面两个脚本地址即可
gc.src = '//imsun.github.io/gitment/dist/gitment.browser.js';
gcs.href = '//imsun.github.io/gitment/style/default.css';

版权信息

版权是一个非常严肃的问题，现在的互联网上的抄袭现象很严重，还有一些爬虫自动爬取你的文章然后直接发布出去，所以我们需要在我们的文章里加入版权信息。

  1. 在tranquilpeak\layout_partial\post文件夹中创建copyright.ejs文件，内容如下：
<div class="article-footer-copyright">
    <p><span>本文标题:</span><href="<%- url_for(' ') %>"> <%= post.title %></a></p>
    <p><span>文章作者:</span><a href="/" title="访问 <%= config.author %>的个人博客"><%= config.author %></a></p>
    <p><span>发布时间:</span><%= post.date.format("YYYY年MM月DD日 - HH:mm") %></p>
    <p><span>最后更新:</span><%= post.updated.format("YYYY年MM月DD日 - HH:mm") %></p>
    <p><span>原始链接:</span><a href="<%= url_for(post.path) %>" title="<%= post.title %>"><%= post.permalink %></a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="<%= post.permalink %>"  aria-label="复制成功！"></i></span>
    </p>
    <p><span>许可协议:</span><i class="fab fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
  1. 打开tranquilpeak\languages中的en.yml文件，在post部分添加如下代码：
post:
    copyright: "copyright"
  1. 在tranquilpeak\layout_partial中的post.ejs中找到下面代码:
<div class="post-content markdown">
    <div class="main-content-wrap">
        <%- postContent %>
        <%- partial('post/gallery') %>
    </div>
</div>

<div class="post-content markdown">
    <div class="main-content-wrap">
        <%- postContent %>
        <%- partial('post/gallery') %>
        <!-- 添加的部分 -->
        <!-- copyright -->
        <% if(post.copyright == true) { %>
            <%- partial('post/copyright') %>
        <% } %>
        <!-- copyright -->
    </div>
</div>
  1. 在写文章时，在front-matter中添加
---
password: `your password`
---

文章字数统计、访问数目统计

安装hexo-wordcount、不蒜子统计、leancloud

参考链接

本文作者：du_milestone
本文链接：博客折腾记——tranquilpeak主题个性化或博客折腾记——tranquilpeak主题个性化
许可协议：署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

相关推荐