以下的 JS 或 CSS 代码分别需要添加到 import_js.ejs 和 config_css.ejs 文件中，有特别说明的例外～

封面图的阴影

↑添加阴影和未添加阴影的对比

修改 Paradox-post_entry.ejs，在封面图上添加一个 background: linear-gradient(...)：

<div class="post_thumbnail-custom mdl-card__media mdl-color-text--grey-50" style="background:linear-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,.5)),url(<%= post.thumbnail %>) center;background-size:cover;">

<kbd> 标签样式

效果：Ctrl + Alt + Del

kbd {
    background-color: #fafbfc;
    border: 1px solid #c6cbd1;
    border-bottom-color: #959da5;
    border-radius: 3px;
    box-shadow: inset 0 -1.5px 0 #959da5;
    font-size: 75%;
    color: #444d56;
    padding: 0 5px;
    padding-bottom: 3px;
    vertical-align: middle;
    cursor: pointer;
}
kbd:hover {
    color: #000;
}
kbd:active {
    color: #000;
    box-shadow: inset 0 .5px 0 #666;
}

使用 highlight.js 代码高亮、显示行号

参见：在 hexo-theme-material 主题上使用 highlight.js 进行代码高亮/显示行号

“复制代码”按钮

.copy-button {
    float: right;
    border: none;
    color: #fff;
    background-color: transparent;
    margin-top: 8px;
}

document.querySelectorAll('pre code').forEach(function (codeBlock) {
    var copyButton = document.createElement('button');
    copyButton.innerText = '复制代码';
    copyButton.onclick = function () {
        var range = document.createRange();
        range.selectNodeContents(codeBlock);
        var selection = document.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        document.execCommand('Copy');
        selection.removeAllRanges();
        alert('复制成功～☆ﾐ(o*･ω･)ﾉ');
    }
    copyButton.classList.add('copy-button');
    codeBlock.parentNode.appendChild(copyButton);
});

在支持时自动切换 WebP 图片

function checkWebp(callback) {
    var img = new Image();
    img.onload = function () { callback((img.width > 0) && (img.height > 0)); };
    img.onerror = function () { callback(false); };
    img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}
function showImage(useWebp) {
    document.querySelectorAll('img').forEach(function (e) {
        if (useWebp && e.getAttribute('data-webp-src')) {
            e.src = e.getAttribute('data-webp-src');
        } else if (e.getAttribute('data-src')) {
            e.src = e.getAttribute('data-src');
        }
    });
}
checkWebp(showImage);

编辑文章时，在 Markdown 格式的源文件中直接使用 HTML 代码插入 <img> 标签，并同时写上 WebP 和传统格式图片的链接，即可应用自动切换。上面的代码也不影响继续使用 Markdown 的图片标签 ![]() 插入图片。

<img data-src="image.jpg" data-webp-src="image.webp">

“点击查看大图”

（目前已废弃）点击图片，在新选项卡中打开大图。

document.querySelectorAll('#post-content img').forEach(function (image) {
    image.style.cursor = 'zoom-in';
    image.title = image.title || '点击查看大图';
    image.onclick = function () { window.open(image.src); };
});

最近发现了 francoischalifour/medium-zoom 这个库，可以使用更流畅的动画效果放大图片～

mediumZoom(document.querySelectorAll('#post-content img'), {
    margin: 16,
    scrollOffset: 8,
    background: 'rgba(0, 0, 0, .85)',
});

图片的高度限制、水平居中、阴影效果

#post-content img {
    display: block;
    margin: 0 auto;
    max-width: calc(100% - 16px) !important; /* 在左右两边各留下 8px 边距用于显示阴影 */
    max-height: 480px;
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(0, 0, 0, .14), 0 1px 8px 0 rgba(0, 0, 0, .12);
    transition: box-shadow .25s cubic-bezier(.4, 0, .2, 1) !important;
}
#post-content img:hover {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
}

在悬停时旋转头像

此效果来自于 VCB-Studio 的主页，把鼠标放到头像上试试？( ‘-ωก̀ )

#author-avatar > img,
.sidebar-image > img {
    transition: transform .4s ease !important;
}
#author-avatar > img:hover,
.sidebar-image > img:hover {
    transform: rotate(360deg);
}