The whole problem with the world is that fools and fanatics are always so certain of themselves, but wiser people so full of doubts.

Inside Theme Showcase

Sep 5, 2018elmore

Image

space

Inline image

Not bad.yes

  • Travis CI build status: build-img
  • Lastest release: release-img
  • License: license-img

List

Unordered list

  • list item
  • list item
    • list item
    • list item
      • list item
      • list item
  • list item

Ordered list

  1. list item
  2. list item
    1. list item
    2. list item
      1. list item
      2. list item
  3. list item

Checklist

  • Get up at 7:00 AM
  • Eat breakfast
  • Go to bet before 11:00 PM

Table

Hear no evilSpeak no evilSee no evil
🙉🙊🙈

Text align

Hear no evilSpeak no evilSee no evil
🙉🙊🙈

Headless

敲空格,或 

1
2
3
 | |  
:-:|:-:|:-:
🙉|🙊|🙈
🙉🙊🙈

Long table

Sun With FaceGrinning FaceSmiling FaceGrinning Face With Big EyesSmiling Face With Smiling EyesFull Moon FaceGrinning Face With Smiling EyesFace With MonocleCowboy Hat FaceThinking FaceFace Vomiting
🌞😀☺️😃😊🌝😄🧐🤠🤔🤮

Blockquote

(https://hexo.io/docs/tag-plugins#Block-Quote)

Every interaction is both precious and an opportunity to delight.

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Code Block

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class Utils {
animate(element: Element, attr: string, change: { from: number, to: number, duration?: number }, onEnd?: () => void) {
if (change.from === change.to) return;

if (!change.duration)
element[attr] = change.to;

const easing = (t, b, c, d) => c * ((t = t / d - 1) * t * t + 1) + b,
{ from, to } = change,
during = Math.ceil((change.duration || 300) / 17) || 1;

let start = 0,
instance = null;

step();

function step() {
const value = Math.ceil(easing(start, from, to - from, during));

start++;
if (start <= during) {
element[attr] = value;
instance = requestAnimationFrame(step);
}
else {
if (onEnd) onEnd();
cancelAnimationFrame(instance);
}
}
}
}

With caption

(https://hexo.io/docs/tag-plugins#Code-Block)

_.compactUnderscore.js
1
2
_.compact([0, 1, false, 2, '', 3]);
// [1, 2, 3]

Gist

(https://hexo.io/docs/tag-plugins#Gist)

JSFiddle

(https://hexo.io/docs/tag-plugins#jsFiddle)

<script> ⚠

<script> 有特殊处理,旨在解决 json 中包含的 JS 脚本无法执行的问题。

示例:

1
2
3
4
5
6
7
8
9
stars: <span id="stargazers_count"></span>

<script>
fetch('https://api.github.com/repos/elmorec/hexo-theme-inside')
.then(function(res) { return res.json() })
.then(function(json) {
document.getElementById('stargazers_count').innerHTML = json.stargazers_count;
});
</script>

stars:

若想兼容最新 ES 语法,需安装 Babel 和 UglifyJs(非必须)。

于根目录(Hexo根目录,非 themes/inside)下执行:

1
npm install babel-core babel-preset-env uglify-js --save

Canvas ⚠

内置标签,用于满足简单的 canvas 绘图需要。

语法:

1
2
3
4
{% canvas [width] [height] %}
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, w, h);
{% endcanvas %}

width 默认 300,height 默认 150,作用域内注入了以下变量:

ctx2d 上下文对象
w画布宽度
h画布高度

如:

1
2
3
4
5
6
{% canvas 100 100 %}
const r = w / 2;
ctx.fillStyle = 'antiquewhite';
ctx.arc(r, r, r, 0, Math.PI * 2);
ctx.fill();
{% endcanvas %}

本文随主题不定期更新。

Buy me a cup of coffee ☕.

  • Copyright:

    自由转载-非商用-禁止演绎-保持署名(CC BY-NC-ND 4.0

  • Published:

    September 5, 2018

Load Disqus
  1. 1 Image
    1. 1.1 Inline image
    2. 1.2 With link
  2. 2 List
    1. 2.1 Unordered list
    2. 2.2 Ordered list
    3. 2.3 Checklist
  3. 3 Table
    1. 3.1 Text align
    2. 3.2 Headless
    3. 3.3 Long table
  4. 4 Blockquote
  5. 5 Code Block
    1. 5.1 With caption
  6. 6 Gist
  7. 7 JSFiddle
  8. 8 <script> ⚠
  9. 9 Canvas ⚠