परिचय
पाठकों का अभिवादन।
परियोजना के विकास के दौरान, मुझे आसन्न साइट के लिए एक छोटा पार्सर बनाने की आवश्यकता थी।
इससे कुछ समय पहले, टीम ने
डोजो ढांचे का उपयोग करने का निर्णय लिया
प्रतिबिंब के परिणामस्वरूप, विचार का जन्म एक सुंदर हैबर पार्सर बनाने के लिए हुआ, उसी समय दोजो में महारत हासिल की और मोबाइल के लिए ट्रैफ़िक को बचाने की समस्या को हल किया (मैं अक्सर रास्ते में पढ़ता हूं)।
यह मैनुअल विशुद्ध रूप से व्यावहारिक है और सही होने का दावा नहीं करता है।
कार्यों
हमारे पार्सर में केवल 2 कार्य होंगे:
- एक पृष्ठ लोड करना और शीर्षकों को प्रदर्शित करना, इसकी सामग्री से विषयों को उजागर करना
- उपयोगकर्ता को अवांछित विषयों को बंद करने में सक्षम करना
पहला फ़ंक्शन हमें
सरल एचटीएमएल डोम PHP पार्सर के साथ सामना करने में मदद करेगा, और दूसरा डोजो का उपयोग करके कार्यान्वित किया जाता है।
पेज संगठन
पृष्ठ न्यूनतम शैली में होगा।
<html> <head> <script src='dojo.js'></script> <script src='script.js'></script> <link rel='stylesheet' href='style.css' type='text/css' /> </head> <body> <div id='bzone'> <span> </span> <div id='box'> <div id='tit' class='tit'> <div id='close' class='close'></div> </div> <div id='text'> </div> </div> </div> </body> </html>
<html> <head> <script src='dojo.js'></script> <!-- Dojo --> <script src='script.js'></script> <!-- --> <link rel='stylesheet' href='style.css' type='text/css' /> <!-- --> </head> <body> <div id='bzone'> <!-- , --> <span> </span> <!-- --> <div id='box'> <!-- --> <div id='tit' class='tit'> <!-- --> <div id='close' class='close'></div> <!-- , --> </div> <div id='text'> <!-- --> </div> </div> </div> </body> </html>
फ़ाइल ज्यादा रुचि नहीं है, मैं सिर्फ कोड दे दूंगा:
body{ background:lightgrey; } #bzone{ background:gray; width:600px; min-height:600px; position:absolute; left:50%; margin-left:-300px; margin-top:50px; padding-bottom:10px; border-radius:10px; } #bzone span{ height:15px; padding:2px; position:relative; top:7px; display:block; width:597px; border-top:2px white solid; border-bottom:2px white solid; color:grey; background:lightgray; font-weight:bold; text-align:center; } #box{ width:550px; display:block; position:relative; left:25px; background:white; border:2px lightgrey solid; margin-top:10px; border-radius:10px; } #box #tit{ background:lightgrey; min-height:20px; width:100%; position:relative; font-weight:bold; color:grey; text-align:center; } #box #tit #close{ width:16px; height:16px; display:block; position:relative; float:right; background:url('img/close.png'); } #box #tit #close:hover{ background:url('img/close_h.png'); } #tit span{ display:none; } #box #text{ padding:2px; text-align:center; } #box a{ text-decoration:none; font-weight:bold; color:grey; } #box a:hover{ color:#ff6600; }
body{ background:lightgrey; } #bzone{ background:gray; width:600px; min-height:600px; position:absolute; left:50%; margin-left:-300px; margin-top:50px; padding-bottom:10px; border-radius:10px; } #bzone span{ height:15px; padding:2px; position:relative; top:7px; display:block; width:597px; border-top:2px white solid; border-bottom:2px white solid; color:grey; background:lightgray; font-weight:bold; text-align:center; } #box{ width:550px; display:block; position:relative; left:25px; background:white; border:2px lightgrey solid; margin-top:10px; border-radius:10px; } #box #tit{ background:lightgrey; min-height:20px; width:100%; position:relative; font-weight:bold; color:grey; text-align:center; } #box #tit #close{ width:16px; height:16px; display:block; position:relative; float:right; background:url('img/close.png'); } #box #tit #close:hover{ background:url('img/close_h.png'); } #tit span{ display:none; } #box #text{ padding:2px; text-align:center; } #box a{ text-decoration:none; font-weight:bold; color:grey; } #box a:hover{ color:#ff6600; }
यहाँ हमें क्या मिला है:
पार्सर का काम
हम डाउनलोड किए गए
सरल एचटीएमएल डोम पार्सर को कनेक्ट करते हैं और एडर्ड पेज को लोड करते हैं:
require 'simple_html_dom.php'; $html = file_get_html('http://habrahabr.ru/');
require 'simple_html_dom.php'; $html = file_get_html('http://habrahabr.ru/');
हम संदर्भ
वर्ग द्वारा विषयों को पहचानेंगे:
वर्ग = "विषय" foreach ($html->find('.topic') as $e) { echo" <div id='box'> /* */ <div id='tit' class='tit'> "; echo "<a href='"; echo $e->href; echo "'>"; echo $e->href; echo "</a>"; echo" <div id='close' class='close'></div> </div> <div id='text'>"; echo $e->innertext ; echo " </div> </div> "; }
foreach ($html->find('.topic') as $e) { /* */ echo" <div id='box'> /* */ <div id='tit' class='tit'> "; echo "<a href='"; /* */ echo $e->href; echo "'>"; echo $e->href; echo "</a>"; echo" <div id='close' class='close'></div> </div> <div id='text'>"; /* - */ echo $e->innertext ; echo " </div> </div> "; }
इस प्रकार, परियोजना पहले से ही पूरी तरह से कार्यात्मक है, यह प्रयोज्य और सुंदरता को जोड़ने के लिए बनी हुई है।
जापानी जादू
लेख की शुरुआत में, हमने 2 स्क्रिप्ट - dojo.js और script.js को शामिल किया।
यहाँ दूसरी फ़ाइल में मैंने प्रयोज्य से संबंधित सभी कोड निकाले:
dojo.addOnLoad(function(){ dojo.query(".tit .close").connect("onclick",function(){ // var nn=this; dojo.anim(nn,{height:0}).play(); dojo.anim(nn.parentNode,{height:0}).play(); // , , dojo.anim(nn.parentNode.parentNode,{height:0}).play(); dojo.empty(nn.parentNode.parentNode); }); });
dojo.addOnLoad(function(){ dojo.query(".tit .close").connect("onclick",function(){ // var nn=this; dojo.anim(nn,{height:0}).play(); dojo.anim(nn.parentNode,{height:0}).play(); // , , dojo.anim(nn.parentNode.parentNode,{height:0}).play(); dojo.empty(nn.parentNode.parentNode); }); });
जब आप क्लोज़ बटन पर क्लिक करेंगे तो ब्लॉक खूबसूरती से मुड़ेगा।
निष्कर्ष
हमारे छोटे से पार्सर काफी जल्दी से हबर और से विषयों को बाहर निकालता है
उन्हें एक टेप के रूप में प्रस्तुत करता है।
इसके अलावा, हम उन तत्वों को छिपा सकते हैं जो हमारे लिए रुचि के नहीं हैं, जो चिकनी एनीमेशन के साथ होगा जो आंख को प्रसन्न करता है।
अंतिम परिणामपरियोजना में कई सुधारों की आवश्यकता होती है, हालांकि, एक प्राथमिक व्यावहारिक मार्गदर्शिका के रूप में इसका कार्य, अच्छा प्रदर्शन करता है।
मुझे उम्मीद है कि यह लेख किसी के लिए उपयोगी होगा, इस विषय को विकसित करने की मेरी योजना है।