Djangoブログ開発(九)-多説コメントとJSカレンダーを追加

背景
MacBookのデータが消去された後、私はまたブログを書き直しました.同じように既存のフロントエンドテンプレートで書いています.今回は簡潔な機能だけでいいので、複雑すぎて多くの機能が使えず、意味がありません.今回のブログには、複数のコメントボックスとカレンダーの2つの機能を追加しました.また、自分の公式アカウントのQRコードも一緒に載せました.
バージョン関連オペレーティングシステム:Mac OS X EI Caption Pythonバージョン:2.7 IDE:PyCharm
なぜコメントボックス
実は私のブログのPVはとても低いですが、どうしてもコメントできるところがあるはずです.何人も起きて振り回されることはありませんが.コメントボックスの使い道は2つあり、1つは文章の下部にあり、もう1つは伝言板なので、今回のブログには伝言板のページが追加されました.
たくさん話す
まず、多くのアカウントを登録する必要があります.ここをクリックして、登録に成功したら、バックグラウンド管理のツールで共通のコードを見つけることができます.このコードはjsのコードで、あなたの文章に埋め込めばいいです.もちろん、pythonのためにSDKを作ったと多く言われていますが、どちらの方法でも実現できます.
Jsコード実装
共通コードは次のとおりです.

<!--       start -->
    <div class="ds-thread" data-thread-key="                ID" data-title="         " data-url="         "></div>
<!--       end -->
<!--     JS   start (          ) -->
<script type="text/javascript"> var duoshuoQuery = {short_name:"    "}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script>
<!--     JS   end -->

実はコードの中でも詳しくて、文章の底にbodyラベルの中にこのコードを置いて、divの中のいくつかのものを直すだけでいいです.

<div class="ds-thread" data-thread-key="lm" data-title="   " data-url="{% url 'message' %}"></div>

私の伝言板のコードは、実は伝言板は文章だと思っていればいいのです.文書内のコードは次のとおりです.

<div class="ds-thread" data-thread-key="{{ article_view.id }}" data-title="{{ article_view.blog_title }}" data-url="{% url 'article' article_view.id %}"></div>

このように構成してから、Webページを再開すると、Webページの下にコメントボックスが1つ増えていることがわかります.
SDKを多言する
SDKの原理は実はDjangoに1つのアプリケーションを複数インストールすることであり、Python-SDKの説明ドキュメントはすでに関連情報をはっきり言っている.私はこの方法を使っていません.JSコードは非常に柔軟なので、SDKを単独で使う必要はありません.
楽屋の話をする
多くのバックグラウンドでは、コメントフィルタリング、コメントボックスの主体、許可画像など、多くのものを管理することができます.コメントをエクスポートすることもできます.もちろん、私のブログにはほとんど注目されていないので、あまり多くの人がコメントをしません.
もっと分かち合う
バックグラウンドには共有機能が追加されています.コードは以下の通りです.

<div class="ds-share" data-thread-key="           thread-key" data-title="              " data-images="                   " data-content="              " data-url="                ">
    <div class="ds-share-inline">
      <ul class="ds-share-icons-16">

        <li data-toggle="ds-share-icons-more"><a class="ds-more" href="javascript:void(0);">   ：</a></li>
        <li><a class="ds-weibo" href="javascript:void(0);" data-service="weibo">  </a></li>
        <li><a class="ds-qzone" href="javascript:void(0);" data-service="qzone">QQ  </a></li>
        <li><a class="ds-qqt" href="javascript:void(0);" data-service="qqt">    </a></li>
        <li><a class="ds-wechat" href="javascript:void(0);" data-service="wechat">  </a></li>

      </ul>
      <div class="ds-share-icons-more">
      </div>
    </div>
 </div>

私はまだ使っていませんが、見ただけなので、時間があればまた共有しましょう.
JSカレンダー
JSカレンダーは実は1つのとても简単なもので、ネットの上で现れたコードはとても多くて、ひっくり返して持ってきて直して、次は私のcopyのコードです:

/**
 * Created by SvenWeng on 16/2/28.
 */
function montharr(m0, m1, m2, m3, m4, m5, m6, m7, m8, m9, m10, m11) {
    this[0] = m0;
    this[1] = m1;
    this[2] = m2;
    this[3] = m3;
    this[4] = m4;
    this[5] = m5;
    this[6] = m6;
    this[7] = m7;
    this[8] = m8;
    this[9] = m9;
    this[10] = m10;
    this[11] = m11;
}
function calendar() {
    var monthNames = "JanFebMarAprMayJunJulAugSepOctNovDec";
    var today = new Date();
    var thisDay;
    var monthDays = new montharr(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
    year = today.getYear();
    thisDay = today.getDate();
    if (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) monthDays[1] = 29;
    nDays = monthDays[today.getMonth()];
    firstDay = today;
    firstDay.setDate(1); // works fine for most systems
    testMe = firstDay.getDate();
    if (testMe == 2) firstDay.setDate(0);
    startDay = firstDay.getDay();
    document.write('<table border="0" width="100%" cellspacing="0" cellpadding="2" align="CENTER" bgcolor="#0080FF">');
    document.write('<TR><TD align="center">');
    document.write('<table border="0" width="100%" cellspacing="1" cellpadding="2" bgcolor="Silver">');
    document.write('<tr><th colspan="7" bgcolor="#C8E3FF">');
    var dayNames = new Array("   ", "   ", "   ", "   ", "   ", "   ", "   ");
    var monthNames = new Array("  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "  ", "   ", "   ");
    var now = new Date();
    document.write('<font class="today">' + today.getFullYear() + "&nbsp;" + monthNames[now.getMonth()] + now.getDate() + " &nbsp;" + dayNames[now.getDay()] + "</FONT>");
    document.write('</TH></TR><TR><TH class="thead"> </FONT></TH>');
    document.write('<TH class="thead"> </TH>');
    document.write('<TH class="thead"> </TH>');
    document.write('<TH class="thead"> </TH>');
    document.write('<TH class="thead"> </TH>');
    document.write('<TH class="thead"> </TH>');
    document.write('<TH class="thead"> </TH>');
    document.write("</TR><TR>");
    column = 0;
    if (startDay > 0) {
        document.write('<td colspan="' + startDay + '" bgcolor="#ffffff"></td>')
    }
    column += startDay;
    for (i = 1; i <= nDays; i++) {
        if (i == thisDay) {
            document.write('</TD><td align="CENTER" bgcolor="#76d2c5"><FONT class="whiteword"><B>')
        }
        else {
            document.write('</TD><TD BGCOLOR="#FFFFFF" ALIGN="CENTER"><FONT class="nday">');
        }
        document.write(i);
        if (i == thisDay) document.write("</FONT></TD>")
        column++;
        if (column == 7) {
            document.write("<TR>");
            column = 0;
        }
    }
    if (column < 7) {
        document.write('<td colspan="' + (7 - column) + '" bgcolor="#ffffff"></td>');
    }
    //document.write('<TR><td colspan="3" align="right" valign="bottom">');
    //document.write('<font class="whiteword"><b>    </b></font></td><td valign="bottom" colspan="4">');
    document.write('<div id="clock" class="clock"></div>');
    document.write('</TD></TR></TABLE></TD></TR></TABLE>');
}

トップページで引用すればいいです.

<div class="box">
    <script language="javascript"> calendar(); startclock(); </script>
</div>

最後に効果図を載せる