あなたが何かをしたいのなら、まず第一に、あなたはそれについて知っているべきであり、そして他の誰かがそれをしたかどうかを知る必要があります。第二に、あなたは他の人よりもこのことをうまくやることができますか？
この記事は私の個人ブログにも同時に公開されています。https：//sunguoqi.com/2021/09/01/weather/にアクセスしてください。
記事ディレクトリ
I.はじめに
私はマジシャンではありませんが、心が躍ります。天気ウィジェットをWebサイトに追加するのは少し面白いと思います。しかし、いくつかの関連するチュートリアルを閲覧した後、書くことはほとんど無意味だと感じたので、私はこの記事を自分で書きました。
2.エフェクトプレビュー
3.特定の手順
1.天気APIを申請する
ここで推奨される国内気象APIにはさまざまな種類があります和风天气。ZephyrWeatherを初めて使用する場合は、まず公式Webサイトにアクセスしてアカウントを登録し、私をクリックして
アプリケーションアカウントを入力し、ログに記録する必要があります。では、Zefeng Weather Development Platformにアクセスして、簡単なプラグインを作成してください。クリックして、構成プラグインの関連するプロパティを入力してください
。最初に、プラグインに名前を付ける必要があります。コンテンツのプロパティはカスタマイズできます。
注：天気ウィジェットが正常に表示されるように、ここでの選択はブラウザで固定されており、特定の場所は後で調整されます。
設定が完了したら、下のボタンをクリックする生成代码と、生成されるコードは次のようになります。
<div id="he-plugin-simple"></div>
<script>
WIDGET = {
"CONFIG": {
"modules": "01234",
"background": "5",
"tmpColor": "FF9900",
"tmpSize": "16",
"cityColor": "4A86E8",
"citySize": "16",
"aqiColor": "FF9900",
"aqiSize": "16",
"weatherIconSize": "24",
"alertIconSize": "18",
"padding": "10px 10px 10px 10px",
"shadow": "0",
"language": "auto",
"fixed": "true",
"vertical": "top",
"horizontal": "left",
"left": "10",
"top": "10",
"key": "您自己的key"
}
}
</script>
<script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
2.divを追加します
ブログのあるフォルダを開き、ディレクトリ内blog\themes\butterfly\layout\includes\headersのファイルにnav.pug次のコンテンツを追加します。
<div id="he-plugin-simple"></div>
この形式で書くこともできます
#he-plugin-simple
3.weather.jsを追加します
ブログが置かれているフォルダを開き、ディレクトリの下にファイルをblog\themes\butterfly\source\js追加weather.jsして、コンテンツを入力します。
WIDGET = {
"CONFIG": {
"modules": "01234",
"background": "5",
"tmpColor": "4A86E8",
"tmpSize": "16",
"cityColor": "FF9900",
"citySize": "16",
"aqiColor": "4A86E8",
"aqiSize": "16",
"weatherIconSize": "24",
"alertIconSize": "18",
"padding": "0px 0px 0px 0px",
"shadow": "0",
"language": "auto",
"fixed": "true",
"vertical": "center",
"horizontal": "center",
"left": "125",
"top": "20",
"key": "你的key"
}
}
4.イントロダクション
構成ファイル_config.butterflyのプロパティにinject次のコードを導入します。
- <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script>
- <script async src="/js/weather.js"></script>
5.デバッグ
ターミナル入力後にhexo clean hexo g hexo sブログ、デバッグleft、プロパティを実行してtop、天気ウィジェットを所定の位置に表示します。フロントエンドのデバッグ後、ファイルのプロパティ
を変更することを忘れないでください。weather.jsleft top
4.追記
一般的なプロセスはこのようなものです、それは実際には非常に単純です、えーと、まあ、それは本当に単純です、コメント領域にメッセージを残すことを歓迎します。