博客美化自述

这里主要记录一下本博客建站过程中用到的美化手段共参考考

访问量统计

Fluid 主题中针对阅读量已经有写好的代码，但是需要自己配置第三方的数据量统计服务才能使用。我们这里使用 LeanCloud 的免费服务来进行统计，同时这个也可以直接用来接入后面的评论区

1. 申请 LeanCloud 账号并创建应用

进入官网注册账号

注册页面

注册后需要实名认证和邮箱验证，完成后才能使用各项服务

验证完成后选择创建应用，选择免费的开发版即可

创建应用

进入该应用的 设置->应用凭证，找到 AppID, AppKey, REST API 服务器地址 三个属性，记录下来后面使用

应用记录

2 修改 Fluid 配置

在 _config.fluid.yml 中或者 fluid 主题的 _config.yml 中修改找到以下配置项，按照下文内容修改配置

网页访问统计配置

web_analytics:  # 网页访问统计
  enable: true

  # LeanCloud 计数统计，可用于 PV UV 展示，如果 `web_analytics: enable` 没有开启，PV UV 展示只会查询不会增加
  # LeanCloud count statistics, which can be used for PV UV display. If `web_analytics: enable` is false, PV UV display will only query and not increase
  leancloud:
    app_id: 你的 AppId
    app_key: 你的 AppKey
    # REST API 服务器地址，国际版不填
    # Only the Chinese mainland users need to set
    server_url: 你的 REST API 服务器地址
    # 统计页面时获取路径的属性
    # Get the attribute of the page path during statistics
    path: window.location.pathname
    # 开启后不统计本地路径( localhost 与 127.0.0.1 )
    # If true, ignore localhost & 127.0.0.1
    ignore_local: false

打开文章的浏览量计数功能

这个在 _config.fluid.yml 的 post 配置下

post:
    # 浏览量计数
    # Number of visits
    views:
      enable: true
      # 统计数据来源
      # Data Source
      # Options: busuanzi | leancloud
      source: "leancloud"
      format: "{} 次"

页面底部展示网站的 PV，UV

在 footer 配置项中做调整

footer:
  # 展示网站的 PV、UV 统计数
  # Display website PV and UV statistics
  statistics:
    enable: true

    # 统计数据来源，使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
    # Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
    # Options: busuanzi | leancloud
    source: "leancloud"

    pv_format: "总访问量 {} 次"
    uv_format: "总访客数 {} 人"

页面效果

文章浏览量

pv & uv

评论功能

评论功能相关的代码同样是 Fluid 本身写好的，修改一些配置即可，我们这里使用基于 leancloud 的 valine 来配置

post:
  comments:
    enable: true
    # 指定的插件，需要同时设置对应插件的必要参数
    # The specified plugin needs to set the necessary parameters at the same time
    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss
    type: valine

valine:
  appId: 你的 LeanCloud AppID
  appKey: 你的 LeanCloud AppKey
  path: window.location.pathname
  placeholder: 说点什么...
  avatar: 'retro'
  meta: ['nick', 'mail', 'link']
  requiredFields: []
  pageSize: 10
  lang: 'zh-CN'
  highlight: false
  recordIP: false
  serverURLs: ''
  emojiCDN:
  emojiMaps:
  enableQQ: false

页面效果

发表评论

其他插件

这部分插件通常需要用到额外的 js/css 文件，需要添加到 source/js 文件夹中

所有这部分文件都可以在博客原始 repo 的 source 文件夹中找到

添加主页创建时间

在 _config.fluid.yml 中找到 footer 进行添加

footer:
  # 页脚第一行文字的 HTML，建议保留 Fluid 的链接，用于向更多人推广本主题
  # HTML of the first line of the footer, it is recommended to keep the Fluid link to promote this theme to more people
  content: '
    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script src="/js/duration.js"></script>
    </div>

然后创建文件 source/js/duration.js，其中内容如下：

var now = new Date();
function createtime() {
    var grt= new Date("03/10/2023 00:00:00");//在此处修改你的建站时间，格式：月/日/年 时:分:秒
    now.setTime(now.getTime()+250);
    days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
    hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
    if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
    seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
    snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
    document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);