add new theme: VideoBlog

conf/app.php

@@ -6,9 +6,9 @@ return array(
     'default_timezone' => 'Asia/Shanghai',   //timezone
 
     //文档站皮肤
-    'content_directory' => 'content/',      //directory of contents in /www/
+    //'content_directory' => 'content/',      //directory of contents in /www/
     //when it's empty, use layout and views in directory views/
-    'theme' => 'manual',                    //name of theme which is enabled
+    //'theme' => 'manual',                    //name of theme which is enabled
 
     //导航站皮肤
     //'content_directory' => 'navs/',      //directory of contents in /www/
@@ -18,6 +18,10 @@ return array(
     //'content_directory' => 'girls/',           //directory of contents in /www/
     //'theme' => 'googleimage',                 //name of theme which is enabled
 
+    //视频站皮肤
+    'content_directory' => 'videos/',           //directory of contents in /www/
+    'theme' => 'videoblog',                 //name of theme which is enabled
+                                            
     'default_layout' => 'main',             //default layout
     'error_layout' => 'error',              //exception layout, show error title and content
 
@@ -26,9 +30,16 @@ return array(
 
     //for themes
     /*
+    //图片皮肤配置
     'googleimage' => [
         'imageHeight' => 350,           //图片高度，单位：px
         'contact' => 'FileSite图片网站订制联系：<a href="https://filesite.io" target="_blank">FileSite.io</a>',
     ],
     */
+
+    //视频皮肤配置
+    'videoblog' => [
+        'imageHeight' => 180,           //图片高度，单位：px
+        'contact' => 'FileSite视频网站订制联系：<a href="https://filesite.io" target="_blank">FileSite.io</a>',
+    ],
 );

themes/videoblog/controller/ListController.php

@@ -0,0 +1,81 @@
+<?php
+/**
+ * List Controller
+ */
+require_once __DIR__ . '/../../../lib/DirScanner.php';
+require_once __DIR__ . '/../../../plugins/Parsedown.php';
+
+Class ListController extends Controller {
+
+    public function actionIndex() {
+        //获取数据
+        $scanner = new DirScanner();
+        $scanner->setWebRoot(FSC::$app['config']['content_directory']);
+        $dirTree = $scanner->scan(__DIR__ . '/../../../www/' . FSC::$app['config']['content_directory'], 4);
+        $scanResults = $scanner->getScanResults();
+
+        //获取目录
+        $menus = $scanner->getMenus();
+        $cateId = $this->get('id', $menus[0]['id']);
+
+        $titles = [];
+        $htmlReadme = '';
+        $readmeFile = $scanner->getDefaultReadme();
+        if (!empty($readmeFile)) {
+            $titles = $scanner->getMDTitles($readmeFile['id']);
+
+            $Parsedown = new Parsedown();
+            $content = file_get_contents($readmeFile['realpath']);
+            $htmlReadme = $Parsedown->text($content);
+            $htmlReadme = $scanner->fixMDUrls($readmeFile['realpath'], $htmlReadme);
+        }
+
+        //获取目录面包屑
+        $subcate = $scanResults[$cateId];
+        $breadcrumbs = $this->getBreadcrumbs($menus, $subcate);
+
+        //获取当前目录下的readme
+        $htmlCateReadme = '';
+        $cateReadmeFile = $scanner->getDefaultReadme($cateId);
+        if (!empty($cateReadmeFile)) {
+            $Parsedown = new Parsedown();
+            $content = file_get_contents($cateReadmeFile['realpath']);
+            $htmlCateReadme = $Parsedown->text($content);
+            $htmlCateReadme = $scanner->fixMDUrls($cateReadmeFile['realpath'], $htmlCateReadme);
+        }
+
+        $pageTitle = !empty($titles) ? $titles[0]['name'] : "FileSite.io - 无数据库、基于文件和目录的Markdown文档、网址导航、图书、图片、视频网站PHP开源系统";
+        if (!empty($subcate)) {
+            $pageTitle = "{$subcate['directory']}的照片，来自{$pageTitle}";
+            if (!empty($subcate['title'])) {
+                $pageTitle = $subcate['title'];
+            }
+        }
+        $viewName = '//site/index';     //共享视图
+        $params = compact('cateId', 'dirTree', 'scanResults', 'menus', 'htmlReadme', 'breadcrumbs', 'htmlCateReadme');
+        return $this->render($viewName, $params, $pageTitle);
+    }
+
+    //根据目录结构以及当前目录获取面包屑
+    protected function getBreadcrumbs($menus, $subcate) {
+        $breads = [];
+
+        array_push($breads, [
+            'id' => $subcate['id'],
+            'name' => $subcate['directory'],
+            'url' => $subcate['path'],
+        ]);
+
+        $foundKey = array_search($subcate['pid'], array_column($menus, 'id'));
+        if ($foundKey !== false) {
+            array_unshift($breads, [
+                'id' => $menus[$foundKey]['id'],
+                'name' => $menus[$foundKey]['directory'],
+                'url' => $menus[$foundKey]['path'],
+            ]);
+        }
+
+        return $breads;
+    }
+
+}

themes/videoblog/controller/SiteController.php

@@ -0,0 +1,57 @@
+<?php
+/**
+ * Site Controller
+ */
+require_once __DIR__ . '/../../../lib/DirScanner.php';
+require_once __DIR__ . '/../../../plugins/Parsedown.php';
+
+Class SiteController extends Controller {
+
+    public function actionIndex() {
+        //获取数据
+        $scanner = new DirScanner();
+        $scanner->setWebRoot(FSC::$app['config']['content_directory']);
+        $dirTree = $scanner->scan(__DIR__ . '/../../../www/' . FSC::$app['config']['content_directory'], 4);
+        $scanResults = $scanner->getScanResults();
+
+        //获取目录
+        $menus = $scanner->getMenus();
+        $cateId = $this->get('id', $menus[0]['id']);
+
+        $titles = [];
+        $htmlReadme = '';
+        $readmeFile = $scanner->getDefaultReadme();
+        if (!empty($readmeFile)) {
+            $titles = $scanner->getMDTitles($readmeFile['id']);
+
+            $Parsedown = new Parsedown();
+            $content = file_get_contents($readmeFile['realpath']);
+            $htmlReadme = $Parsedown->text($content);
+            $htmlReadme = $scanner->fixMDUrls($readmeFile['realpath'], $htmlReadme);
+        }
+
+        $subcate = $scanResults[$cateId];
+
+        //获取当前目录下的readme
+        $htmlCateReadme = '';
+        $cateReadmeFile = $scanner->getDefaultReadme($cateId);
+        if (!empty($cateReadmeFile)) {
+            $Parsedown = new Parsedown();
+            $content = file_get_contents($cateReadmeFile['realpath']);
+            $htmlCateReadme = $Parsedown->text($content);
+            $htmlCateReadme = $scanner->fixMDUrls($cateReadmeFile['realpath'], $htmlCateReadme);
+        }
+
+        $pageTitle = !empty($titles) ? $titles[0]['name'] : "FileSite.io - 无数据库、基于文件和目录的Markdown文档、网址导航、图书、图片、视频网站PHP开源系统";
+        if (!empty($readmeFile['title'])) {
+            $pageTitle = $readmeFile['title'];
+        }
+        if (!empty($subcate)) {
+            $pageTitle = "{$subcate['directory']}，来自{$pageTitle}";
+        }
+        $viewName = 'index';
+        $params = compact('cateId', 'dirTree', 'scanResults', 'menus', 'htmlReadme', 'htmlCateReadme');
+        return $this->render($viewName, $params, $pageTitle);
+    }
+
+}

themes/videoblog/views/layout/main.php

@@ -0,0 +1,117 @@
+<?php
+//常用方法
+require_once __DIR__ . '/../../../../plugins/Html.php';
+
+?><!DocType html>
+<html>
+<head>
+<meta charset="utf-8">
+<title><?php echo $pageTitle;?></title>
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+<link rel="icon" type="image/x-icon" href="/favicon.ico?v1.0">
+<link href="/css/main.css?v.1.1" rel="stylesheet">
+<!--for theme videoblog-->
+<link href="/css/github-markdown-dark.css" rel="stylesheet">
+<link href="/css/video-js.min.css" rel="stylesheet">
+<link href="/css/videoblog.css?v<?=Html::getStaticFileVersion('videoblog.css', 'css')?>" rel="stylesheet">
+<style>
+<?php if (!empty(FSC::$app['config']['videoblog']['imageHeight'])) { ?>
+    .img-item img{height: <?php echo FSC::$app['config']['videoblog']['imageHeight']; ?>px;}
+<?php } ?>
+</style>
+</head>
+<body>
+
+    <div class="header">
+        <a href="/" class="logo">
+            <img src="/content/machete_icon.png" alt="Logo of FileSite.io" height="34">
+            FileSite.io
+        </a>
+        <a href="#modal_about" role="button" class="about btn-open">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="24" height="24"><!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M191.1 224c0-17.72-14.34-32.04-32-32.04L144 192c-35.34 0-64 28.66-64 64.08v47.79C80 339.3 108.7 368 144 368H160c17.66 0 32-14.36 32-32.06L191.1 224zM256 0C112.9 0 4.583 119.1 .0208 256L0 296C0 309.3 10.75 320 23.1 320S48 309.3 48 296V256c0-114.7 93.34-207.8 208-207.8C370.7 48.2 464 141.3 464 256v144c0 22.09-17.91 40-40 40h-110.7C305 425.7 289.7 416 272 416H241.8c-23.21 0-44.5 15.69-48.87 38.49C187 485.2 210.4 512 239.1 512H272c17.72 0 33.03-9.711 41.34-24H424c48.6 0 88-39.4 88-88V256C507.4 119.1 399.1 0 256 0zM368 368c35.34 0 64-28.7 64-64.13V256.1C432 220.7 403.3 192 368 192l-16 0c-17.66 0-32 14.34-32 32.04L320 335.9C320 353.7 334.3 368 352 368H368z"/></svg>
+        </a>
+    </div>
+
+<?php
+//### Render view file
+if (!empty($viewFile) && file_exists($viewFile)) {
+    include_once $viewFile;
+}
+?>
+
+    <div class="modal-mask" id="modal_about">
+        <div class="modal-about">
+            <div class="modal-head">
+                <h3>联系我</h3>
+                <span class="btn-close" role="button"><svg width="24" height="24" viewBox="0 0 24 24" focusable="false" class=" NMm5M"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg></span>
+            </div>
+            <div class="hr"></div>
+            <div class="modal-body markdown-body">
+                <?php echo !empty($viewData['htmlReadme']) ? $viewData['htmlReadme'] : ''; ?>
+            </div>
+        </div>
+    </div>
+
+    <div class="footer">
+        <?php if (!empty(FSC::$app['config']['theme'])) { ?>
+            Theme name <strong><?php echo FSC::$app['config']['theme']; ?></strong>
+            <br>
+        <?php } ?>
+        &copy;FSC 2022 - execute time: {page_time_cost} ms
+        <?php if (!empty(FSC::$app['config']['videoblog']['contact'])) {
+            $contactInfo = FSC::$app['config']['videoblog']['contact'];
+            echo <<<eof
+        <p>{$contactInfo}</p>
+eof;
+        } ?>
+    </div>
+
+    <!-- The Gallery as lightbox dialog, should be a document body child element -->
+    <div
+      id="blueimp-gallery"
+      class="blueimp-gallery blueimp-gallery-controls"
+      aria-label="image gallery"
+      aria-modal="true"
+      role="dialog"
+    >
+      <div class="slides" aria-live="polite"></div>
+      <h3 class="title"></h3>
+      <a
+        class="prev"
+        aria-controls="blueimp-gallery"
+        aria-label="previous slide"
+        aria-keyshortcuts="ArrowLeft"
+      ></a>
+      <a
+        class="next"
+        aria-controls="blueimp-gallery"
+        aria-label="next slide"
+        aria-keyshortcuts="ArrowRight"
+      ></a>
+      <a
+        class="close"
+        aria-controls="blueimp-gallery"
+        aria-label="close"
+        aria-keyshortcuts="Escape"
+      ></a>
+      <a
+        class="play-pause"
+        aria-controls="blueimp-gallery"
+        aria-label="play slideshow"
+        aria-keyshortcuts="Space"
+        aria-pressed="false"
+        role="button"
+      ></a>
+      <ol class="indicator"></ol>
+    </div>
+
+    <script src="/js/jquery-3.6.0.min.js"></script>
+    <script src="/js/js.cookie.min.js"></script>
+    <script src="/js/main.js?v.1.0"></script>
+    <!--for theme videoblog-->
+    <script src="/js/lazysizes.min.js"></script>
+    <script src="/js/video.min.js"></script>
+    <script src="/js/videoblog.js?v<?=Html::getStaticFileVersion('videoblog.js', 'js')?>"></script>
+</body>
+</html>

themes/videoblog/views/site/index.php

@@ -0,0 +1,133 @@
+<div class="menu">
+<?php
+$selectedId = $viewData['cateId'];
+$breadcrumbs = !empty($viewData['breadcrumbs']) ? $viewData['breadcrumbs'] : [];
+if (!empty($viewData['menus'])) {		//只显示第一级目录
+	foreach($viewData['menus'] as $index => $item) {
+		$selected = $item['id'] == $selectedId || (!empty($breadcrumbs) && $item['id'] == $breadcrumbs[0]['id']) ? 'selected' : '';
+		echo <<<eof
+		<a href="/?id={$item['id']}" class="{$selected}">{$item['directory']}</a>
+eof;
+	}
+}
+?>
+</div>
+
+<div class="hr"></div>
+
+<?php
+if (!empty($breadcrumbs)) {
+	echo <<<eof
+	<div class="breadcrumbs">
+		<small>当前位置：</small>
+eof;
+
+	foreach($breadcrumbs as $bread) {
+		if ($bread['id'] != $selectedId) {
+			echo <<<eof
+		<a href="{$bread['url']}">{$bread['name']}</a> / 
+eof;
+		}else {
+			echo <<<eof
+		<strong>{$bread['name']}</strong>
+eof;
+		}
+	}
+
+	echo <<<eof
+	</div>
+eof;
+}
+?>
+
+<div class="content">
+	<?php
+		$imgExts = ['jpg', 'jpeg', 'png', 'gif'];
+		$category = $viewData['scanResults'][$selectedId];
+
+		//当前目录的描述介绍
+		if (!empty($category['description'])) {
+			echo <<<eof
+	<p class="catedesc">{$category['description']}</p>
+eof;
+		}
+
+		//当前目录的readme详细介绍
+		if (!empty($viewData['htmlCateReadme'])) {
+			echo <<<eof
+	<div class="cateinfo markdown-body">{$viewData['htmlCateReadme']}</div>
+eof;
+		}
+
+		if (!empty($category['directories'])) {		//两级目录支持
+			foreach($category['directories'] as $dir) {
+				echo <<<eof
+			<a href="{$dir['path']}" class="img-item">
+				<span class="img-con video-js vjs-big-play-centered">
+eof;
+
+				if (!empty($dir['snapshot'])) {
+					echo <<<eof
+	<img data-src="{$dir['snapshot']}" class="lazyload" alt="{$dir['directory']}">
+eof;
+				}else if (!empty($dir['files'])) {
+					$first_img = array_shift($dir['files']);
+					if (!in_array($first_img['extension'], $imgExts)) {
+						foreach($dir['files'] as $file) {
+							if (in_array($file['extension'], $imgExts)) {
+								$first_img = $file;
+								break;
+							}
+						}
+					}
+
+					if (in_array($first_img['extension'], $imgExts)) {
+						echo <<<eof
+	<img data-src="{$first_img['path']}" class="lazyload" alt="{$first_img['filename']}">
+eof;
+					}
+				}
+
+				if (!empty($dir['duration'])) {
+					echo <<<eof
+	<span class="duration">{$dir['duration']}</span>
+eof;
+				}
+
+				$title = !empty($dir['title']) ? $dir['title'] : $dir['directory'];
+				echo <<<eof
+					<button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false" style="display:none">
+						<span class="vjs-icon-placeholder" aria-hidden="true"></span>
+						<span class="vjs-control-text" aria-live="polite">Play Video</span>
+					</button>
+				</span>
+				<strong>{$title}</strong>
+			</a>
+eof;
+			}
+		}
+
+		if (!empty($category['files'])) {		//一级目录支持
+			foreach($category['files'] as $file) {
+				if (!in_array($file['extension'], $imgExts)) {continue;}
+
+				$duration = !empty($category['duration']) ? $category['duration'] : '';
+
+				$title = !empty($file['title']) ? $file['title'] : $file['filename'];
+				echo <<<eof
+	<a href="{$file['path']}" class="img-item img-preview" target="_blank">
+		<span class="img-con video-js vjs-big-play-centered">
+			<img data-src="{$file['path']}" class="lazyload" alt="{$file['filename']}">
+			<span class="duration">{$duration}</span>
+			<button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false" style="display:none">
+				<span class="vjs-icon-placeholder" aria-hidden="true"></span>
+				<span class="vjs-control-text" aria-live="polite">Play Video</span>
+			</button>
+		</span>
+		<strong>{$title}</strong>
+	</a>
+eof;
+			}
+		}
+	?>
+</div>

www/content/Manual.md

@@ -163,11 +163,12 @@ URL=https://microsoft.com/
 
 | 文件名 | 用途 | 字段 |
 | ---- | ---- | ---- |
+| title.txt | 标题 | title |
 | description.txt | 描述信息 | description |
 | keywords.txt | 关键词信息 | keywords |
 | snapshot.txt | 快照图片 | snapshot |
 
-特殊描述文件都是可选的，如果有则优先使用里面的内容。
+特殊描述文件都是可选的，如果有则优先使用里面的内容，其它需要扩展的字段只需添加{英文小写}.txt后缀的文件即可。
 
 说明：
 其中snapshot.txt里的内容为跟当前txt文件**同目录的图片文件名**，
@@ -184,6 +185,7 @@ URL=https://microsoft.com/
      |_f_ snapshot.txt
      |_f_ 金庸小说封面图_1.jpg
      |_f_ 金庸小说封面图_new.png
+     |_f_ author.txt
 ```
 
 描述文件和被描述的文件命名规则：

www/css/videoblog.css

@@ -0,0 +1,50 @@
+/* for theme VideoBlog */
+body{background-color:#202124;color: #e8eaed;font-family: Roboto,HelveticaNeue,Arial,sans-serif;font-size: small;margin: 0}
+a{color: #aaadb2;text-decoration: none}
+.header{padding:10px 10px 0 10px;position: relative;}
+.header .logo{display: inline-block;margin:10px 10px 6px 10px;font-size: 1.86em;color: #e8eaed}
+.header .logo img{vertical-align: middle;}
+.menu{max-width: 80%;white-space: nowrap;overflow-x:auto;overflow-y: hidden;margin: 0 auto;}
+.menu a{display: inline-block;line-height: 16px;margin: 0 1px;padding: 16px 12px 12px 10px;text-align: center}
+.menu .selected{color: #8ab4f8;border-bottom: 3px solid #8ab4f8;padding: 20px 12px 11px 10px;}
+.hr{border-bottom: solid 1px #3c4043;margin-bottom: 11px}
+.about{display: block;position: absolute;right: 10px;top: 14px;width: 24px;height: 24px;padding: 8px;border-radius: 50%}
+.about:hover{background-color: #303134}
+.about svg{fill: currentColor;cursor: pointer;}
+.modal-mask{display: none;background: rgba(0,0,0,.6);position: fixed;left: 0;right: 0;top: 0;bottom: 0;overflow: hidden;z-index: 9000;}
+.modal-about{background: #202124;bottom: 0;overflow-y: auto;position: fixed;right: 0px;top: 0;width: 360px;max-width: 100%;}
+.modal-about h3{color: #e8eaed;font-size: 24px;font-weight: 300;margin-top: 0;margin-bottom: 20px;text-align: left;}
+.modal-about .modal-head{padding: 20px 24px 0 24px}
+.modal-about .btn-close{color: #9aa0a6;cursor: pointer;display: block;float: right;position: relative;top: -45px;}
+.modal-about .btn-close svg{fill: currentColor;flex-shrink: 0;}
+.modal-body{padding: 10px;background-color: inherit;}
+.modal-about .modal-body h1{display: none;}
+.breadcrumbs{padding-left: 1.5em;padding-bottom: 10px;}
+.content{padding: 20px 10px}
+.img-item{display: inline-block;margin-left: 10px;margin-right: 10px;margin-bottom: 20px;cursor: pointer}
+.img-item img{height: 180px;object-fit: cover;}
+.img-item strong{display: block;color: #bdc1c6;font-family: Roboto,Arial,sans-serif;font-size: 12px;letter-spacing: .2px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
+.img-item .img-con{display:block;position: relative;width: 100%;height: auto}
+.img-item .duration{display: block;position: absolute;right: 2px;bottom: 5px;background-color: #000;opacity: 0.6;padding: 1px 3px;color: #FFF;border-radius:3px;font-weight: bold;}
+.img-item:hover .vjs-big-play-button{display: inherit !important}
+.catedesc{padding: 0 10px}
+.cateinfo{margin-bottom: 1em;padding: 5px 10px 10px 10px}
+
+
+
+/* for mobile */
+@media only screen and (max-width: 767px) {
+    .menu{max-width:96%;font-size: 15px}
+    .img-item{margin-left: 0;margin-right: 0;width: 100%}
+    .img-item img{height: auto !important;width: 100% !important}
+    .img-item strong{font-size: 14px;}
+}
+@media only screen and (min-width: 540px) and (max-width: 767px) {
+    .img-item{width: 48%;margin-right: 5px;}
+}
+
+/* for pad */
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+    .menu{font-size: 14px}
+    .img-item strong{font-size: 13px;}
+}

www/js/videoblog.js

@@ -0,0 +1,25 @@
+/* for theme VideoBlog */
+(function() {
+    window.HELP_IMPROVE_VIDEOJS = false;        //关闭videojs ga统计
+
+    //show modal
+    $('.btn-open').click(function(evt) {
+        var target_id = $(evt.target).parents('.btn-open').attr('href');
+        if ($(evt.target).hasClass('btn-open')) {
+            target_id = $(evt.target).attr('href');
+        }
+        $(target_id).css('display', 'block');
+    });
+
+    //hide modal
+    $('.btn-close').click(function(evt) {
+        $(evt.target).parents('.modal-mask').css('display', 'none');
+    });
+    $('.modal-mask').click(function(evt) {
+        if ($(evt.target).hasClass('modal-mask')) {
+            $(evt.target).css('display', 'none');
+        }
+    });
+
+
+})();