Hexo-Next个人设置记录

Posted on | In
绝不瞎折腾，只管自需 😑

还是随手记一下比较好，万一哪天，这个博客又只剩渲染版本了呢~

Next-表格

  • 宽度自适应
    定位到 themes/next/source/css/_common/scaffolding/tables.styl ，修改如下：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    table {
      margin: 20px 0;
      width: $table-width;
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid $table-border-color;
      font-size: $table-font-size;
      /*table-layout: fixed;*/
      table-layout: auto; 
      word-wrap: break-all;
    }
  • 表格内换行
    操作 效果
    第一行<br>第二行 第一行
    第二行

Hexo换行

Expected behavior： 两个空格或空行实现换行
Actual behavior： 文本编辑中换行即为换行（这样好难受，一段句子写好长才能换行，这也太不markdown了
solution：

  • 安装： hexo-renderer-marked 
    1
    npm install hexo-renderer-marked --save
  • 站点配置文件 _config.yml 中添加：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    marked:
      gfm: true
      pedantic: false
      sanitize: false
      tables: true
      breaks: false
      smartLists: true
      smartypants: true
      modifyAnchors: ''
      autolink: true
  • 坑
    换行问题倒是解决了，但是hexo渲染的时候将换行符替换成了空格，呈现两个文 字中间的空格现象，不得不说，非常突兀。
    查了一下，原生英文环境，英文单词 English words 之间需要用空格区分的，而中文表述不需要空格，此时的换行符引入的空格就会出现问题…乌鸡鲅鱼， 为了美观可以将就在标点处换行，不会太明显，后续再看有什么解决方法。

hexo中插入数学公式

本来想写一下损失函数的，写了一半想想李航的统计学习讲的挺详细的，就算了，编辑到一半的公式也作废，但还是记录一下：hexo如何构建数学公式

  • 好物推荐
    　　mathpix
    　　这玩意不要太好用，支持截图转换成markdown或latex格式的公式，并且支持多系统，用起来！！
    　　

  • 踩坑记录
    　　hexo默认使用hexo-renderer-marked引擎渲染网页，用mathpix转换的公式搬到hexo上并起不了作用，瞬间怀疑人生…查了之后发现是hexo-renderer-marked渲染的时候会将公式里面某些字符渲染为html标签

  • 解决方法： 换个引擎…
    　　安装插件mathjax，mathjax是一个开源的web数学公式渲染器，由js编写，使前端也优越的支持数学公式

安装

1
npm install hexo-math --save

配置站点_config.yml

在_config.yml中添加：

1
2
3
4
5
6
math:
  engine: 'mathjax' # or 'katex'
  mathjax:
    # src: custom_mathjax_source
    config:
      # MathJax config

配置/themes/next/_config.yml

将_config.yml中mathJax设置为true： 

1
2
3
4
5
# MathJax Support
mathjax:
  enable: true
  per_page: false
  cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

效果

行内效果：$f(x)=a x+b$
行间效果： $$ w_{j}=\frac{\sum_{i=1}^{N} x_{i} y_{i}}{\sum_{i=1}^{N} x_{i}^{j+1}}, \quad j=0,1,2, \cdots, M $$

Next-摘要显示图片

我一直是拒绝在markdown里面嵌入html的。（为了在表格里面换行，我打脸了…）

修改渲染页面css

为摘要图片设计一个block： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//外层block
.out-img-topic {
  display: block;
  margin-bottom: 5px;
  overflow: hidden;
  border:none !important;
  outline: none;
}
//内层block
img.img-topic {
  display: block;
  border:none !important;
  margin-left: .7em;
  margin-right: .7em;
  outline: none;
  padding: 0;
}

看的懂css都懂，不多解释了..

渲染

修改/themes/next/layout/ _macro/post.swig,在if is_index与if post.description and theme.excerpt_description之间添加以下代码:

1
2
3
4
5
{% if post.images %}
  <div class="out-img-topic">
    <img src={{ post.images }} class="img-topic">
  </div>
{% endif %}

一劳永逸的模板

1
2
3
4
5
title: Hexo-Next个人设置记录
images: /images/瞎折腾/一劳永逸的模板.jpg
date: 2019-12-20 16:14:36
categories: 瞎折腾的玩意🌸
description: 绝不瞎折腾，只管自需 😑

Next-去除图像边框

修改/themes/next/source/css/_common/components/post/post-expand.styl文件中的img样式为： 

1
2
3
4
5
6
7
img {
box-sizing: border-box;
margin: auto;
padding: 3px;
//border: 1px solid $gray-lighter;
border: none
}