Hexo ブログの Jacman テーマの最適化とブログ チップ機能の追加 function_html/css_WEB-ITnose

– このブログは 5 月 19 日に最適化されました

私は長い間 Hexo ブログ フレームワークを使用してきましたが、この間手探りでコードを再度修正し、もう一度エフェクトを確認し、変更します。エフェクトを見てください... これで、フレームワーク全体の構造をほぼ理解でき、テーマの変更を独立して完了できるようになりました。

次に、Hexo フレームワークを分析する記事を書くことを検討してください。これにより、フレームワークへの理解が深まり、その後の研究が容易になります。また、Hexo に触れ始めたばかりの他の子供たちにもいくつかの方法が提供されます。そうすることで、より早く適応し、フレームワークに慣れることができます。

今日偶然投げ銭機能を見かけたので、記事を改善する必要があると思いますが、自由にやってください。私にチップをくれた人たちは最終的に真実の愛を見つけたと聞きました~

インスピレーションはこの記事から来ました。私は最初にこの記事のコードの最終バージョンを使用し、その後多くの修正を加えて埋め込みました。フレーム。次に、その方法について説明します。

ブログへの埋め込みとは何ですか?なぜこんなことをするのですか？

ブログへの埋め込みとは、簡単に言うと、HTMLコードを貼り付けて表示内容を変更するのではなく、テーマの設定ファイル_configに表示したい情報を書き込むことです。 .yml を作成し、HTML テンプレートを介して Web ページに表示します。この方法では、表示されたコンテンツを変更するたびに、特定の ejs ファイルを見つけて、特定の HTML コードを見つける必要がありません。変更する前に特定のタグの位置を見つけて、_config.yml を開いて直接編集すれば完了です。これはホイールの機能である標準化にも役立ちます。以前にテーマの最適化をたくさん行ったとき、その多くは HTML コードに直接貼り付けられました。コードが短い場合は問題ありませんが、コードが長い場合は時間が経つとコード全体が読めなくなります。メンテナンスに有利ではありません。

どうすればいいですか?

私たちが実現したいことは、次のステートメントを Themesjacman_config.yml ファイルに追加するだけです:

donate:  enable: true  text: 打赏我的人，运气都不会太差~  wechat: http://7xsl28.com1.z0.glb.clouddn.com/wechatpay.png  alipay: http://7xsl28.com1.z0.glb.clouddn.com/alipay.jpg  web: true

この記事を実現するには一番下のスタイル:

最初にボタンがあります。読者が報酬を望まない場合、当然クリックしません:

しかし、ボタンをクリックすると、次のような効果が生じます。表示:

読者は WeChat または Alipay を使用して QR コードをスキャンし、報酬機能を実現できます。

ここに Web バージョンの Alipay 支払いリンクを追加することもできます。クラウド チップは Alipay 支払いと WeChat 支払いをサポートしており、WeChat 支払いは依然として QR コードのスキャンが必要なため、ここで使用されます。 Web決済やQRコード決済も、テイクアウトの支払いと同様にとにかく少し面倒な気がしますが、読者の皆さんはテイクアウト決済ほど積極的ではないのは間違いないと思いますが、実際にやってみたので載せておきます。 Web 支払いリンクと中央の「報酬」という単語を表示しないようにするには、上記の Web 値を false に変更します。

どうやって行うのですか?

すべてのブログ投稿に投げ銭機能を埋め込みたいため、投稿に表示される HTML テンプレートを変更する必要があります。 テーマjacmanlayout_partialpostarticle.ejs を見つけます。これは、

...

の下にあります。<%-partial('footer') %>以下の HTML コードを上に挿入します。

<% if (theme.donate) { %> <!-- css --> <style type="text/css"> .center { text-align: center; } .hidden { display: none; } .donate_bar a.btn_donate{ display: inline-block; width: 82px; height: 82px; background: url("http://7xsl28.com1.z0.glb.clouddn.com/btn_reward.gif") no-repeat; _background: url("http://7xsl28.com1.z0.glb.clouddn.com/btn_reward.gif") no-repeat; <!-- http://img.t.sinajs.cn/t5/style/images/apps_PRF/e_media/btn_reward.gif 因为本 hexo 生成的博客所用的 theme 的 a:hover 带动画效果， 为了在让打赏按钮显示效果正常 而 添加了以下几行 css， 嵌入其它博客时不一定要它们。 --> -webkit-transition: background 0s; -moz-transition: background 0s; -o-transition: background 0s; -ms-transition: background 0s; transition: background 0s; <!-- /让打赏按钮的效果显示正常 而 添加的几行 css 到此结束 --> } .donate_bar a.btn_donate:hover{ background-position: 0px -82px;} .donate_bar .donate_txt { display: block; color: #9d9d9d; font: 14px/2 "Microsoft Yahei"; } .bold{ font-weight: bold; } </style> <!-- /css --> <!-- Donate Module --> <div id="donate_module"> <!-- btn_donate & tips --> <div id="donate_board" class="donate_bar center"> <br> ------------------------------------------------------------------------------------------------------------------------------ <br> <a id="btn_donate" class="btn_donate" target="_self" href="javascript:;" title="Donate 打赏"></a> <span class="donate_txt"> <%= theme.donate.text %> </span>   </div> <!-- /btn_donate & tips --> <!-- donate guide -->  <div id="donate_guide" class="donate_bar center hidden"> <br> ------------------------------------------------------------------------------------------------------------------------------ <br> <% if(theme.donate.web) { %> <div width="100%" align="center"><div name="dashmain" id="dash-main-id-87895f" class="dash-main-3 87895f-0.99"></div></div> <script type="text/javascript" charset="utf-8" src="http://www.dashangcloud.com/static/ds.js"></script> <% } %> <a href="<%= theme.donate.wechat %>" title="用微信扫一扫哦~" class="fancybox" rel="article0"> <img src="<%= theme.donate.wechat %>" title="微信打赏 Donate" height="190px" width="auto"/> </a>   <a href="<%= theme.donate.alipay %>" title="用支付宝扫一扫即可~" class="fancybox" rel="article0"> <img src="<%= theme.donate.alipay %>" title="支付宝打赏 Donate" height="190px" width="auto"/> </a> <span class="donate_txt"> <%= theme.donate.text %> </span> </div> <!-- /donate guide --> <!-- donate script --> <script type="text/javascript"> document.getElementById('btn_donate').onclick = function() { $('#donate_board').addClass('hidden'); $('#donate_guide').removeClass('hidden'); } function donate_on_web(){ $('#donate').submit(); } var original_window_onload = window.onload; window.onload = function () { if (original_window_onload) { original_window_onload(); } document.getElementById('donate_board_wdg').className = 'hidden'; } </script> <!-- /donate script --></div><!-- /Donate Module --> <% } %>

95 行目の先頭のコードは省略できます。 全体のロジックは次のとおりです。報酬モジュールを表示する必要があるかどうかを判断し、必要な場合は表示します。 表示されるコンテンツにはボタンと QR コードの 2 種類があり、まず QR コードが非表示になり、ボタンを押すとボタンが非表示になり、QR コードが表示されます。

これで報酬関数の準備が整いました。とても簡単ですね。試してみることもできます。この記事が役に立ったら、ご褒美をあげてもいいかもしれません~ :)