从头开始创建自己的评论系统

最新推荐文章于 2021-10-11 23:15:56 发布
最新推荐文章于 2021-10-11 23:15:56 发布
阅读量145 收藏
点赞数
文章标签： 数据库 python mysql html css
原文链接：https://www.script-tutorials.com/how-to-create-own-commenting-system/
版权
How to create own commenting system
How to create own commenting system

Own Commenting System with PHP and MySQL. Today I prepared new interesting article – I will tell how you can create own commenting system (AJAX) for your items (any units at your website) with PHP. For our demonstration – I prepared two SQL tables: first table will keep records of our items. It contain several fields: title, description, time of adding and comments count. Another table will keep records of comments. We will use jQuery too (for better interface behavior). One of features will spam protection (we can post no more than one comment every 10 minutes)!

带有PHP和MySQL的自己的注释系统。 今天，我准备了一篇有趣的新文章–我将告诉您如何使用PHP为您的商品(网站上的任何单元)创建自己的评论系统(AJAX)。 为了进行演示–我准备了两个SQL表：第一个表将保留我们项目的记录。 它包含几个字段：标题，描述，添加时间和评论数。 另一个表将保留评论记录。 我们也将使用jQuery(以获得更好的界面行为)。 其中一项功能将是垃圾邮件防护(每10分钟我们最多只能发表一条评论)！

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Now – download the source files and lets start coding !

现在–下载源文件并开始编码！

步骤1. SQL (Step 1. SQL)

We will need to add 2 tables into our database:

我们将需要在数据库中添加2个表： 


CREATE TABLE IF NOT EXISTS `s163_items` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `title` varchar(255) default '',
  `description` text NOT NULL,
  `when` int(11) NOT NULL default '0',
  `comments_count` int(11) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `s163_items` (`title`, `description`, `when`, `comments_count`) VALUES
('Item #1', 'Here are you can put description of Item #1', UNIX_TIMESTAMP(), '0'),
('Item #2', 'Here are you can put description of Item #2', UNIX_TIMESTAMP()+1, '0'),
('Item #3', 'Here are you can put description of Item #3', UNIX_TIMESTAMP()+2, '0'),
('Item #4', 'Here are you can put description of Item #4', UNIX_TIMESTAMP()+3, '0'),
('Item #5', 'Here are you can put description of Item #5', UNIX_TIMESTAMP()+4, '0');
CREATE TABLE IF NOT EXISTS `s163_items_cmts` (
  `c_id` int(11) NOT NULL AUTO_INCREMENT ,
  `c_item_id` int(12) NOT NULL default '0',
  `c_ip` varchar(20) default NULL,
  `c_name` varchar(64) default '',
  `c_text` text NOT NULL ,
  `c_when` int(11) NOT NULL default '0',
  PRIMARY KEY (`c_id`),
  KEY `c_item_id` (`c_item_id`)
) ENGINE=MYISAM DEFAULT CHARSET=utf8;


CREATE TABLE IF NOT EXISTS `s163_items` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `title` varchar(255) default '',
  `description` text NOT NULL,
  `when` int(11) NOT NULL default '0',
  `comments_count` int(11) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
INSERT INTO `s163_items` (`title`, `description`, `when`, `comments_count`) VALUES
('Item #1', 'Here are you can put description of Item #1', UNIX_TIMESTAMP(), '0'),
('Item #2', 'Here are you can put description of Item #2', UNIX_TIMESTAMP()+1, '0'),
('Item #3', 'Here are you can put description of Item #3', UNIX_TIMESTAMP()+2, '0'),
('Item #4', 'Here are you can put description of Item #4', UNIX_TIMESTAMP()+3, '0'),
('Item #5', 'Here are you can put description of Item #5', UNIX_TIMESTAMP()+4, '0');
CREATE TABLE IF NOT EXISTS `s163_items_cmts` (
  `c_id` int(11) NOT NULL AUTO_INCREMENT ,
  `c_item_id` int(12) NOT NULL default '0',
  `c_ip` varchar(20) default NULL,
  `c_name` varchar(64) default '',
  `c_text` text NOT NULL ,
  `c_when` int(11) NOT NULL default '0',
  PRIMARY KEY (`c_id`),
  KEY `c_item_id` (`c_item_id`)
) ENGINE=MYISAM DEFAULT CHARSET=utf8;

This is simple tables: first for records of items, second one – for comments

这是简单的表格：第一个用于项目记录，第二个用于注释

步骤2. PHP (Step 2. PHP)

Here are source code of our main file:

这是我们主文件的源代码：

index.php (index.php)

<?php
// disabling possible warnings
if (version_compare(phpversion(), "5.3.0", ">=")  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php'); // including service class to work with database
$sCode = '';
$iItemId = (int)$_GET['id'];
if ($iItemId) { // View item output
    $aItemInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `s163_items` WHERE `id` = '{$iItemId}'"); // getting info about item from database
    $sCode .= '<h1>'.$aItemInfo['title'].'</h1>';
    $sCode .= '<h3>'.date('F j, Y', $aItemInfo['when']).'</h3>';
    $sCode .= '<h2>Description:</h2>';
    $sCode .= '<h3>'.$aItemInfo['description'].'</h3>';
    $sCode .= '<h3><a href="'.$_SERVER['PHP_SELF'].'">back</a></h3>';
    // drawing last 5 comments
    $sComments = '';
    $aComments = $GLOBALS['MySQL']->getAll("SELECT * FROM `s163_items_cmts` WHERE `c_item_id` = '{$iItemId}' ORDER BY `c_when` DESC LIMIT 5");
    foreach ($aComments as $i => $aCmtsInfo) {
        $sWhen = date('F j, Y H:i', $aCmtsInfo['c_when']);
        $sComments .= <<<EOF
<div class="comment" id="{$aCmtsInfo['c_id']}">
    <p>Comment from {$aCmtsInfo['c_name']} <span>({$sWhen})</span>:</p>
    <p>{$aCmtsInfo['c_text']}</p>
</div>
EOF;
    }
    ob_start();
    ?>
    <div class="container" id="comments">
        <h2>Comments</h2>
        <script type="text/javascript">
        function submitComment(e) {
            var sName = $('#name').val();
            var sText = $('#text').val();
            if (sName && sText) {
                $.post('comment.php', { name: sName, text: sText, id: <?= $iItemId ?> },
                    function(data){
                        if (data != '1') {
                          $('#comments_list').fadeOut(1000, function () {
                            $(this).html(data);
                            $(this).fadeIn(1000);
                          });
                        } else {
                          $('#comments_warning2').fadeIn(1000, function () {
                            $(this).fadeOut(1000);
                          });
                        }
                    }
                );
            } else {
              $('#comments_warning1').fadeIn(1000, function () {
                $(this).fadeOut(1000);
              });
            }
        };
        </script>
        <div id="comments_warning1" style="display:none">Don`t forget to fill both fields (Name and Comment)</div>
        <div id="comments_warning2" style="display:none">You can post no more than one comment every 10 minutes (spam protection)</div>
        <form onsubmit="submitComment(this); return false;">
            <table>
                <tr><td class="label"><label>Your name: </label></td><td class="field"><input type="text" value="" title="Please enter your name" id="name" /></td></tr>
                <tr><td class="label"><label>Comment: </label></td><td class="field"><textarea name="text" id="text"></textarea></td></tr>
                <tr><td class="label">&nbsp;</td><td class="field"><input type="submit" value="Post comment" /></td></tr>
            </table>
        </form>
        <div id="comments_list"><?= $sComments ?></div>
    </div>
    <?
    $sCommentsBlock = ob_get_clean();
} else {
    $sCode .= '<h1>List of items:</h1>';
    $aItems = $GLOBALS['MySQL']->getAll("SELECT * FROM `s163_items` ORDER by `when` ASC"); // taking info about all items from database
    foreach ($aItems as $i => $aItemInfo) {
        $sCode .= '<h2><a href="'.$_SERVER['PHP_SELF'].'?id='.$aItemInfo['id'].'">'.$aItemInfo['title'].' item</a></h2>';
    }
}
?>
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Creating own commenting system | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
    </head>
    <body>
        <div class="container">
            <?= $sCode ?>
        </div>
        <?= $sCommentsBlock ?>
        <footer>
            <h2>Creating own commenting system</h2>
            <a href="https://www.script-tutorials.com/how-to-create-own-commenting-system/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>


<?php
// disabling possible warnings
if (version_compare(phpversion(), "5.3.0", ">=")  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php'); // including service class to work with database
$sCode = '';
$iItemId = (int)$_GET['id'];
if ($iItemId) { // View item output
    $aItemInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `s163_items` WHERE `id` = '{$iItemId}'"); // getting info about item from database
    $sCode .= '<h1>'.$aItemInfo['title'].'</h1>';
    $sCode .= '<h3>'.date('F j, Y', $aItemInfo['when']).'</h3>';
    $sCode .= '<h2>Description:</h2>';
    $sCode .= '<h3>'.$aItemInfo['description'].'</h3>';
    $sCode .= '<h3><a href="'.$_SERVER['PHP_SELF'].'">back</a></h3>';
    // drawing last 5 comments
    $sComments = '';
    $aComments = $GLOBALS['MySQL']->getAll("SELECT * FROM `s163_items_cmts` WHERE `c_item_id` = '{$iItemId}' ORDER BY `c_when` DESC LIMIT 5");
    foreach ($aComments as $i => $aCmtsInfo) {
        $sWhen = date('F j, Y H:i', $aCmtsInfo['c_when']);
        $sComments .= <<<EOF
<div class="comment" id="{$aCmtsInfo['c_id']}">
    <p>Comment from {$aCmtsInfo['c_name']} <span>({$sWhen})</span>:</p>
    <p>{$aCmtsInfo['c_text']}</p>
</div>
EOF;
    }
    ob_start();
    ?>
    <div class="container" id="comments">
        <h2>Comments</h2>
        <script type="text/javascript">
        function submitComment(e) {
            var sName = $('#name').val();
            var sText = $('#text').val();
            if (sName && sText) {
                $.post('comment.php', { name: sName, text: sText, id: <?= $iItemId ?> },
                    function(data){
                        if (data != '1') {
                          $('#comments_list').fadeOut(1000, function () {
                            $(this).html(data);
                            $(this).fadeIn(1000);
                          });
                        } else {
                          $('#comments_warning2').fadeIn(1000, function () {
                            $(this).fadeOut(1000);
                          });
                        }
                    }
                );
            } else {
              $('#comments_warning1').fadeIn(1000, function () {
                $(this).fadeOut(1000);
              });
            }
        };
        </script>
        <div id="comments_warning1" style="display:none">Don`t forget to fill both fields (Name and Comment)</div>
        <div id="comments_warning2" style="display:none">You can post no more than one comment every 10 minutes (spam protection)</div>
        <form onsubmit="submitComment(this); return false;">
            <table>
                <tr><td class="label"><label>Your name: </label></td><td class="field"><input type="text" value="" title="Please enter your name" id="name" /></td></tr>
                <tr><td class="label"><label>Comment: </label></td><td class="field"><textarea name="text" id="text"></textarea></td></tr>
                <tr><td class="label">&nbsp;</td><td class="field"><input type="submit" value="Post comment" /></td></tr>
            </table>
        </form>
        <div id="comments_list"><?= $sComments ?></div>
    </div>
    <?
    $sCommentsBlock = ob_get_clean();
} else {
    $sCode .= '<h1>List of items:</h1>';
    $aItems = $GLOBALS['MySQL']->getAll("SELECT * FROM `s163_items` ORDER by `when` ASC"); // taking info about all items from database
    foreach ($aItems as $i => $aItemInfo) {
        $sCode .= '<h2><a href="'.$_SERVER['PHP_SELF'].'?id='.$aItemInfo['id'].'">'.$aItemInfo['title'].' item</a></h2>';
    }
}
?>
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Creating own commenting system | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
    </head>
    <body>
        <div class="container">
            <?= $sCode ?>
        </div>
        <?= $sCommentsBlock ?>
        <footer>
            <h2>Creating own commenting system</h2>
            <a href="https://www.script-tutorials.com/how-to-create-own-commenting-system/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </footer>
    </body>
</html>

By default – this script will draw list of items. Each item have own page. All easy – we will display item title, time of adding (‘when’ field), description, and, most important – our new Comments block. This block contain form of adding new comments, and also will load us last 5 comments. I added my comments in most of places for better understanding. Ok, next PHP file is:

默认情况下–此脚本将绘制项目列表。 每个项目都有自己的页面。 轻而易举–我们将显示项目标题，添加时间(“时间”字段)，描述，最重要的是–我们的新评论栏。 该块包含添加新评论的形式，还将加载我们的最后5条评论。 我在大多数地方都添加了我的评论，以便更好地理解。 好的，下一个PHP文件是：

comment.php (comment.php)

<?php
// disabling possible warnings
if (version_compare(phpversion(), "5.3.0", ">=")  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php'); // including service class to work with database
$iItemId = (int)$_POST['id']; // obtaining necessary information
$sIp = getVisitorIP();
$sName = $GLOBALS['MySQL']->escape(strip_tags($_POST['name']));
$sText = $GLOBALS['MySQL']->escape(strip_tags($_POST['text']));
if ($sName && $sText) {
    // checking - are you posted any comment recently or not?
    $iOldId = $GLOBALS['MySQL']->getOne("SELECT `c_item_id` FROM `s163_items_cmts` WHERE `c_item_id` = '{$iItemId}' AND `c_ip` = '{$sIp}' AND `c_when` >= UNIX_TIMESTAMP() - 600 LIMIT 1");
    if (! $iOldId) {
        // if all fine - allow to add comment
        $GLOBALS['MySQL']->res("INSERT INTO `s163_items_cmts` SET `c_item_id` = '{$iItemId}', `c_ip` = '{$sIp}', `c_when` = UNIX_TIMESTAMP(), `c_name` = '{$sName}', `c_text` = '{$sText}'");
        $GLOBALS['MySQL']->res("UPDATE `s163_items` SET `comments_count` = `comments_count` + 1 WHERE `id` = '{$iItemId}'");
        // and printing out last 5 comments
        $sOut = '';
        $aComments = $GLOBALS['MySQL']->getAll("SELECT * FROM `s163_items_cmts` WHERE `c_item_id` = '{$iItemId}' ORDER BY `c_when` DESC LIMIT 5");
        foreach ($aComments as $i => $aCmtsInfo) {
            $sWhen = date('F j, Y H:i', $aCmtsInfo['c_when']);
            $sOut .= <<<EOF
<div class="comment" id="{$aCmtsInfo['c_id']}">
    <p>Comment from {$aCmtsInfo['c_name']} <span>({$sWhen})</span>:</p>
    <p>{$aCmtsInfo['c_text']}</p>
</div>
EOF;
        }
        echo $sOut;
        exit;
    }
}
echo 1;
exit;
function getVisitorIP() {
    $ip = "0.0.0.0";
    if( ( isset( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) && ( !empty( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) ) {
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    } elseif( ( isset( $_SERVER['HTTP_CLIENT_IP'])) && (!empty($_SERVER['HTTP_CLIENT_IP'] ) ) ) {
        $ip = explode(".",$_SERVER['HTTP_CLIENT_IP']);
        $ip = $ip[3].".".$ip[2].".".$ip[1].".".$ip[0];
    } elseif((!isset( $_SERVER['HTTP_X_FORWARDED_FOR'])) || (empty($_SERVER['HTTP_X_FORWARDED_FOR']))) {
        if ((!isset( $_SERVER['HTTP_CLIENT_IP'])) && (empty($_SERVER['HTTP_CLIENT_IP']))) {
            $ip = $_SERVER['REMOTE_ADDR'];
        }
    }
    return $ip;
}
?>


<?php
// disabling possible warnings
if (version_compare(phpversion(), "5.3.0", ">=")  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
require_once('classes/CMySQL.php'); // including service class to work with database
$iItemId = (int)$_POST['id']; // obtaining necessary information
$sIp = getVisitorIP();
$sName = $GLOBALS['MySQL']->escape(strip_tags($_POST['name']));
$sText = $GLOBALS['MySQL']->escape(strip_tags($_POST['text']));
if ($sName && $sText) {
    // checking - are you posted any comment recently or not?
    $iOldId = $GLOBALS['MySQL']->getOne("SELECT `c_item_id` FROM `s163_items_cmts` WHERE `c_item_id` = '{$iItemId}' AND `c_ip` = '{$sIp}' AND `c_when` >= UNIX_TIMESTAMP() - 600 LIMIT 1");
    if (! $iOldId) {
        // if all fine - allow to add comment
        $GLOBALS['MySQL']->res("INSERT INTO `s163_items_cmts` SET `c_item_id` = '{$iItemId}', `c_ip` = '{$sIp}', `c_when` = UNIX_TIMESTAMP(), `c_name` = '{$sName}', `c_text` = '{$sText}'");
        $GLOBALS['MySQL']->res("UPDATE `s163_items` SET `comments_count` = `comments_count` + 1 WHERE `id` = '{$iItemId}'");
        // and printing out last 5 comments
        $sOut = '';
        $aComments = $GLOBALS['MySQL']->getAll("SELECT * FROM `s163_items_cmts` WHERE `c_item_id` = '{$iItemId}' ORDER BY `c_when` DESC LIMIT 5");
        foreach ($aComments as $i => $aCmtsInfo) {
            $sWhen = date('F j, Y H:i', $aCmtsInfo['c_when']);
            $sOut .= <<<EOF
<div class="comment" id="{$aCmtsInfo['c_id']}">
    <p>Comment from {$aCmtsInfo['c_name']} <span>({$sWhen})</span>:</p>
    <p>{$aCmtsInfo['c_text']}</p>
</div>
EOF;
        }
        echo $sOut;
        exit;
    }
}
echo 1;
exit;
function getVisitorIP() {
    $ip = "0.0.0.0";
    if( ( isset( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) && ( !empty( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) ) {
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    } elseif( ( isset( $_SERVER['HTTP_CLIENT_IP'])) && (!empty($_SERVER['HTTP_CLIENT_IP'] ) ) ) {
        $ip = explode(".",$_SERVER['HTTP_CLIENT_IP']);
        $ip = $ip[3].".".$ip[2].".".$ip[1].".".$ip[0];
    } elseif((!isset( $_SERVER['HTTP_X_FORWARDED_FOR'])) || (empty($_SERVER['HTTP_X_FORWARDED_FOR']))) {
        if ((!isset( $_SERVER['HTTP_CLIENT_IP'])) && (empty($_SERVER['HTTP_CLIENT_IP']))) {
            $ip = $_SERVER['REMOTE_ADDR'];
        }
    }
    return $ip;
}
?>

This file will accept POSTed comments and save them into database. In our project we have another one PHP file:

该文件将接受POSTed注释并将其保存到数据库中。 在我们的项目中，我们还有一个PHP文件：

类/CMySQL.php (classes/CMySQL.php)

This is service class to work with database prepared by me. This is nice class which you can use too. Database connection details located in this class in few variables, sure that you will able to configure this to your database. I don`t will publish its sources – this is not necessary for now. Available in package.

这是与我准备的数据库一起使用的服务类。 这是一个很好的类，您也可以使用。 该类中的数据库连接详细信息包含几个变量，请确保可以将其配置到数据库。 我不会公开其来源-暂时没有必要。 封装形式。

步骤3. JS (Step 3. JS)

js / jquery-1.5.2.min.js (js/jquery-1.5.2.min.js)

This is just jQuery library. Available in package.

这只是jQuery库。 封装形式。

步骤4. CSS (Step 4. CSS)

Now – all used CSS styles:

现在-所有使用CSS样式：

css / main.css (css/main.css)

*{
    margin:0;
    padding:0;
}
body {
    background-repeat:no-repeat;
    background-color:#bababa;
    background-image: -webkit-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: -moz-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: -o-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
    min-height:600px;
}
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    border:3px #111 solid;
    color:#000;
    margin:20px auto;
    padding:15px;
    position:relative;
    text-align:center;
    width:500px;
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
}
#comments form {
    background-color: rgba(255, 255, 255, 0.4);
    margin:10px 0;
    padding:10px;
    text-align:left;
}
#comments table td.label {
    color: #000;
    font-size: 13px;
    padding-right: 3px;
    text-align: right;
    width: 105px;
}
#comments table label {
    color: #000;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
}
#comments table td.field input, #comments table td.field textarea {
    border: 1px solid #96A6C5;
    font-family: Verdana,Arial,sans-serif;
    font-size: 16px;
    margin-top: 2px;
    padding: 6px;
    width: 250px;
}
#comments_list {
    background-color: rgba(255, 255, 255, 0.4);
    margin:10px 0;
    padding:10px;
    text-align:left;
}
#comments_list .comment {
    border-top:1px solid #000;
    padding:10px 0;
}
#comments_list .comment:first-child {
    border-top-width:0px;
}
#comments_list .comment span {
    font-size:11px;
}


*{
    margin:0;
    padding:0;
}
body {
    background-repeat:no-repeat;
    background-color:#bababa;
    background-image: -webkit-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: -moz-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: -o-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
    min-height:600px;
}
footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}
footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}
footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}
footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}
.container {
    border:3px #111 solid;
    color:#000;
    margin:20px auto;
    padding:15px;
    position:relative;
    text-align:center;
    width:500px;
    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
}
#comments form {
    background-color: rgba(255, 255, 255, 0.4);
    margin:10px 0;
    padding:10px;
    text-align:left;
}
#comments table td.label {
    color: #000;
    font-size: 13px;
    padding-right: 3px;
    text-align: right;
    width: 105px;
}
#comments table label {
    color: #000;
    font-size: 16px;
    font-weight: normal;
    vertical-align: middle;
}
#comments table td.field input, #comments table td.field textarea {
    border: 1px solid #96A6C5;
    font-family: Verdana,Arial,sans-serif;
    font-size: 16px;
    margin-top: 2px;
    padding: 6px;
    width: 250px;
}
#comments_list {
    background-color: rgba(255, 255, 255, 0.4);
    margin:10px 0;
    padding:10px;
    text-align:left;
}
#comments_list .comment {
    border-top:1px solid #000;
    padding:10px 0;
}
#comments_list .comment:first-child {
    border-top-width:0px;
}
#comments_list .comment span {
    font-size:11px;
}
现场演示

结论 (Conclusion)

Today we prepared great commenting system for your website. Sure that this material will be useful for your own projects. Good luck in your work!

今天，我们为您的网站准备了很棒的评论系统。 确保该材料将对您自己的项目有用。 祝您工作顺利！

翻译自: https://www.script-tutorials.com/how-to-create-own-commenting-system/

cuketao5066
关注
【个人博客搭建及配置六】评论系统
学习、分享
11-13 828
博客使用valine作为评论工具，原因是他使用简介，体积轻量，灵活配置，速度很快！ 1.注册LeanCloud valine接住了LeanCloud的力量，所以需要LeanCloud的APP ID 和 APP Key 首先注册和登录LeanCloud 创建一个应用： 应用创建好以后，进入刚刚创建的应用，选择左下角的设置&gt;应用Key，然后就能看到你的APP ID和APP Key了： 代码...
Chirp:自建评论系统，替代disqus，支持第三方登陆
03-11
rp 一个在中国大陆地区的disqus替代品。 执照 GPL
用ISSO自建静态博客的评论系统
weixin_33701251的博客
10-09 342
2019独角兽企业重金招聘Python工程师标准>>> ...
Ubuntu搭建ISSO评论系统
qq_30661117的博客
02-11 444
Ubuntu搭建ISSO评论系统 1.安装ISSO服务端 这里我用的是docker的方式 参考了【多说下线怎么办】一步搭建自己的第三方评论系统 安装Docker和docker-compose 安装Docker {% highlight ruby %} sudo apt-get install docker {% endhighlight %} 安装docker-compose 我的环境...
Python-引导自己从头开始编写一个操作系统一本自学的书
08-11
《Python-引导自己从头开始编写一个操作系统》是一本面向自学者的书籍，旨在帮助读者深入理解操作系统的原理，并通过Python语言实现一个简单的操作系统。在学习过程中，你可以掌握计算机系统的基础知识，了解操作...
tinyOS:从头开始创建操作系统，因为我喜欢惩罚自己
04-19
对于许多IT专业人士来说，理解甚至创建自己的操作系统是一个极具挑战性的任务，因为它涉及到底层的计算机架构、内存管理、进程调度等复杂知识。本文将围绕"tinyOS"这一项目，探讨从零开始构建操作系统的历程，特别是...
DeanOS：从头开始创建操作系统
02-03
DeanOS 是一个开源项目，旨在帮助开发者学习如何从零开始构建操作系统。这个项目涉及的知识点广泛，涵盖了操作系统设计与实现的基础知识，主要涉及到以下几个方面： 1. **C 语言和汇编语言**：DeanOS 使用 C 语言...
cxkernel：从头开始创建的业余爱好者操作系统
02-04
【cxkernel：从头开始创建的业余爱好者操作系统】 cxkernel是一个由业余爱好者开发的操作系统，它的核心设计理念是学习和探索操作系统的基本原理。开发者通常从零开始编写操作系统内核，这是一项极具挑战性的任务，...
cpp-一份教程介绍如何从头开始创建操作系统
08-16
这篇教程将带你探索如何使用C++从零开始构建操作系统。C++是一种强大的编程语言，它提供了底层内存管理和系统级编程的能力，因此非常适合用于这样的项目。 首先，我们需要理解操作系统的基础概念。操作系统主要由...
博客搭建 | 三、LeanCloud 评论系统
开茶会的树洞
10-11 826
概述 在使用一段时间lc评论系统后，想起博客一直没有后台评论通知功能，于是查了一些资料，踩了一些坑，终于完善了评论系统。 本文会略过很多过程，只说坑的部分，如果是准备搭建评论系统的同学，按着下面所推荐的官方文档走一遍就OK啦。 非正经教程，仅针对问题给出解决方法。 使用 Valine + leanCloud 此处略，配置Valine的过程:Valine,看Valine部分就好 创建leanCloud的过程： leanCloud lc分为国际版和国内版，国际版不需要身份证验证，国内需要，其他大差不差了。 配置
wordpress创建自定义后台评论，并且发送邮件
juezhanangle的博客
09-04 2373
由于客户需要定义一个举报系统，所以我就使用了wordpress自带的评论系统进行修改。是后台能够显示用户想要的字段。后台显示效果如下： 含有填写人的姓名，内容（评论），电话，身份证，地址。当然这些都用js检验。 前台的页面如下所示： 将表单填写完成后，进行提交。然后就能在后台进行显示。在页面处引用评论的模板。 然后在functions.php中引用自定义的后台字段：
利用Disqus快速搭建评论系统
joshua_1988
09-04 5273
说实在的真正的代码就那么几行，为了凑字数，先抄一段百度百科上的简介，有兴趣的童鞋可以去Disqus官网上看一看 Disqus的主要目标是通过提供功能强大的第三评论系统，将当前不同网站的相对孤立、隔绝的评论系统，连接成具有社会化特性的大网。通过Disqus评论系统所具备的评论回复通知、评论分享和热文分享等社会化功能，网站主可以有效的提高网站用户的活跃度和流量。用户使用Disqus，在不同网站上评论
【个人网站搭建】GitHub pages+hexo 框架下隐藏next主题的评论系统 Valine Powered By信息
C/C++攻城狮
01-10 730
0x00 前言 文章中的文字可能存在语法错误以及标点错误，请谅解； 如果在文章中发现代码错误或其它问题请告知，感谢！ Hexo博客框架版本（hexo vesion）：5.3.0 Next主题版本：v5.1.4 0x01解决方法 使用valine评论系统会看到最下方会有Powered By信息： 若想隐藏该信息可以按ctrl + shift + c，将鼠标放到 Powered By 的位置，查看显示信息： 可以看到显示div.vpower.txt-righ，复制其中的.vpower.txt-righ打开
我和廖总的新项目：Wildfire 野火评论系统 ：-D
weixin_33943347的博客
12-19 101
Wildfire 如果你的网站需要一个方便的评论系统的话，不妨试试 Wildfire 野火评论系统。 全新的 Wildfire 主页 (https://wildfire.js.org/#/zh-cn/) 已经启用了，快去那儿看看详细的文档吧。 Please visit the brand new Wildfire Home Page...
hexo自建博客之评论接入
Sunltyy的博客
10-19 422
今晚下班，不用回家带娃娃，赶紧抽时间码下hexo的评论接入，话说期间遇到的坑也不少，典型的几个问题下边会重点提一下，话不多说，直接码。。 一、评论系统选型 多说——>2017年已经关闭了服务 畅言——>应该是响应国家言论自由的方针，需要备案，没错需要备案，你没看错 友言——>无奈也已经关闭了 gitment–> 是由基于github issues的系统评论，需要有github账号，考虑到看技术博客的同行，应该都有github吧. Hypercomments—->.
Vuepress搭建带有评论系统的博客
HookJony的专栏
08-25 5284
Vuepress网站 vuepress 开始搭建vuepress-blog # 安装 yarn global add vuepress # 或者：npm install -g vuepress # 新建一个 markdown 文件 echo '# Hello VuePress!' &amp;amp;gt; README.md # 开始写作 vuepress dev . # 构建静态文件 vue...
php 例子 测评系统,实例展示JS实现简单的选择题测评系统
weixin_29276847的博客
03-10 653
本文给大家分享js实现简单的选择题测评系统实例代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧包含内容：JS封装表单，JS校验表单说是测评系统，感觉只能算是一个小小的Demo，很水，，没有数据库库，，仅使用JS做简单的选择题测评系统--------------------------------------------------------------------------------一、...
个人博客系统的设计与实现_一款免费开源的现代化个人独立博客系统：halo
weixin_39609752的博客
12-03 413
前言在日常上网过程中，我们会经常看到很多人会把自己的笔记或心得记录到博客里，常见的有简书，CSDN，博客园等博客网站。那么大家有没有想要搭建一套自己的博客系统呢？当然，这是可以实现的，并且是可以很简单的搭建自己的博客系统。这里分享一款Github开源，使用SpringBoot框架构建的个人独立博客系统：halo项目介绍Halo是一款使用 Spring Boot 框架搭建的现代化的个人开源博客系统。...
从头开始编写操作系统：C/C++实现指南
从头开始写操作系统 本资源提供了一个详细的指南，用于从头开始编写操作系统。该指南涵盖了操作系统的所有方面，从设置开发环境到实现操作系统的各个组件。下面是该资源中的一些关键知识点： 1. x86架构介绍：该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值