如何自定义hugo图文混排的图片展示位置
2019年2月26日
约 633 字 需时 2 分钟
深色阅读
曾经说过，用上Hugo后就起飞了，但有两个地方一直困扰着我，一是图片位置、说明等细节，二是Markdown的外链打开方式。之前解决了后者，今天来说说前者。
其实，解决方案很简单，完全可以通过css来实现。
方案一
图文混排，图片居中
.post-entry img[src$='#center']
{
display: block;
margin: 0.7rem auto; /* you can replace the vertical '0.7rem' by
whatever floats your boat, but keep the
horizontal 'auto' for this to work */
box-shadow: 0 0 10px #555;
border-radius: 6px;
-webkit-box-shadow: 0 0 0px #ece7e7;
-moz-box-shadow: 0 0 0px #ece7e7;
max-width: 75%;
vertical-align: middle;
/* whatever else styles you fancy here */
}
效果如下：
图文混排，图片居左
.post-entry img[src$='#left']
{
float:left;
margin: 0.7rem; /* this margin is totally up to you */
box-shadow: 0 0 10px #555;
border-radius: 6px;
-webkit-box-shadow: 0 0 0px #ece7e7;
-moz-box-shadow: 0 0 0px #ece7e7;
max-width: 45%;
/* whatever else styles you fancy here */
}
效果如下：
图文混排，图片居右
.post-entry img[src$='#right']
{
float:right;
margin: 0.7rem; /* this margin is totally up to you */
box-shadow: 0 0 10px #555;
border-radius: 6px;
-webkit-box-shadow: 0 0 0px #ece7e7;
-moz-box-shadow: 0 0 0px #ece7e7;
max-width: 45%;
/* whatever else styles you fancy here */
}
效果如下：
Markdown写法
#基本格式
#范例
方案二
另外，还发现了一种更简洁的CSS3写法
图文混排，图片居右
.post-entry img[alt$=">"] {
float: right;
margin: 0.7rem; /* this margin is totally up to you */
box-shadow: 0 0 10px #555;
border-radius: 6px;
-webkit-box-shadow: 0 0 0px #ece7e7;
-moz-box-shadow: 0 0 0px #ece7e7;
max-width: 45%;
}
图文混排，图片居左
.post-entry img[alt$="<"] {
float: left;
margin: 0.7rem; /* this margin is totally up to you */
box-shadow: 0 0 10px #555;
border-radius: 6px;
-webkit-box-shadow: 0 0 0px #ece7e7;
-moz-box-shadow: 0 0 0px #ece7e7;
max-width: 45%;
}
图文混排，图片居中
.post-entry img[alt$="><"] {
display: block;
float: none!important;
margin: 0.7rem auto; /* you can replace the vertical '0.7rem' by
whatever floats your boat, but keep the
horizontal 'auto' for this to work */
box-shadow: 0 0 10px #555;
border-radius: 6px;
-webkit-box-shadow: 0 0 0px #ece7e7;
-moz-box-shadow: 0 0 0px #ece7e7;
max-width: 75%;
vertical-align: middle;
/* whatever else styles you fancy here */
}
Markdown写法
#基本格式
#范例
