Skip to content

Commit 77ed21e

Browse files
GcsSloopGcsSloop
authored
Update
1 parent e505253 commit 77ed21e

1 file changed

Lines changed: 188 additions & 1 deletion

File tree

‎Course/Markdown/markdown-link.md‎

Lines changed: 188 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,188 @@
1-
# Markdown
1+
# Markdown实用技巧－链接和图片
2+
3+
Sloop 喝过半杯咖啡，涨红的脸色渐渐复了原，旁人便又问道，“ Sloop，你当真会写文章么？” Sloop 看着问他的人，显出不屑置辩的神气。他们便接着说道，“你怎的连半个赞也捞不到呢？” Sloop 立刻显出颓唐不安模样，脸上笼上了一层灰色，嘴里说些话；这回可是全是技术名词之类，一些不懂了。在这时候，众人也都哄笑起来：办公室内外充满了快活的空气。
4+
5+
在这些时候，我可以附和着笑，老板是决不责备的。而且老板见了 Sloop，也每每这样问他，引人发笑。Sloop 自己知道不能和他们谈天，便只好向实习生说话。有一回对我说道，“你会用 Markdown 么？” 我略略点一点头。他说，“会用 Markdown，……我便考你一考。Markdown 的链接，你是怎样写的？” 我想，码农一样的人，也配考我么？便回过脸去，不再理会。Sloop 等了许久，很恳切的说道，“不能写罢？……我教给你，记着！这些写法应该记着。将来做程序员的时候，写文档要用。”我暗想我和程序员的等级还很远呢，而且我们这里的程序员也从不写文档；又好笑，又不耐烦，懒懒的答他道，“谁要你教，不是一对方括号后面跟一对圆括号么？” Sloop 显出极高兴的样子，将两个指头的长指甲敲着电脑，点头说，“对呀对呀！……链接有4样基本写法，你知道么？” 我愈不耐烦了，努着嘴走远。Sloop 刚想打开编辑器，给我演示，见我毫不热心，便又叹一口气，显出极惋惜的样子。
6+
7+
*****
8+
9+
## 前言
10+
11+
**本文是适用于对 Markdown 有一定了解的魔法师，以帮助他们挖掘更多关于 Markdown 的可能性，例如：链接的不同类型以及使用方式，如何在新标签页打开链接，如何控制图片大小等，对 Markdown 还不了解的魔法师请参考 [Markdown快速入门][markdown-start] 和 [Markdown基础语法][markdown-grammar] 。**
12+
13+
**注意：以下的部分语法不属于标准语法，存在不兼容的问题，不能保证所有平台都能够使用。对于非标准语法(拓展语法)我会进行标注说明。**
14+
15+
*****
16+
17+
## 行内式链接:
18+
19+
```markdown
20+
博客地址: [GcsSloop](http://www.gcssloop.com)
21+
博客地址: [GcsSloop](http://www.gcssloop.com "GcsSloop的博客")
22+
```
23+
24+
博客地址: [GcsSloop](http://www.gcssloop.com)
25+
博客地址: [GcsSloop](http://www.gcssloop.com "GcsSloop的博客")
26+
27+
*****
28+
29+
## 参考式链接:
30+
31+
```markdown
32+
[GcsSloop的博客][gcssloop]
33+
34+
[gcssloop]: http://www.gcssloop.com
35+
// 或者
36+
[gcssloop]: http://www.gcssloop.com "点击访问GcsSloop的博客"
37+
```
38+
39+
[GcsSloop的博客][gcssloop]
40+
41+
**为什么要使用参考式呢？**
42+
在写文章的时候很可能会在文章不同的地方引用同一篇文章，使用参考式可以少写一点字符。
43+
更重要的是，参考文章的链接可能会改变，如果将参考链接统一写在文末的话，改起来会更容易。
44+
45+
*****
46+
47+
## 自动链接:
48+
49+
```markdown
50+
<http://www.gcssloop.com>
51+
```
52+
53+
<http://www.gcssloop.com>
54+
55+
*****
56+
57+
## 相对链接:
58+
59+
**如果你的内容是发布在 GitHub 或者自己的个人网站上，那么相对链接是一个很好用的东西**，例如引用本站的一张图片可以这样写:
60+
61+
```markdown
62+
![头像](/assets/siteinfo/avatar.jpg)
63+
```
64+
65+
![头像](/assets/siteinfo/avatar.jpg)
66+
67+
**相对链接优点:**
68+
69+
* 线下预览和线上效果相同，不受网络影响。
70+
* 避免了分别上传图片导致的麻烦。
71+
* GitHub复制仓库更方便，改仓库名字不会导致资源链接失效。
72+
73+
**相对链接缺点:**
74+
75+
* 不适用于需要在多平台发布的文章。
76+
* 某些本地编辑器不支持读取相对链接。
77+
78+
*****
79+
80+
## 图片链接:
81+
82+
图片链接其实就是把图片和链接嵌套在一起:
83+
84+
> 顺便为 DiyCode 打一个小广告，欢迎更多小伙伴的加入。
85+
86+
```markdown
87+
[![](http://ww1.sinaimg.cn/large/005Xtdi2jw1f9e6ii0bsgj30xc04gaau.jpg)](http://www.diycode.cc/wiki/encouragement)
88+
```
89+
90+
[![](http://ww1.sinaimg.cn/large/005Xtdi2jw1f9e6ii0bsgj30xc04gaau.jpg)](http://www.diycode.cc/wiki/encouragement){:target="_blank"}
91+
92+
*****
93+
94+
**注意：从这里开始往下的部分，属于拓展语法，可能存在某些平台(编辑器)无法识别的问题，请亲自测试后再使用。**
95+
96+
## 在新标签页打开:
97+
98+
Markdown 的默认链接方式都是在当前标签页打开的，这就会导致打开链接之后原始页面被覆盖掉，如果想要让链接在新标签页打开可以在后面添加上 `{:target="_blank"}` 或者使用 HTML 语法。
99+
100+
```
101+
[GcsSloop](http://www.gcssloop.com){:target="_blank"}
102+
103+
[GcsSloop的博客][gcssloop]{:target="_blank"}
104+
105+
<http://www.gcssloop.com>{:target="_blank"}
106+
107+
<a href="http://www.gcssloop.com/info/about" target="_blank">关于GcsSloop</a>
108+
```
109+
110+
[GcsSloop](http://www.gcssloop.com){:target="_blank"} <br/>
111+
[GcsSloop的博客][gcssloop]{:target="_blank"} <br/>
112+
<http://www.gcssloop.com>{:target="_blank"} <br/>
113+
<a href="http://www.gcssloop.com/info/about" target="_blank">关于GcsSloop</a>
114+
115+
注意: 部分平台可能不识别 `{:target="_blank"}` 标签，例如你正在看的这个 GitHub 就不识别。。
116+
117+
*****
118+
119+
## 注释(脚注):
120+
121+
注释一般用于解释一些专业名词或者难以理解的内容，由于注释的解释部分一般放在文末，所以又称为脚注:
122+
123+
```
124+
GcsSloop[^1]是一个超级魔法师[^2] 。
125+
126+
[^1]: GcsSloop：非著名程序员。
127+
[^2]: 魔法师：会魔法的人类
128+
```
129+
130+
GcsSloop[^1]是一个超级魔法师[^2] 。
131+
132+
注意：脚注不论在何处定义，最终都是显示在文末。部分平台不识别该语法。
133+
134+
*****
135+
136+
## 控制图片大小
137+
138+
使用 `{:width="300" height="100"}` 或者 HTML 格式可以控制图片显示大小，图片有宽度(width)和高度(height)两个属性，如果只指定了一个，另一个会按照比例缩放。
139+
140+
```
141+
![](http://ww1.sinaimg.cn/large/005Xtdi2jw1f9k7b8a6vmj312w0rg143.jpg){:width="300"}
142+
143+
<img src="http://ww1.sinaimg.cn/large/005Xtdi2jw1f9k7b8a6vmj312w0rg143.jpg" width="300"/>
144+
```
145+
146+
![](http://ww1.sinaimg.cn/large/005Xtdi2jw1f9k7b8a6vmj312w0rg143.jpg){:width="300"}
147+
148+
右键，新标签页打开图片，你会发现原图其实挺大的。
149+
注意: 部分平台可能不识别 `{:width="300" height="100"}` 标签，你正在看的这个 GitHub 依旧不识别。
150+
151+
*****
152+
153+
## 总结:
154+
155+
Markdown 存在很多的变种，对其语法进行了不同程度的拓展，使其更加的强大，但是使用拓展语法之前请三思。个人建议如下：
156+
157+
* 如果文章(文档)只在单一平台发布，使用任何该平台支持的拓展语法都没问题。
158+
* 如果文章(文档)需要在多个平台发布，尽量使用标准语法，使用拓展语法之前请注意测试平台兼容性。
159+
* 图片尽量使用图床管理，而且要进行本地备份。
160+
161+
162+
*****
163+
164+
## About Me
165+
166+
### 作者微博: <a href="http://weibo.com/GcsSloop" target="_blank">@GcsSloop</a>
167+
168+
<a href="http://www.gcssloop.com/info/about" target="_blank"><img src="http://ww4.sinaimg.cn/large/005Xtdi2gw1f1qn89ihu3j315o0dwwjc.jpg" width="300" style="display:inline;" /></a>
169+
170+
## 参考链接：
171+
172+
[Markdown－基础语法](http://www.markdown.cn/)
173+
[Markdown语法:在新窗口新标签页中打开](http://yinping4256.github.io/cn/Markdown%E8%AF%AD%E6%B3%95%E5%9C%A8%E6%96%B0%E7%AA%97%E5%8F%A3%E6%96%B0%E6%A0%87%E7%AD%BE%E9%A1%B5%E4%B8%AD%E6%89%93%E5%BC%80/)
174+
175+
176+
### 注释:
177+
178+
[^1]: GcsSloop：非著名程序员。
179+
[^2]: 魔法师：会魔法的人类
180+
181+
182+
183+
184+
[markdown-start]: http://www.gcssloop.com/markdown/markdown-star "Markdown实用技巧－快速入门"
185+
186+
[markdown-grammar]: http://www.gcssloop.com/markdown/markdown-grammar "Markdown实用技巧－基础语法"
187+
188+
[gcssloop]: http://www.gcssloop.com "点击访问GcsSloop的博客"

0 commit comments

Comments
 (0)