検索
ホームページウェブフロントエンドhtmlチュートリアル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 を見つけます。これは、

...
の下にあります。以下の 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 % alt="Hexo ブログの Jacman テーマの最適化とブログ チップ機能の追加 function_html/css_WEB-ITnose" >" title="微信打赏 Donate" height="190px" width="auto"/> </a>   <a href="<%= theme.donate.alipay %>" title="用支付宝扫一扫即可~" class="fancybox" rel="article0"> <img  src="<%= theme.donate.alipay % alt="Hexo ブログの Jacman テーマの最適化とブログ チップ機能の追加 function_html/css_WEB-ITnose" >" 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 コードが表示されます。

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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML、CSS、およびJavaScriptの未来:Web開発動向HTML、CSS、およびJavaScriptの未来:Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML:構造、CSS:スタイル、JavaScript:動作HTML:構造、CSS:スタイル、JavaScript:動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来:ウェブデザインの進化とトレンドHTMLの未来:ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript:比較概要HTML対CSS対JavaScript:比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML:それはプログラミング言語か何か他のものですか?HTML:それはプログラミング言語か何か他のものですか?Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1)htmlStructuresandformatswebcontentusingtags.2)ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML:Webページの構造の構築HTML:Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ:HTMLの力テキストからウェブサイトへ:HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1)htmlは、などのタグを介してドキュメント構造を整理します。 2)ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3)マルチメディア関数を強化するなど、HTML5の新機能。 4)一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5)最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境