reuixiy / reuixiy.github.io Goto Github PK

比如鼠标点击的爱心、布局样式等等，都很好看，想知道怎么配置0.0。不胜感激！

大佬，你之前的博客样式去哪了。
现在咋变样了，好像丢了一半的效果。

问题一：图片下方的说明文字

TL;DR

编辑以下文件，将相关代码修改如下。

// 文件位置：~/blog/node_modules/marked/lib/marked.js

Renderer.prototype.image = function(href, title, text) {
  if (this.options.baseUrl && !originIndependentUrl.test(href)) {
    href = resolveUrl(this.options.baseUrl, href);
  }
  var out = '<img src="' + href + '" alt="' + text + '"';
  if (title) {
    out += '>' + '<i class="img-caption">' + '◎ ' + title + '</i';
  }
  out += this.options.xhtml ? '/>' : '>';
  return out;
};

添加 CSS 样式。

/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

.img-caption {
    font-style: normal;
    margin: 0 0 .7em;
    font-size: 90%;
    color: #555;
    display: block;
    text-align: center;
    text-indent: 0;
    font-family: STKaiti, serif;
}

正文

首先要达成一点共识，既然我们是用 Markdown 来写文章，那么就应该践行 Markdown 的哲学：

1. 用特殊标记将所需排版样式「纯文本化」；
2. 使用的特殊标记应简洁、简明。

我们想要在图片下方显示说明文字，那么先来看看 Markdown 中插入图片的语法：

![Alt text](/path/to/img.jpg "Optional title")

上面这段代码其实直接来自 Markdown 的作者的网站，推荐尽量浏览一遍，比大部分所谓的 Markdown 教程都要好。

回到正题，这段代码主要有三个部分：

1. Alt text，替代文本，图片无法显示时读者看到的就是它
2. /path/to/img.jpg，URL，即图片的链接
3. Optional title，图片的标题

前面两点大部分使用过 Markdown 的人应该都知道，这里说说第三点，其实图片下方的说明文字就是它了。首先怎么写呢？在 URL 后面加一空格，然后直双引号（""）里添加文字即可，如上方。然后它的作用是什么呢？变成图片的 title 属性，说直观一点就是你将鼠标放在图片上面，然后它就会显示，这就是 title。自然，我们需要给图片添加的说明文中就可以利用这个属性。

然而，对于这个属性，在电脑上还好，但在手机上就惨了，手机上哪来的鼠标啊？所以自己添加的说明文字在手机上压根就不会显示的，而就算在电脑上，也需要另外的交互——鼠标停留——才会显示，不够直观。

那么，就将 title 直接转成能在网页上直接看到的不就行了！是的，这就是思路。如何操作呢？肯定要从负责将 Markdown 渲染成 HTML 的程序入手，还好现在代码都是开源的，且 npm 安装的包直接就是源码，而不是二进制包。所以，直接在你的博客站点根目录下找到 node_modules 这个文件夹，点进去，然后搜索 mark ——没必要输全的——然后找到 marked 文件夹，用你喜欢的编辑器打开 lib/marked.js 文件，然后找到：

https://github.com/markedjs/marked/blob/b2f80b8fec34fca2e35f422bbd54f70fd99f327a/lib/marked.js#L1065-L1077

修改如下：

Renderer.prototype.image = function(href, title, text) {
  if (this.options.baseUrl && !originIndependentUrl.test(href)) {
    href = resolveUrl(this.options.baseUrl, href);
  }
  var out = '<img src="' + href + '" alt="' + text + '"';
  if (title) {
    out += '>' + '<i class="img-caption">' + '◎ ' + title + '</i';
  }
  out += this.options.xhtml ? '/>' : '>';
  return out;
};

上面将会删除 title，如果你不想，可以自行修改。

然后，往 custom.styl 添加 CSS 样式：

/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

.img-caption {
    font-style: normal;
    margin: 0 0 .7em;
    font-size: 90%;
    color: #555;
    display: block;
    text-align: center;
    text-indent: 0;
    font-family: STKaiti, serif;
}

如果你看过我博客的那篇文章，那么应该对这个流程相当熟悉了，样式可以 F12 自己调试。

什么？没必要这样折腾，可以直接写 HTML？不，请践行 Markdown 的哲学。（日常自言自语部分:joy:）

问题二：自定义字体

这其实在上面这段 CSS 代码中就解答了，找到你要自定义的元素，然后加样式就行了。比如你给我发的截图中的引用：

blockquote {
    font-family: STFangsong, serif;
}

至于图中出现的楷体（来源部分），其实我在 Markdown 中是这样写的：

> 子曰：「于止，知其所止，可以人而不如鸟乎！」
> ——`《礼记·大学》`

也就是说在它左右加上了 `` 使它变成了行内代码块，这样渲染成 HTML 时就是 <code>《礼记·大学》</code>，然后加 CSS 自定义 `code` 的字体即可：

code {
    font-family: STKaiti, serif;
}

其实，以上都是浏览器 F12 后可以直接看到的，你可以自己尝试。

当然，关于字体的显示，那是另一个问题，如果你的系统安装了 CSS 指定的字体，那么自然会显示；如果没，自然就无法显示指定的字体。那么，有办法解决吗？有，用网络字体，即网站为用户提供字体。但需要注意的是，字体是有版权的，不是你想用就能随便用的，我那博客也马上会放弃这种做法，故在这里我也就不说明了。

大佬，关于Valine评论，【评论最上面的邮箱和网址是干什么用的？评论的时候填上有什么用么？】