Skip to content

Commit

Permalink
Merge pull request #16 from Astrian/v1.0
Browse files Browse the repository at this point in the history
新的「文章标签」分类页
  • Loading branch information
Astrian Zheng authored Oct 8, 2019
2 parents b9e758b + e0e4ad9 commit a27327d
Show file tree
Hide file tree
Showing 9 changed files with 221 additions and 49 deletions.
103 changes: 101 additions & 2 deletions asset/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -69,10 +69,16 @@ body {
font-size: 18px;
line-height: 30px;
}
.article.huge .time {
.article.huge .meta {
font-size: 14px;
color: rgba(20, 102, 121, 0.5);
color: rgb(130, 155, 161);
padding-top: 15px;
margin-bottom: 8px;
}
.article.huge .meta a {
color: rgb(130, 155, 161);
margin-right: 8px;
text-decoration: underline;
}
.article.huge .tags {
margin-bottom: 5px;
Expand Down Expand Up @@ -237,6 +243,9 @@ span.smallcaps {
padding-top: 30px;
font-size: 16px;
}
#page a:hover {
text-decoration: none;
}

.archives .yeartitle {
margin-top: 32px;
Expand All @@ -252,6 +261,56 @@ span.smallcaps {
text-decoration: none;
}

#tags .tagmeta {
text-align: right;
}
#tags .tagmeta .tagname {
font-size: 32px;
color: #042f39;
}
#tags .tagmeta .tagdescription {
margin-top: 12px;
color: rgba(0, 0, 0, 0.8);
}
#tags .tagmeta .tagpagetitle {
color: gray;
font-size: 14px;
letter-spacing: 3px;
font-weight: 100;
}
#tags .posts a {
text-decoration: none;
}
#tags .posts a .post {
display: flex;
padding-top: 8px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
#tags .posts a:last-child .post {
padding-bottom: 0px;
border-bottom: none;
}
#tags .posts .post .featimg {
width: 200px;
margin-right: 8px;
height: 112.5px;
background-size: cover;
background-position: center;
}
#tags .posts .post .postcontent {
flex: 1;
}
#tags .posts .post .postcontent .title {
font-size: 20px;
color: #042f39;
margin-bottom: 4px;
}
#tags .posts .post .postcontent .subtitle {
font-size: 14px;
color: rgba(0, 0, 0, 0.4);
}

/* Mobile devices-friendly styles */

@media (max-width: 767.98px) {
Expand Down Expand Up @@ -333,6 +392,25 @@ span.smallcaps {
#likecoinarea {
font-size: 14px;
}

#tags .posts .post {
flex-direction: row-reverse;
}
#tags .tagmeta {
text-align: left;
margin-bottom: 32px;
margin-top: 16px;
}
#tags .posts .post .featimg {
width: 160px;
margin-right: 8px;
height: 90px;
background-size: cover;
background-position: center;
}
#tags .tagmeta .tagdescription {
margin-top: 6px;
}
}

@media (prefers-color-scheme: dark) {
Expand Down Expand Up @@ -395,9 +473,30 @@ span.smallcaps {
color: rgba(255, 255, 255, 0.4);
text-decoration: underline;
}
#page h1.title {
color: #c8dce0;
}
#page a, #page a:hover {
color: #c8dce0;
}
@media (max-width: 767.98px) {
.article.normal {
border-top: 0.5px solid rgba(255,255,255,0.06);
}
}
#tags .tagmeta .tagpagetitle {
color: rgb(206, 206, 206);
}
#tags .tagmeta .tagname, #tags .posts a .post .postcontent .title {
color: #c8dce0;
}
#tags .posts a .post .postcontent .subtitle {
color: rgba(255, 255, 255, 0.5);
}
#tags .posts a .post {
border-bottom: 1px solid rgba(255,255,255,0.4);
}
#tags .tagmeta .tagdescription {
color: rgba(255, 255, 255, 0.8);
}
}
2 changes: 1 addition & 1 deletion category.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<div class="col-md-10 post">
<div class="headline"><a href="{{ p.url }}">{{ p.title }}</a></div>
{% if p.ext_subtitle.length %}<div class="subtitle">{{p.ext_subtitle}}</div>{% /if %}
<div class="time">$[timeformat('{{p.dateGTM}}')]</div>
<div class="meta"><span class="time">$[timeformat('{{p.dateGTM}}')]</span></div>
<div class="body">
{{ p.desContent }}
</div>
Expand Down
6 changes: 6 additions & 0 deletions extensions/config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"isCreateCategoriesPages": true,
"isCreateTagsPages": true,
"isCreateTreeVars": false,
"isCreateArchivesVarsToIndex": false
}
74 changes: 43 additions & 31 deletions extensions/site.json
Original file line number Diff line number Diff line change
@@ -1,32 +1,44 @@
[
{
"title": "你的笔名",
"variableName": "username",
"inputFieldHeight": 22,
"exampleText": "John Appleseed"
},
{
"title": "脚注信息",
"variableName": "footer",
"inputFieldHeight": 66,
"exampleText": "使用 <br> 来进行换行..."
},
{
"title": "Favicon 图标",
"variableName": "favicon",
"inputFieldHeight": 22,
"exampleText": "可留空,浏览器会使用默认标志替代它"
},
{
"title": "你的 Like.co 用户名",
"variableName": "likecoinusername",
"inputFieldHeight": 22,
"exampleText": "如无可不填写"
},
{
"title": "自定义样式",
"variableName": "customstyle",
"inputFieldHeight": 110,
"exampleText": "不推荐自行修改,如有需要,请在模板开发者的指导下修改该自定义样式。"
}
]
{
"title": "你的笔名",
"variableName": "username",
"inputFieldHeight": 22,
"exampleText": "John Appleseed"
},
{
"title": "Twitter 用户名",
"variableName": "twitter",
"inputFieldHeight": 22,
"exampleText": "网站文章分享至 Twitter 时,将会附带该用户名。"
},
{
"title": "脚注信息",
"variableName": "footer",
"inputFieldHeight": 66,
"exampleText": "使用 <br> 来进行换行..."
},
{
"title": "Favicon 图标",
"variableName": "favicon",
"inputFieldHeight": 22,
"exampleText": "可留空,浏览器会使用默认标志替代它"
},
{
"title": "你的 Like.co 用户名",
"variableName": "likecoinusername",
"inputFieldHeight": 22,
"exampleText": "如无可不填写"
},
{
"title": "标签简短介绍",
"variableName": "tagsdescription",
"inputFieldHeight": 110,
"exampleText": "需要使用特定的 JSON 格式。有关该功能详情,请访问 https://dwz.cn/X5CCdpvF。"
},
{
"title": "自定义样式",
"variableName": "customstyle",
"inputFieldHeight": 110,
"exampleText": "不推荐自行修改,如有需要,请在模板开发者的指导下修改该自定义样式。"
}
]
9 changes: 5 additions & 4 deletions header.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,23 @@
{{ siteName }}
{% /if %}
</title>
<meta name="keywords" content="{% for tag in post.tags %}{{tag.name}}, {% /for %}{{siteName}}" />
{% if posts.length %}
{% else %}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@Astrian_Zheng" />
{% if ext_twitter %}<meta name="twitter:creator" content="@{{ext_twitter}}" />{% /if %}
<meta property="og:url" content="{{siteURL}}{{ post.url }}" />
<meta property="og:title" content="{{post.title}}" />
{% if p.ext_subtitle.length %}
{% if post.ext_subtitle.length %}
<meta property="og:description" content="{{post.ext_subtitle}}" />
<meta name="description" content="{{post.ext_subtitle}}" />
{% else %}
<meta property="og:description" content="{{post.title}}" />
{% /if %}
{% if post.ext_featureimg.length %}
<meta property="og:image" content="{{post.ext_featureimg}}" />
<meta name="twitter:image" content="{{post.ext_featureimg}}">
{% /if %}
<meta name="twitter:image" content="{{post.ext_featureimg}}" />
{% /if %}
<meta property="og:site_name" content="{{ siteName }}" />
{% /if %}
{% if ext_favicon.length %}
Expand Down
2 changes: 1 addition & 1 deletion post.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div class="post">
<div class="headline"><a href="{{ post.url }}">{{ post.title }}</a></div>
{% if post.ext_subtitle.length %}<div class="subtitle">{{post.ext_subtitle}}</div>{% /if %}
<div class="time">$[timeformat('{{post.dateGTM}}')]</div>
<div class="meta"><span class="time">$[timeformat('{{post.dateGTM}}')]</span><br><span class="tags">{% for tag in post.tags %}<a href="{{tag.url}}">#{{tag.name}}</a>{% /for %}</span></div>
<div class="body">
{{ post.content }}
</div>
Expand Down
21 changes: 11 additions & 10 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,24 +32,29 @@ git clone https://github.com/Astrian/reflect-white-mweb-theme
所有配置都可以在 MWeb 中完成。

### 网站基础配置
以下设置除另做标注外,都为非必填。

![MWeb 静态博客设置](https://i.imgur.com/FeADjIy.png)

- 网站名称:访客访问你的网站时,主题显示的网站名称。
- 网站网址:请携带 `http://``https://`,就是你的网站域名。
- 每页显示文章数:顾名思义,不做过多解释。建议使用奇数,以获得最佳体验。
- 网站名称(必填):访客访问你的网站时,主题显示的网站名称。
- 网站网址(必填):请携带 `http://``https://`,就是你的网站域名。
- 每页显示文章数(必填):顾名思义,不做过多解释。建议使用奇数,以获得最佳体验。
- 网站描述:每页底部 footer 中字号最大的 slogan。
- 评论和分享代码:粘贴社会化评论工具的代码,会应用于文章页面底部。
- 网站其他代码:可以插入需要在 `<head>` 部分插入的代码。

### 网站扩展配置
![MWeb 偏好设置的「扩展」页面](https://i.imgur.com/D2wpgqq.png)
以下设置皆为非必填。

![MWeb 偏好设置的「扩展」页面](https://i.imgur.com/TPm05SR.png)

- 你的笔名:会应用于 RSS 输出。
- Twitter 用户名:当你的文章被分享至 Twitter 时,文章卡片上需要标注哪一个 Twitter 用户?填写 Twitter 的用户名(username)而不是显示名。
- 脚注信息:会应用于每页底部的小字体脚注。
- Favicon 图标:访客打开你的网站时,浏览器会将其标志于网页标签页图标。可以使用 PNG 和 ICO 格式的图片。
- 你的 Like.co 用户名:如果你有 [Like.co](https://like.co/in) 的创作者帐户,可在此填入你的 Liker ID。填入后,每篇文章底部将会显示你的 Liker Widget,当读者注册后为你的文章点赞,你将可获得实质性收入。

![Like Widget 效果示例](https://i.imgur.com/aWYyVbW.png)
- 标签简短介绍:在文章标签页面,为标签加注一段简短的介绍。[详情...](https://github.com/Astrian/reflect-white-mweb-theme/blob/master/tagdes-info.md)
- 自定义样式:为博客设定更个性化的样式(高级)。

### 网站菜单设置
![MWeb 偏好设置的「扩展」页面](https://i.imgur.com/ajxmEnT.png)
Expand All @@ -63,7 +68,3 @@ git clone https://github.com/Astrian/reflect-white-mweb-theme

- 次要标题:会在文章详情页和列表页的文章标题之下显示,帮助读者快速了解文章的主旨。相当于微信公众号中的「摘要」一栏。
- 题图:会在文章详情页和列表页显示。**可以使用 MWeb 提供的相对路径**,也可以使用网络图片或 CDN 图片。

## 未来更新计划
- [x] 优化移动设备使用
- [ ] 支持 AMP
24 changes: 24 additions & 0 deletions tagdes-info.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# 标签简短介绍功能说明
Reflect White 主题支持 MWeb 3.3.1 及之后的版本中,新增的按文章标签分类文章的功能。在此基础之上,Reflect White 主题进一步支持对特定话题的标签添加简短介绍功能。

生效后,该简短介绍将会在对应的标签页面下显示。

![标签简短介绍生效后的页面展示](https://i.imgur.com/C4QeKkT.png)

如果你需要为不同的文章话题标签撰写简短介绍,你需要在 MWeb 的对应静态网站中,写入特定的 JSON 对象。具体方法如下:

- 从 MWeb 主界面的最左侧文章分类视图中,找到你的网站,右键点击选择「编辑」,再从弹出框中选择「高级设置」。
- 在「网站扩展设置」中,找到「标签简短介绍」一项,填入特定格式的 JSON。

JSON 格式如下:

```json
{
"标签名称": "标签说明",
"标签名称": "标签说明"
}
```

![标签简短介绍设置页面](https://i.imgur.com/TPm05SR.png)

需要注意的是,标签名称必须与文章所添加的标签 *完全一致*,才能被正确读取与显示。例如,「IFS RSVP Bot」与「IFSRSVPBot」和「IFS-RSVP-Bot」是完全不一样的标签。
29 changes: 29 additions & 0 deletions tags.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<div class="container" id="tags">
<div class="row">
<div class="col-md-4 tagmeta">
<div class="tagpagetitle">文章标签</div>
<div class="tagname">#{{currentTag.name}}</div>
<div class="tagdescription" v-if="descriptions['{{currentTag.name}}']">${descriptions['{{currentTag.name}}']}</div>
</div>
<div class="col-md-8 posts">
{% for p in posts %}
<a href="{{p.url}}"><div class="post">
<div class="featimg" style="background-image: url('{% if p.ext_featureimg.length %}{{p.ext_featureimg}}{% else %}asset/defaultfeaimg.jpg{% /if %}')"></div>
<div class="postcontent">
<div class="title">{{p.title}}</div>
<div class="subtitle">{{p.ext_subtitle}}</div>
</div>
</div></a>
{% /for %}
</div>
</div>
</div>
<script>
let tags = new Vue({
el: '#tags',
data: {
descriptions: JSON.parse('{{ ext_tagsdescription }}')
},
delimiters: ['${', '}']
})
</script>

0 comments on commit a27327d

Please sign in to comment.