v1.3.6
-
添加折叠功能
参考
增加两种样式,一种没有文本提示,另一种有文本提示
在/layouts/shortcodes中,新建 spoiler.html,并在其中添加有文本提示
<details> <summary> {{ with .Get 0}}{{.}}{{else}}click to expand{{ end }} </summary> {{.Inner}} </details>
无文本提示
<details>
<summary>
</summary>
{{.Inner}}
</details>
v1.3.5
- 将友链样式从单列改成双列
在/assets/scss/custom/_custom.scss中将之前的友链样式删去,并添加
之后在同一目录下添加_friends.scss文件,在其中写入// 友链 @import "friends";
.friends-link::after { content: " "; display: block; clear: both; } .friends-link { display: grid; grid-gap: 0 1.5em; grid-template-columns: 1fr 1fr; } .friends { padding: 1em 0; border-bottom: 1px dashed var(--color-contrast-low); display: flex; transition: all .5s; text-decoration: none !important; overflow: hidden; .friend { text-decoration: none; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .name { font-weight: bold; margin: 0.375em 0; } .excerpt { font-size: 0.8em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .avatar { width: 4em !important; height: 4em !important; margin: 0 1em 0 0 !important; z-index: 0; } } @media (max-width: $maxWidth) { .friends-link { grid-template-columns: 1fr; } }
v1.3.1
-
修改图片大小
在/assets/scss/layout/_single.scss中.post { img { max-width: 80%; }
-
新增图片轮播短代码
{使用时将这段话删除{< imgloop "URL1,URL2,URL3,URL4,URL5" >}}
参考1,参考2
在/layouts/shortcodes中,新建 imgloop.html,并在其中添加{{ if .Site.Params.enableimgloop }} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css"> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> {{$itItems := split (.Get 0) ","}} {{range $itItems }} <div class="swiper-slide"> <img src="{{.}}" alt=""> </div> {{end}} </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, //自动调节高度 autoHeight: true, //键盘左右方向键控制 keyboardControl : true, //鼠标滑轮控制 mousewheelControl : true, //自动切换 //autoplay : 5000, //懒加载 lazyLoading : true, lazyLoadingInPrevNext : true, //无限循环 loop : true, }); </script> {{ end }}
在/assets/scss/custom/_custom.scss中添加
//图片轮播 .swiper-container { max-width: 820px; margin: 2em auto; } .swiper-slide { text-align: center; font-size: 18px; background-color: #f3f0f0; /* Center slide text vertically */ display: flex; justify-content: center; align-items: center; img { margin: 0 !important; } }
在config.toml中添加
# 是否开启轮播图 enableimgloop = true
v1.3.0
- 添加首页图片
通过config.toml中的“poetry 诗意人生”添加图片,如果是"page"模式要么会产生标题影响观感,要么会导致首页的网页名字消失
v1.2.9
- 添加修改段落间距
在/assets/scss/layout/_single.scss中.post { p { margin: 1em 0; line-height: $lineHeight; //行间距(在config.toml中调整) padding:10px 0; //段落间距 }
v1.2.8
- 给Markdown中的着重格式添加边框
例:这里被着重了
和v1.2.7一样,在/assets/scss/layout/_single.scss修改代码与代码块样式code { ... font-size: 90%; border: 1px solid #272822; } pre { ... padding: 0px 30px 0px 30px; //左右内边距为30px line-height: 1.8;//行高为1.8 border:0.5px solid #272822; //边框宽度为23px,颜色为#272822 max-height: 230px; //限制代码块高度为230px[1] code { ... } } // 代码块里的代码 pre code { border: none; //为了让着重有框,但代码块里的代码没有框 }
- [1]如果meme的config.toml中的
是否开启竖直滚动 enableOverflowY = true
,则优先调用config.toml中的代码块高度设置
v1.2.7
- 给代码块添加边框
参考
v1.2.6
- 新增友链页面 参考
v1.2.5
v1.2.0
v1.1.5
v1.1.1
- 自定义首页
在content文件夹下添加_index.md文件并在config.toml中修改首页为"page"模式
v1.0.1
- 添加“文章内插入播放器”功能,参考
v1.0.0
初始化
- 基于hugo_extended_0.89.0的MemE主题搭建。
自定义
-
背景颜色和顶栏颜色
更改后的背景颜色为#f3f0f0,由于是通过_custom.scss更改,再加上自己目前技术力不足,暗色主题现在变成只是文字颜色变淡,对使用暗色主题的用户说声抱歉,之后想起来的话会再折腾折腾,暂时把暗色模式关掉了。
顶栏颜色是在config.toml中直接删除,就变透明了。 -
网页图标
替换为像素画。 -
添加两个图标
使用在顶栏上面。
将来
对首页不太满意,但尝试了很多次也不知道怎么修改,先设置成“摘要”模式了,以后有机会再修改吧。- 想开字数统计,但开了之后“关于”页面也会有字数统计,不知道该怎么修改,先关掉了。
- 修改评论框样式
- 评论邮箱提醒功能
- 加背景图片(还没画)
- 修改评论匿名头像(也还没画)