基于windows10+hexo+github搭建个人博客(3)

2020-03-05 阅读数:0次

安装livere评论系统

注册livere
选择City版：是一款适合所有人使用的免费版本
https://livere.com
在主题配置添加来必力
修改theme/yilia/_config.yml文件
1
livere_uid: 注册得到的id

添加livere.ejs代码
新增theme/yilia/layout/_partial/post/livere.ejs文件，添加livere得到的代码
【注意这里data-uid替换成了theme.livere_uid】

   <!-- 来必力City版安装代码 -->
   <div id="lv-container" data-id="city" data-uid="<%=theme.livere_uid%>">
<script type="text/javascript">
   (function(d, s) {
      var j, e = d.getElementsByTagName(s)[0];
  
      if (typeof LivereTower === 'function') { return; }
  
      j = d.createElement(s);
      j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
      j.async = true;
  
      e.parentNode.insertBefore(j, e);
   })(document, 'script');
</script>
   <noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
   </div>
   <!-- City版安装代码已完成 -->

添加article.ejs代码
在theme/yilia/layout/_partial/article.ejs文件，如下位置

1	<% if (!index && post.comments){ %>

添加代码

<% if (theme.livere_uid){ %>
<%- partial('post/livere', {
  key: post.slug,
  title: post.title,
  url: config.url+url_for(post.path)
}) %>
<% } %>

重启hexo
参考
https://jomsou.github.io/2017/07/16/livere/
https://www.githang.com/2019/05/21/hexo-yilia-livere/
https://meetes.top/2018/02/12/Hexo + yilia 部署评论系统/

设置加密博文

安装插件
npm install --save hexo-blog-encrypt
安装插件
npm install --save hexo-blog-encrypt
as
安装插件
npm install --save hexo-blog-encrypt
sad

按标签加密
修改文章信息头如下：

title: Hello World
tags:
- 加密文章tag
date: 2020-03-13 21:12:21
password: muyiio
abstract: 这里有东西被加密了，需要输入密码查看哦。
message: 您好，这里需要密码。
wrong_pass_message: 抱歉，这个密码看着不太对，请再试试。
wrong_hash_message: 抱歉，这个文章不能被纠正，不过您还是能看看解密后的内容。
---

对博客根目录_config添加如下字段

# 安全
encrypt: # hexo-blog-encrypt
abstract: 这里有东西被加密了，需要输入密码查看哦。
message: 您好, 这里需要密码.
tags:
- {name: tagName, password: 密码A}
- {name: tagName, password: 密码B}
template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

参考
https://zhuanlan.zhihu.com/p/113235573

上传pdf

安装插件
npm install --save hexo-pdf
新建目录source\assets\pdf

使用以下方式插入

1	{% pdf /assets/pdf/xxx.pdf %}

或者

<object data="/assets/pdf/xxx.pdf" type="application/pdf" width="100%" height="877px"></object>

<iframe src='/assets/pdf/xxx.pdf' width="100%" height="877px"></iframe>

<iframe src='/assets/pdf/xxx.pdf' style='width:100%;height:877px'></iframe>

安装pdf.js, 实现手机端浏览
【注意：1-3步骤只能实现pc端浏览！！！】

pdfjs下载地址：https://mozilla.github.io/pdf.js/getting_started/#download
下载Prebuilt (for older browsers)的stable包
解压后放在/source/pdfjs目录下
在_config.yml添加如下代码，取消对pdfjs的渲染
1
2
3
skip_render:
- 'pdfjs/*'
- 'pdfjs/**'
记得hexo clean和g
使用以下方式插入
1
<iframe src='/pdfjs/web/viewer.html?file=/assets/pdf/xxx.pdf' width="100%" height="877px"></iframe>
参考
https://www.jianshu.com/p/111452a36e94
https://juejin.cn/post/7084037580756353038
https://www.cnblogs.com/bingshanyishu/p/15979137.html

资源压缩【好像需要版本升级，不做了】

安装插件
npm install hexo-all-minifier
参考
https://keep-docs.xpoet.cn/usage-tutorial/advanced.html#资源压缩

hexo+typora图像插入

md文件放在source/_posts下
图像文件放在source/assets/typora下
typora打开偏好设置-图像-设置相对位置…/assets/typora/${filename}, 选择优先使用相对位置
typora打开格式-图像-设置图像根目录选择source
最后md上显示从…/assets/typora变成/assets/typora/

typora常用命令

进入源码模式：Ctrl + /
快速打开：Ctrl + P
显示隐藏侧边栏：Ctrl + Shift + L

渲染器和数学公式

渲染器

hexo-renderer-marked：hexo默认的渲染器不支持复杂的数学公式
hexo-renderer-kramed：支持复杂的数学公式，mathjax的渲染方式
hexo-renderer-markdown-it：取代第一个的渲染器，渲染更快，更符合CommonMark规则。
hexo-renderer-markdown-it-katex：跟上一个差不多，但是不用设置就支持katex
hexo-renderer-markdown-it-plus：好用，可以自己决定是否要渲染katex公式。此外能渲染的东西多，但是已经不维护了。
@upupming/hexo-renderer-markdown-it-plus ：上一个的升级版。好用。支持的功能多。
参考：
https://bugwz.com/2019/09/17/hexo-markdown-renderer/#2-5、hexo-renderer-markdown-it-plus

方法1 pandoc 【问题太多已经放弃】

安装pandoc

1 2	npm uninstall hexo-renderer-marked --save npm install hexo-renderer-pandoc --save

window安装pandoc
下载https://pandoc.org/installing.html
themes\yilia主题下的_config.yml文件

mathjax: true
或者
mathjax:
  enable: true
  # tags: ams 公式排序，但好像没用这个

重开git

1
2
3

hexo clean
hexo g
hexo s

一堆问题

1 2	\label{} \eqref{}

方法2 markdown-it-plus

安装

npm uninstall hexo-renderer-marked --save
npm i hexo-renderer-markdown-it-plus --save #老版本不要
npm i @upupming/hexo-renderer-markdown-it-plus --save
npm i markdown-it-checkbox
npm i markdown-it-imsize
npm i markdown-it-expandable

hexo的_config.yml文件【修改后不需要关闭git，但需要hexo clean, hexo g, hexo s才能启动】

markdown_it_plus:
  preset: "default" #
  render:
    html: true
    xhtmlOut: false
    langPrefix: "language-" #
    breaks: true
    linkify: true
    typographer: true
    quotes: "“”‘’"
  enable_rules: #
  disable_rules: #
  plugins:
    - markdown-it-mark #高亮
    - markdown-it-ins #下划线
    - markdown-it-sup #上标
    - markdown-it-sub #下标
    - markdown-it-emoji #表情
    - markdown-it-footnote #脚注
    - markdown-it-checkbox #复选框
    - plugin: 
        name: markdown-it-katex
        enable: false
    - markdown-it-cjk-breaks #？
    - markdown-it-imsize #?
    - markdown-it-toc-and-anchor #?目录
    - markdown-it-abbr #?  #<abbr>标签？
    - markdown-it-deflist #?自定义列表
    - markdown-it-expandable #?
    - name: markdown-it-container #?
      options: success
    - name: markdown-it-container
      options: tips
    - name: markdown-it-container
      options: warning
    - name: markdown-it-container
      options: danger
  anchors:
    level: 2
    collisionSuffix: ""
    permalink: false #
    permalinkClass: "header-anchor"
    permalinkSide: "left"
    permalinkSymbol: "¶"
    case: 0 #
    separator: "-" #