📰 Add: 新增首页「相关链接」功能

cortmiem · Sep 24, 2022 · db86bb4 · db86bb4
1 parent 812c284
commit db86bb4
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 11 deletions.
diff --git a/assets/matcha/matcha.libs.css b/assets/matcha/matcha.libs.css
@@ -128,12 +128,14 @@ div.code-toolbar>.toolbar>.toolbar-item>button::before {
 	padding: 0 .5em
 }
 
-.post-content .bracketdown-underline {
+.post-content .bracketdown-underline,
+.section-title {
 	text-decoration: none;
 	position: relative;
 	z-index: 1
 }
-.post-content .bracketdown-underline::before{
+.post-content .bracketdown-underline::before,
+.section-title::before {
 	content: "";
     position: absolute;
     height: .8em;

diff --git a/assets/matcha/matcha.page.css b/assets/matcha/matcha.page.css
@@ -191,7 +191,7 @@
 }
 
 @media(max-width:768px) {
-	.header,.post-title,.post-meta {
+	.header {
 		text-align: center;
 	}
 }
@@ -558,4 +558,71 @@
 	clear: both;
 	width: 100%;
 	margin: 2em 0;
+}
+
+/* 首页相关链接 */
+
+.indexlink {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: 2%;
+	align-items: stretch
+}
+
+.indexlink-item {
+	width: 100%;
+	border: 2px solid var(--light-gray-bg);
+	box-sizing: border-box;
+	transition: border-color .3s;
+	margin-bottom: 1em
+}
+@media (min-width: 674px) {
+	.indexlink-item {
+		width: 49%;
+	}
+}
+@media (min-width: 962px) {
+	.indexlink-item {
+		width: 32%;
+	}
+}
+
+.indexlink-item:hover {
+	border-color: var(--theme-color)
+}
+.indexlink-item:hover a h2 {
+	color: var(--theme-color)
+}
+
+.indexlink-item a {
+	display: block;
+	color: var(--text-color);
+	padding: 1.2em;
+	height: 100%
+}
+
+.indexlink-item a h2 {
+	transition: color .3s;
+	font-size: 1.3em
+}
+
+.indexlink-item a h2,
+.indexlink-item a p {
+	margin: .25em 0
+}
+
+/* index section */
+
+.section-title {
+	width: fit-content
+}
+
+.section-title::before {
+    bottom: 0!important;
+	height: .5em!important
+}
+
+.section-title:first-child {
+	margin-top: 0
 }
diff --git a/assets/matcha/matcha.post.css b/assets/matcha/matcha.post.css
@@ -10,12 +10,8 @@
 	font-size: 1.05em;
 	margin: 2em 0
 }
-.post:first-child {
-	margin: 0
-}
-
-.post:first-child {
-	padding-top: 0
+.post-atmain:first-child {
+	margin-top: 0
 }
 
 .post-title {
@@ -608,6 +604,13 @@ h3.comment-closed.fade {
 	background: var(--theme-color)
 }
 
+/* 继续阅读按钮 */
+
+@media (min-width: 768px) {
+	.more {
+		display: none
+	}
+}
 
 /* 其他 */
 

diff --git a/includes/post-list.php b/includes/post-list.php
@@ -6,7 +6,12 @@
             'tag'       =>  _t('标签 %s 下的文章'),
             'author'    =>  _t('%s 发布的文章')
         ), '', ''); ?></h3><?php } ?>
+	<?php if($this->is('index') && $this->options->relatedLinks!=''): ?><!-- 相关链接 -->
+	<?php if($this->options->relatedLinksTitle!=''): ?><h2 class="section-title"><?php $this->options->relatedLinksTitle(); ?></h2><?php endif; ?>
+	<section class="indexlink"><?php Matcha::relatedLinks($this); ?></section><?php endif; ?>
 	<!-- 文章列表 -->
+	<?php if($this->options->relatedLinksTitle!='' && $this->options->relatedLinks!=''): ?><h2 class="section-title">最新文章</h2><?php endif; ?>
+	<section class="latest-post">
 	<?php while($this->next()): ?>
 		<article class="post post-atmain<?php if($this->fields->thumbnail!='') echo ' post-with-thumbnail'; ?>" itemscope itemtype="http://schema.org/BlogPosting">
 			<div class="post-text">
@@ -26,6 +31,7 @@
 			</div><?php endif;?>
 		</article>
 	<?php endwhile; ?>
+	</section>
 	<!-- 分页按钮 -->
 	<div class="page-navigator">
 	  <span id="previous"><?php $this->pageLink('<span class="iconfont">&#xe749;</span>'); ?></span>

diff --git a/libs/Matcha.php b/libs/Matcha.php
@@ -223,7 +223,7 @@ public static function siteName()
     public static function excerpt(Widget_Archive $archive) 
     {
         if(Helper::options()->IndexDisplayMode=='FullText'){
-            $archive->content('');
+            $archive->content('继续阅读');
         }
         elseif(Helper::options()->IndexDisplayMode=='Excerpt200'){
             $archive->excerpt(200);
@@ -443,7 +443,8 @@ public static function bodyClass() {
     /**
      * 主题色
      */
-    public static function getThemeColor() {
+    public static function getThemeColor() 
+    {
         if(Helper::options()->themeColor=='maple'){
             return '#E95A2D';
         }
@@ -463,4 +464,47 @@ public static function getThemeColor() {
             return '#c5c56a';
         }
     }
+
+    /**
+     * 首页相关链接
+     */
+    public static function relatedLinks($archives)
+    {
+        $data = '['.Helper::options()->relatedLinks.']';
+        if($data!=''){
+            $data=json_decode($data, true);
+            foreach($data as $item){
+                echo '<div class="indexlink-item">';
+
+                //如果是文章
+                if($item['type']=='post') {
+                    if(!isset($item['cid'])) {
+                        echo '没有设置 cid，请检查你的设置';
+                        return false;
+                    }
+                    $archives->widget('Widget_Archive@indexxiu', 'pageSize=1&type=post', 'cid='.$item['cid'])->to($post);
+                    echo '<a href="'.$post->permalink.'">
+                        <h2>'.$post->title.'</h2>
+                        <p>';
+                    $post->excerpt(30);
+                    echo '</p>
+                    </a>';
+                }
+                //如果是自定义链接
+                else {
+                    if(!isset($item['title']) || !isset($item['des']) || !isset($item['link'])) {
+                        echo '信息设置不完整，请检查你的设置';
+                        return false;
+                    }
+                    echo '<a href="'.$item['link'].'" target="_blank">
+                        <h2>'.$item['title'].'</h2>
+                        <p>'.$item['des'].'</p>
+                    </a>';
+                }
+
+                echo '</div>';
+            }
+        }
+        return false;
+    }
 }
diff --git a/libs/Options.php b/libs/Options.php
@@ -10,6 +10,11 @@ function themeConfig($form) {
      * 基本信息
      */
 
+    echo '<div style="border:1px solid #ddd;background:#eee;padding:1em;margin-top:1em">
+        <h1 style="margin:0;font-weight:600">Matcha 主题配置</h1>
+        <p style="line-height:1.5;margin:0">主题配置有关的说明请查看<a href="https://matcha.guhub.cn/">说明文档</a></p>
+    </div>';
+
     //主题色
     $themeColor = new Typecho_Widget_Helper_Form_Element_Radio('themeColor', array(
         'matcha' => _t('抹茶绿'),
@@ -115,6 +120,15 @@ function themeConfig($form) {
     );
     $form->addInput($EnableBusuanzi->addRule('required', _t('此处必须设置')));
 
+
+    //首页相关链接
+    $relatedLinksTitle = new Typecho_Widget_Helper_Form_Element_Text('relatedLinksTitle', NULL, NULL, _t('首页「相关链接」标题'), _t('
+        <p class="description">下一个设置项不留空则生效，自定义相关链接之前显示的标题</p>'));
+    $form->addInput($relatedLinksTitle);
+    $relatedLinks = new Typecho_Widget_Helper_Form_Element_Textarea('relatedLinks', NULL, NULL, _t('首页「相关链接」内容'), _t('
+        <p class="description">使用特定的 JSON 格式书写，可以在首页文章目录之前展示一个相关链接版块，详情请查看说明文档</p><hr>'));
+    $form->addInput($relatedLinks);
+
     /**
      * 自定义
      */