骏九驿站
个人简历详情...
<script>
tinymce.init({
selector: '#content',
plugins: 'image link code media table textcolor codesample fullpage hr',
toolbar: 'undo redo | cut copy paste | formatselect | bold italic underline strikethrough | alignleft aligncenter alignright | bullist numlist outdent indent | lineheight forecolor backcolor | h2 h3 h4 h5 | link image media | table code codesample | hr removeformat print fullscreen',
codesample_content_css: 'https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css', // 可以选择不同的主题，如：Default()|Dark|Funky(funky)|Okaidia(okaidia)|Twilight(twilight)|Coy(coy)|Solarized Light(solarizedlight)|Tomorrow Night(tomorrow)
codesample_languages: [
{text:'HTML/XML', value:'markup'}, {text:"XML", value:"xml"}, {text:"HTML", value:"html"}, {text:"mathml", value:"mathml"}, {text:"SVG", value:"svg"}, {text:"CSS", value:"css"}, {text:"Clike", value:"clike"}, {text:"Javascript", value:"javascript"}, {text:"ActionScript", value:"actionscript"}, {text:"apacheconf", value:"apacheconf"}, {text:"apl", value:"apl"}, {text:"applescript", value:"applescript"}, {text:"asciidoc", value:"asciidoc"}, {text:"aspnet", value:"aspnet"}, {text:"autoit", value:"autoit"}, {text:"autohotkey", value:"autohotkey"}, {text:"bash", value:"bash"}, {text:"basic", value:"basic"}, {text:"batch", value:"batch"}, {text:"c", value:"c"}, {text:"brainfuck", value:"brainfuck"}, {text:"bro", value:"bro"}, {text:"bison", value:"bison"}, {text:"C#", value:"csharp"}, {text:"C++", value:"cpp"}, {text:"CoffeeScript", value:"coffeescript"}, {text:"ruby", value:"ruby"}, {text:"d", value:"d"}, {text:"dart", value:"dart"}, {text:"diff", value:"diff"}, {text:"docker", value:"docker"}, {text:"eiffel", value:"eiffel"}, {text:"elixir", value:"elixir"}, {text:"erlang", value:"erlang"}, {text:"fsharp", value:"fsharp"}, {text:"fortran", value:"fortran"}, {text:"git", value:"git"}, {text:"glsl", value:"glsl"}, {text:"go", value:"go"}, {text:"groovy", value:"groovy"}, {text:"haml", value:"haml"}, {text:"handlebars", value:"handlebars"}, {text:"haskell", value:"haskell"}, {text:"haxe", value:"haxe"}, {text:"http", value:"http"}, {text:"icon", value:"icon"}, {text:"inform7", value:"inform7"}, {text:"ini", value:"ini"}, {text:"j", value:"j"}, {text:"jade", value:"jade"}, {text:"java", value:"java"}, {text:"JSON", value:"json"}, {text:"jsonp", value:"jsonp"}, {text:"julia", value:"julia"}, {text:"keyman", value:"keyman"}, {text:"kotlin", value:"kotlin"}, {text:"latex", value:"latex"}, {text:"less", value:"less"}, {text:"lolcode", value:"lolcode"}, {text:"lua", value:"lua"}, {text:"makefile", value:"makefile"}, {text:"markdown", value:"markdown"}, {text:"matlab", value:"matlab"}, {text:"mel", value:"mel"}, {text:"mizar", value:"mizar"}, {text:"monkey", value:"monkey"}, {text:"nasm", value:"nasm"}, {text:"nginx", value:"nginx"}, {text:"nim", value:"nim"}, {text:"nix", value:"nix"}, {text:"nsis", value:"nsis"}, {text:"objectivec", value:"objectivec"}, {text:"ocaml", value:"ocaml"}, {text:"oz", value:"oz"}, {text:"parigp", value:"parigp"}, {text:"parser", value:"parser"}, {text:"pascal", value:"pascal"}, {text:"perl", value:"perl"}, {text:"PHP", value:"php"}, {text:"processing", value:"processing"}, {text:"prolog", value:"prolog"}, {text:"protobuf", value:"protobuf"}, {text:"puppet", value:"puppet"}, {text:"pure", value:"pure"}, {text:"python", value:"python"}, {text:"q", value:"q"}, {text:"qore", value:"qore"}, {text:"r", value:"r"}, {text:"jsx", value:"jsx"}, {text:"rest", value:"rest"}, {text:"rip", value:"rip"}, {text:"roboconf", value:"roboconf"}, {text:"crystal", value:"crystal"}, {text:"rust", value:"rust"}, {text:"sas", value:"sas"}, {text:"sass", value:"sass"}, {text:"scss", value:"scss"}, {text:"scala", value:"scala"}, {text:"scheme", value:"scheme"}, {text:"smalltalk", value:"smalltalk"}, {text:"smarty", value:"smarty"}, {text:"SQL", value:"sql"}, {text:"stylus", value:"stylus"}, {text:"swift", value:"swift"}, {text:"tcl", value:"tcl"}, {text:"textile", value:"textile"}, {text:"twig", value:"twig"}, {text:"TypeScript", value:"typescript"}, {text:"verilog", value:"verilog"}, {text:"vhdl", value:"vhdl"}, {text:"wiki", value:"wiki"}, {text:"YAML", value:"yaml"}
],
setup: function (editor) {
editor.on('init', function() {
Prism.highlightAll();
});
editor.on('SetContent', function() {
Prism.highlightAll();
});
},
language: 'zh_CN'
});
/*
tinymce.init({
selector: "#content",
plugins: [
"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table contextmenu directionality emoticons template textcolor paste fullpage textcolor codesample"
],
toolbar1: "undo redo | cut copy paste | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
toolbar2: " searchreplace | bullist numlist | outdent indent blockquote | link unlink anchor image media code codesample | inserttime preview | forecolor backcolor",
toolbar3: "table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft",
menubar: false,
toolbar_items_size: 'small',
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
],
language:'zh_CN'
});
*/
</script>
<?php
require 'blog/vendor/autoload.php';
include 'api/header.php';
session_start();
require 'blog/UserManager.php';
$userManager = new UserManager();
$client = new MongoDB\Client("mongodb://localhost:27017");
$db = $client->article_db;
$articles = $db->articles;
$comments = $db->comments;
$replys = $db->replys;
$article = null;
// 获取文章列表
$currentId = isset($_GET['id'])?$_GET['id']:'';
if ($currentId) {
$article = $articles->findOne(['_id' => new MongoDB\BSON\ObjectId($currentId)]);
}
$single_img = $articles->findOne(['location' => '企业发展', 'subject' => '企业形象', 'publish' => 1], ['sort' => ['created_at' => -1]]);
// 处理评论提交
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['comment'])) {
// 如果想评论，需要进行登录
if(!isset($_SESSION['user'])) {
$_SESSION['redirect_url'] = $_SERVER['REQUEST_URI'];
header('Location: blog/sign_in.php');
exit;
}
// 回复评论
if (isset($_GET['comment_id'])) {
$reply = [
'comment_id' => new MongoDB\BSON\ObjectId($_GET['comment_id']),
'username' => $_SESSION['user']['username'],
'avatar' => $_SESSION['user']['avatar'],
'name' => htmlspecialchars($_POST['Name']),
'email' => htmlspecialchars($_POST['Email']),
'message' => htmlspecialchars($_POST['Message']),
'created_at' => new MongoDB\BSON\UTCDateTime()
];
$replys->insertOne($reply);
header("Location: ".$_SERVER['PHP_SELF']."?id=".$_POST['article_id']."&comment_id=".$_GET['comment_id']);
exit;
} else {
// 评论
$comment = [
'article_id' => new MongoDB\BSON\ObjectId($_POST['article_id']),
'username' => $_SESSION['user']['username'],
'avatar' => $_SESSION['user']['avatar'],
'name' => htmlspecialchars($_POST['Name']),
'email' => htmlspecialchars($_POST['Email']),
'phone' => htmlspecialchars($_POST['Phone']),
'message' => htmlspecialchars($_POST['Message']),
'created_at' => new MongoDB\BSON\UTCDateTime()
];
$comments->insertOne($comment);
header("Location: ".$_SERVER['PHP_SELF']."?id=".$_POST['article_id']);
exit;
}
}
$thisuser = null;
if (isset($_SESSION['user'])) {
$thisuser = $userManager->findUser($_SESSION['user']['id']);
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title><?= isset($article) ? '骏九文化-' .$article['title'] : '未指定文章ID' ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap-css -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!--// bootstrap-css -->
<!-- css -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!-- Prism代码高亮 -->
<!--link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" rel="stylesheet" /-->
<!--script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script-->
<link href="css/prism.css" rel="stylesheet" />
<script src="js/prism.js"></script>
<!-- 图片样式设定：用于缩放大小和位置 -->
<!-- 用途：TinyMCE，Markdown编辑器。样例：
<div class="imgcontainer">
<div class="imgbox-30|50|80">
<img src="/images/g3.jpg" class="image-style">
</div>
</div>
-->
<style>
.image-style {
max-width: 100%; /* 图片最大宽度为其容器的100%，即自动缩放以适应容器 */
height: auto; /* 保持图片原始宽高比 */
display: block; /* 防止图片下方出现空白 */
margin: 0 auto; /* 水平居中图片 */
}
.imgcontainer { /* 图片位置设置居中，配合imgbox可设定图片大小 */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.imgbox {
/* 保持原图大小 */
}
.imgbox-30 {
width: 30%; /* 盒子宽度占容器30% */
height: 30%; /* 盒子高度占容器30% */
}
.imgbox-50 {
width: 50%; /* 盒子宽度占容器50% */
height: 50%; /* 盒子高度占容器50% */
}
.imgbox-80 {
width: 80%; /* 盒子宽度占容器80% */
height: 80%; /* 盒子高度占容器80% */
}
.imgbox-100 {
width: 100%; /* 盒子宽度占容器100% */
height: 100%; /* 盒子高度占容器100% */
}
</style>
<!--// css -->
<!-- font-awesome icons -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons -->
<!-- font -->
<link href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700italic,700,400italic,300italic,300' rel='stylesheet' type='text/css'>
<!-- //font -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<script>
function showMessage() {
alert("评论成功！");
}
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- banner -->
<div class="banner about-banner">
<!-- header.html -->
<div id="header"></div>
<!-- //header.html -->
<div class="w3ls-heading">
<h2><?= isset($article) ? $article['location'] : '未指定文章ID' ?></h2>
</div>
</div>
<!-- //banner -->
<?php if (isset($article)) { ?>
<!-- single -->
<div class="single">
<div class="container">
<div class="agileits-single-img">
<?php if (isset($single_img)) { ?>
<img src="<?= extractFirstImage($single_img['content']) ?>" alt="" /><br><br>
<?php }?>
</div>
</div>
<div class="container">
<!-- 目录 -->
<?php
$subject = $article['subject'];
// 如果是专题文章，则显示专题目录
if ($subject && $article['location'] == '技术文档') { ?>
<!-- 显示专题名称 -->
<div class="agileits-about-top-heading">
<h3><?= $subject ?></h3>
<p><strong>Lorem ipsum dolor sit amet </strong></p>
</div>
<h3>目录</h3>
<?php
// 显示本专题的所有文章标题 (按照创建时间升序排序,如果创建时间相同，则按照_id升序排序)
$subject_titles = $articles->find(['subject' => $subject], ['sort' => ['created_at' => 1, '_id' => 1]]);
$i = 0;
foreach ($subject_titles as $subject_title):
// 偶数显示Story1
if (($i++)%2==0) {?>
<!-- Story1 -->
<p><a href="sample.php?id=<?= $subject_title['_id']?>"><font color=#8eb446><strong><?= $subject_title['title'] ?></strong></font></a></p>
<?php } else {
// 奇数显示Story2
?>
<!-- Story2 -->
<p><a href="sample.php?id=<?= $subject_title['_id']?>"><font color="gray"><strong><?= $subject_title['title'] ?></strong></font></a></p>
<?php }
?>
<?php endforeach; ?>
<?php } ?>
<!-- 正文 -->
<div class="agile-news-left">
<?php
if (isset($article)) {
?>
<!--来自内容管理系统的内容-->
<div class="agileinfo-single-icons">
<h3><?= $article['title'] ?></h3>
<ul>
<li><a href="#"><i class="fa fa-user" aria-hidden="true"></i> <span><?= ucfirst($article['author']) ?></span></a></li>
<li><i class="fa fa-calendar" aria-hidden="true"></i><span><?= date('j F Y', $article['created_at']->toDateTime()->getTimestamp()) ?></span></li>
<li><a href="#viewcomment"><i class="fa fa-comments-o" aria-hidden="true"></i><span><?= $comments->countDocuments(['article_id' => $article['_id']]) ?> 评论</span></a></li>
<!--<li><a href="#"><i class="fa fa-heart" aria-hidden="true"></i><span>300 收藏</span></a></li> -->
</ul>
</div>
<!--<div class="callbacks_container">-->
<?= $article['content'] ?>
<?php }?>
</div>
</div>
<!-- 专题文章显示上一章和下一章 -->
<?php
// 如果是专题文章，则显示专题目录
if ($subject && $article['location'] == '技术文档') {
// 查找当前文章
$currentArticle = $articles->findOne(['_id' => new MongoDB\BSON\ObjectID($currentId)]);
if ($currentArticle) {
// 获取上一章 ID
$prevArticle = $articles->findOne(
['_id' => ['$lt' => new MongoDB\BSON\ObjectID($currentId)]],
['sort' => ['created_at' => -1, '_id' => -1]]
);
// 获取下一章 ID
$nextArticle = $articles->findOne(
['_id' => ['$gt' => new MongoDB\BSON\ObjectID($currentId)]],
['sort' => ['created_at' => 1, '_id' => 1]]
);
}
?>
<div class="container">
<div class="w3l-button">
<a href="sample.php?id=<?=(string)$prevArticle->_id?>" title="<?= $prevArticle->title ?>" ><?= $prevArticle? '上一章' : '' ?></a>
<a href="documents.php">返回</a>
<a href="sample.php?id=<?=(string)$nextArticle->_id?>" title="<?= $nextArticle->title ?>"><?= $nextArticle? '下一章' : '' ?></a>
</div>
</div>
<?php } else { ?>
<!-- 返回上一页 -->
<div class="container">
<div class="callbacks_container">
<div class="w3l-button">
<a href="javascript:history.back()">返回</a>
</div>
</div>
</div>
<?php } ?>
<!-- comments -->
<div class="container">
<div class="agileits_three_comments">
<h3 id="viewcomment" >评论</h3>
<?php
// 显示所有评论
$i = 0;
$articleComments = $comments->find(['article_id' => $article['_id']], ['sort' => ['created_at' => -1]]);
foreach ($articleComments as $comment): ?>
<div class="agileits_three_comment_grid">
<div class="agileits_tom">
<img src="<?= $comment['avatar']?'blog/'.$comment['avatar']:'https://picsum.photos/200/200?random=1' ?>" alt=" " class="img-responsive">
</div>
<div class="agileits_tom_right">
<div class="hardy">
<h4><?= $comment['name'] ?></h4>
<p><?= date('j F Y', $comment['created_at']->toDateTime()->getTimestamp()) ?></p>
</div>
<div class="reply">
<a href="sample.php?id=<?= $_GET['id'] ?>&comment_id=<?= $comment['_id'] ?>">回复</a>
</div>
<div class="clearfix"> </div>
<p class="lorem"><?= $comment['message'] ?></p>
</div>
<div class="clearfix"> </div>
</div>
<?php
$commentReplys = $replys->find(['comment_id' => $comment['_id']], ['sort' => ['created_at' => -1]]);
foreach ($commentReplys as $reply): ?>
<div class="agileits_three_comment_grid agileits_three_comment_grid1">
<div class="agileits_tom">
<img src="<?= $reply['avatar']?'blog/'.$reply['avatar']:'https://picsum.photos/200/200?random=1' ?>" alt=" " class="img-responsive">
</div>
<div class="agileits_tom_right">
<div class="hardy">
<h4><?= $reply['name'] ?></h4>
<p><?= isset($reply)? date('j F Y', $reply['created_at']->toDateTime()->getTimestamp()) : date('j F Y') ?></p>
</div>
<div class="reply">
<a href="sample.php?id=<?= $_GET['id'] ?>&comment_id=<?= $comment['_id'] ?>">回复</a>
</div>
<div class="clearfix"> </div>
<p class="lorem"><?= $reply['message'] ?></p>
</div>
<div class="clearfix"> </div>
</div>
<?php endforeach; ?>
<?php endforeach; ?>
</div>
<!-- //comments -->
<!-- leave-comments -->
<div class="w3_leave_comment">
<h3>发表评论</h3>
<form method="post" >
<input type="hidden" name="article_id" value="<?= $article['_id'] ?>">
<input type="text" name="Name" value="<?= $thisuser?$thisuser['nickname']:'游客' ?>" placeholder="昵称" required="">
<input type="email" name="Email" value="<?= $thisuser?$thisuser['email']:'guest@email.com' ?>" placeholder="Email" required="">
<?php if (!isset($_GET['comment_id'])) { ?>
<input type="text" name="Phone" placeholder="电话">
<?php } ?>
<textarea name="Message" placeholder="请发表您的看法" required=""></textarea>
<input type="submit" name="comment" value="发送">
</form>
</div>
<!-- //leave-comments -->
</div>
</div>
<!-- //single -->
<?php } ?>
<!-- footer.html -->
<div id="footer"></div>
<script>
function loadHTML(url, selector) {
fetch(url)
.then(response => response.text())
.then(data => {
document.querySelector(selector).innerHTML = data;
})
.catch(err => console.error('Error loading HTML: ', err));
}
loadHTML('header.html', '#header');
loadHTML('footer.html', '#footer');
</script>
<!-- //footer.html -->
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
</body>
</html>
评论