Writer / Photographer / Filmmaker
echo $ecrets
I’m a lifetime librarian and part-time translator living in this finite infinite cyberspace.
Home Page: https://io-oi.me
Writer / Photographer / Filmmaker
echo $ecrets
I’m a lifetime librarian and part-time translator living in this finite infinite cyberspace.
比如鼠标点击的爱心、布局样式等等,都很好看,想知道怎么配置0.0。不胜感激!
大佬,你之前的博客样式去哪了。
现在咋变样了,好像丢了一半的效果。
编辑以下文件,将相关代码修改如下。
// 文件位置:~/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 的哲学:
我们想要在图片下方显示说明文字,那么先来看看 Markdown 中插入图片的语法:
![Alt text](/path/to/img.jpg "Optional title")
上面这段代码其实直接来自 Markdown 的作者的网站,推荐尽量浏览一遍,比大部分所谓的 Markdown 教程都要好。
回到正题,这段代码主要有三个部分:
Alt text
,替代文本,图片无法显示时读者看到的就是它/path/to/img.jpg
,URL,即图片的链接Optional title
,图片的标题前面两点大部分使用过 Markdown 的人应该都知道,这里说说第三点,其实图片下方的说明文字就是它了。首先怎么写呢?在 URL 后面加一空格,然后直双引号(""
)里添加文字即可,如上方。然后它的作用是什么呢?变成图片的 title
属性,说直观一点就是你将鼠标放在图片上面,然后它就会显示,这就是 title
。自然,我们需要给图片添加的说明文中就可以利用这个属性。
然而,对于这个属性,在电脑上还好,但在手机上就惨了,手机上哪来的鼠标啊?所以自己添加的说明文字在手机上压根就不会显示的,而就算在电脑上,也需要另外的交互——鼠标停留——才会显示,不够直观。
那么,就将 title
直接转成能在网页上直接看到的不就行了!是的,这就是思路。如何操作呢?肯定要从负责将 Markdown 渲染成 HTML 的程序入手,还好现在代码都是开源的,且 npm
安装的包直接就是源码,而不是二进制包。所以,直接在你的博客站点根目录下找到 node_modules
这个文件夹,点进去,然后搜索 mark
——没必要输全的——然后找到 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;
};
上面将会删除 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 指定的字体,那么自然会显示;如果没,自然就无法显示指定的字体。那么,有办法解决吗?有,用网络字体,即网站为用户提供字体。但需要注意的是,字体是有版权的,不是你想用就能随便用的,我那博客也马上会放弃这种做法,故在这里我也就不说明了。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.