کافه‌ی گنو/لینوکس

يکي از مشکلات کساني که در وبلاگشون لينکدوني دارند اينه که بايد ابتدا عنوان لينک را در title و سپس آدرس لينک را در قسمت Entry Body بنويسند. اين کار خسته کنند اي است. منم طبق معمول به خودم گفتم کار نشد نداره کلي نشستم روش فکر کردم و آخر دست هم چيزي دست گيرم نشد. تا اينکه مطب  Changing BlogJet This! Template را از نويسنده ي نرم افزار بلاگ جت خوندم. مطلب جالبي بود و ازش استفاده کردم ولي بازم مشکل لينکدوني را به طور کامل حل نمي کرد. البته براي من قانع کننده  نبود چون مي شد يک کارايي کرد. بالاخره امروز مطلب Quickpost Title را در وبلاگ Movalog خوندم.

در ضمن در صورتي که نمي دونيد QuickPost و  Bookmarklets چيه اينجا يک نگاهي بندازيد. من اين تنظيمات را روي MT 3.17 به کار بردم  فکر مي کنم در نسخه ي هاي ديگه هم به همين گونه باشه.

ابتدا به شاخه اي که ام تي نصب شده بريد و فايل زير را پيدا کنيد:
 lib/MT/App/CMS.pm
حدود خط 905 خطوط زير را پيدا کنيد.

$param{text} = sprintf qq(<a title=»%s» href=»%s»>%s</a>\n\n%s),
scalar $q->param(‹link<em>title›),
scalar $q->param(‹link</em>href›),
scalar $q->param(‹link_title›),
$param{text};

خطوط بالا را پاک کنيد و با جاي آن خط زير را وارد کنيد:

$param{title} = scalar $q->param(‹text›);
$param{text} = scalar $q->param(‹link_href›),

از اين به بعد هرگاه مطلب جالبي پيدا کرديد توي همون صفحه عنوان مطلب را انتخاب (select) کنيد و کليک سمت راست کنيد و روي QuicPost کليک کنيد. در اين هنگام صفحه اي باز مي شود که title پست شما همان مطلب انتخاب شده است و در قسمت Entry Body آدرس همان صفحه به صورت اتوماتيک نوشته مي شود. همان طور که ديديد اين را آسانترين راه ممکن براي اضافه کردن لينک به لينکدوني است. تا اينجا کار تموم شده و ميتونيد از روش استفاده کنيد.اما اگه دوست داريد مطالب بيشتري در مورد QuickPost بدونيد مطالب زير را دنبال کنيد:

اما اگه دوست داريد المان هاي ديگري از قبيل Extended Entry , Excerpt و Keywords هم به صورت بالا به صورت اتوماتيک وارد شوند فايل زير را باز کنيد:
tmpl\cms\bm_entry.tmpl
کد زير را در خط 203 يا حدود آن پيدا کنيد 

<TMPL_VAR NAME=TEXT ESCAPE=HTML>

همون طوري که مشاهده مي کنيد اين کد بين دو تگ باز و بسته ي  textarea قرار گرفته و اين دوتگ در اينجا  مربوط به title پست مي باشد.

textarea ي بعدي مربوط به Extended Entry مي باشد.براي مثال اگر مي خواهيد در PostQuick براي Extended Entry نيز مطلبي به صورت خود کار داشته باشيد بايد يک متغيري نيز براي textarea ي Extended Entry تعريف کنيم. به اين صورت که خط زير را در بين دو تگ باز و بسته ي textarea ي Extended Entry وارد کنيد.

<TMPL_VAR NAME=TEXT_MORE ESCAPE=HTML>

به جاي TEXT_MORE هر متغير ديگري که بخواهيد مي توانيد جايگزين کنيد.حالا داخل CMS.pm پس از کد هاي مربوطه که پيش از اين اضافه کرديم کد زير را اضافه کنيد.

$param{text_more} = scalar $q->param(‹text›),

به جاي text_more متغيري را که قبلا تعيين کرديد بنويسيد. و به جاي text در param(‘text’) مي توانيد موارد زير را وارد کنيد:

• text: متن انتخاب شده
• link_title: عنوان صفحه ي جاري
• link_href: آدرس صفحه ي جاري

براي مثال در صورتي که ميخواهيد عنوان صفحه ي جاري در فيلد Extended Entry وارد شود بايد خط زير را به cms اضافه کنيد.

$param{text_more} = scalar $q->param(‹text›),

براي هر يک از قسمت هاي پست نيز مي توانيد مراحل بالا را تکرار کنيد

اميدوارم که مشکل تمام کساني که با لينکدوني ميونه ي خوبي ندارند حل بشه.

ادامهٔ مطلب »

بعضي مواقع شما احتياج داريد کدي در پست خود نمايش دهيد. براي مثال من مي خواهم کدي براي لينک به وبلاگم نمايش دهم شبيه کد زير:  

<a href=”http://wintip.caspianblog.com”>WinTip</a&gt;

به هر حال اگر شما کد بالا را  در هنگام نوشتن پست بنويسيد هنگام نمايش آن پست در وبلاگ اين کد به صورت حقيقي نمايش داده نمي شود بلکه به صورت يک لينک نمايش داده مي شود: WinTip 

پس براي نمايش کد ها در پست ها چه بايد کرد؟ چند راه براي اين کار وجود دارد:

1– به صورت دستي معادل کد هاي خود را بنويسيد:
اگر تمام چيزي که شما مي خواهيد بنويسد نوشتن تگي کوتاه باشد راحت ترين راه  شايد نوشتن کاراکترهاي  < و > به صورت زير مي باشد:
 <  به صورت  <
 >  به صورت  >

پس در صورتي که در پست خود عبارت زير را تايپ کنيد:

 &lt;MTEntries&gt;

به صورت <MTEntries> توسط مرورگر تفسير ميشود.

در اينجا چند نمونه از معادل هاي نماد ها را آورده ام:

&raquo;     »      right double angle quotes

&laquo;     «       left double angle quotes

&lt;     <      less than sign

&gt;     >      greater than sign

&bull;     •      bullet

♥     or     &hearts;      ?      black heart

∞    ?      infinity symbol

&mdash;    —      long dash

&amp;    &      ampersand

&quot;    »      double quotes

براي اطلاعات بيشتر درمورد کد هاي اسکي و کارکترها و نمادها به اينجا مراجعه کنيد.

2–نرم افزارهاي انکودر
به اين ترتيب که شما با وارد کردن کدهاي خود در اين نرم افزار هاي مي توانيد معادل کدهاي خود براي استفاده در پست ها برداشت کنيد. براي نمونه نرم افزار SimpleCode HTML Encoder نرم افزار خوبي براي اين کار به شمار مي آيد.

3– استفاده از تگ text area
شما مي توايند کد هاي خود را در يک text box قابل اسکرول قرار دهيد و اين راهي بسيار خوب براي قرار دادن کدهاي بسيار بزرگ مي باشد.

If you have an especially<br /> long bit of code, you can put it in a text area like this and make use<br /> of the text area’s scrollbars. You’ll want to encode your code first<br /> however, either manually as described above or by using another method<br /> such as the PHP Nuke HTML Encoder.

براي اين کار کدهاي خود را بين تگ هاي باز و بسته ي textarea قرار دهيد. لازم به ذکر است که در اين روش احتياجي با انکود کردن نداريد.

 <textarea cols=»60″ name=»text» rows=»10″> Put your code here</textarea>

با عوض کردن تعداد رديف ها و ستون ها در rows و cols مي توانيد ابعاد text box خود را تغيير دهيد.

4– تگ نقل قول يا blockquote 
استايل زير را به استايل تمپليت خود اضافه کنيد:

 .content blockquote {
padding: 10px 10px 10px 10px;
border: solid 1px #cccccc;
background-color: #E7F1FD;
text-align: left;
}

به جاي content کلاس div اي که مربوط به محتواي پست ها مي شود را وارد کنيد در صورتي که از قالب اوليه ي MT 3 استفاده مي کنيد احتياجي به تغييرآن نداريد.و در صورتي که شما در طراحي قالب MT از تگ blockquote استفاده نکرده ايد مي توانيد content را از انتخاب کننده خدف کنيد و به صورت زير قانون css را بنويسيد:

  blockquote {
padding: 10px 10px 10px 10px;
border: solid 1px #cccccc;
background-color: #E7F1FD;
text-align: left;
}

از اين به بعد هرگاه خواستيد که کدي در وبلاگ قرار دهيد مي توانيد کدهاي انکود شده ي خود را داخل دو تگ باز و بسته ي blockquote قرار دهيد.

<blockquote>put your code here </blockquote>

نکته: در اين روش بايد کدهاي انکود شده را در داخل تگ هاي مربوطه قرار دهيد. 
مي توانيد از چند استايل زير نيز استفاده کنيد::

مثال 1

blockquote {
 background: #EEEEEE;
 border: thick solid Gray;
 border-left: none;
 border-right: none;
 font: 12px «Courier New», cursive;
 text-align: left;
 padding: 10px 20px 10px 20px;
}

در صورتي که از استايل بالا استفاده کنيد و کد هاي خود را بين دو تگ باز و بسته ي <blockquote> قرار دهيد کد هاي شما به صورت زير نمايش داده مي شوند:

You can insert your Code or  Blockquote here. e.g. :
The Blockquote element usually indicates content quoted from another source. This block element should be used ideally only when the quotation is longer and will likely span several lines (for shorter, in-line quotations using the Q element is suggested.)

مثال 2:

blockquote {
 border-left: 9px solid gray;
 background: #EEEEEE;
 text-align: left;
 padding: 14px 14px 14px 14px;
 font: 12px «Courier New», cursive;
 border-bottom: none;
 border-right: none;
 border-top: none;
}

هرگاه کدي در بين تگ هاي باز و بسته ي <blockquote>قرار گيرد کد ها به صورت زير نمايش داده مي شوند:

5– ساخت کلاس جديدي براي کدها 
شما مي توانيد کلاس جديد فقط براي کدها بسازيد و براي آن ها استايل بسازيد.
در زير کلاس جديدي به نام  message تعريف کرده ايم و استايلي

 .message {
font-family: Courier New,Courier,monotype;
font-weight: bold;
font-size: 11px;
padding: 10px 10px 10px 10px;
background-color: #E8F2FB;
border: solid 1px #CADFEF;
}

و در پست هايتان يک span با کلاس message ايجاد کنيد و کدهايتان را در داخل دي تگ باز و بسته ي span وارد کنيد مانند زير:

 <span class=»message»>Your code would go here.</span>

6-استفاده از تگ هاي <pre> و  <code>
کدهاي خود را با تگ هاي باز و بسته ي code پوشش دهيد که به صورت زير نمايش داده مي شوند.

This is what your code looks like when placed within <code> and </code> tags
و هم چنين مي توانيد با استفاده از تگ <pre> از شکستن متن جلوگيري کنيد.

7–استفاده از تگ <xmp>
اين تگ کارش اينه که شما ديگه احتياج نداريد کدهاي خود را انکود کنيد بعني شما مي توانيد کدهاي حقيقي را بين دو تگ باز و بسته ي <xmp> قرار دهيد در اين صورت مرورگرها تا به اين تگ برخورد مي کنند بدون اينکه محتواي آنها را ترجمه کنند نمايش مي دهند. به مثال زير توجه کنيد:

<xmp><a href=”http://wintip.caspianblog.com”>WinTip</a></xmp&gt;

در اين صورت مرورگر به جاي اينکه کد بالا را به صورت يک لينک WinTip در آورد. شکل آن را حفظ خواهد کرد و به صورت زير تمايش مي دهد:

<a href=”http://wintip.caspianblog.com”>WinTip</a&gt;

من خيلي دوست داشتم اين روش را جزء اولين روش معرفي کنم ولي هنوز در مورد ساپورت مرورگرها در مورد اين تگ ترديد دارم.

من خودم اين تگ را روي Explorer 6 و Mozila Firefox امتحان کردم به خوبي جواب دادند ولي بقيه ي مرورگر ها را به طور دقيق نمي دونم. اينجور که اينجا نوشته به opera 2.1 و Netscape 2 beta 1 هم مي خوره.
دوستان اگه مرورگرهاي Netscape و opera آخرين ورژن دارند چک بکنند ببينم کار ميده يا نه.

به هر حال اگه به نتيجه رسيديد که اين راه بهتر از روش هاي ارائه شده است مي توانيد انتخاب گر يا همان selector را استايل هاي بالا را به xmp تغير دهيد براي مثال استايل هاي مثال 1 در بالا به صورت زير در مي آيند:

  xmp {
 background: #EEEEEE;
 border: thick solid Gray;
 border-left: none none;
 border-right: none;
 font: 12px «Courier New», cursive;
 text-align: left;
 padding: 10px 20px 10px 20px;
}

 مشکل کدهاي بسيار بلند

در صورتي که بخواهيد کد هاي بزرگ را در صفحات وبلاگ خود قرار دهيد باعث طولاني شدن آرشيوهاي تکي و غيره مي شود در اين حالت صفحات وبلاگ خسته کننده مي شوند براي جلوگيري از اين امر از ويژگي overflow سي اس اس کمک مي گيريم. 

هنگامي که ما جعبه اي با ابعاد خاصي تعريف مي کنيم و سپس درون آن المان ها را قرار مي دهيم ممکن است جعبه ي ما آنقدر بزرگ نباشد که بتواند تمام المان ها را درون خود نشان دهد با کمک ويژگي overflow مي تواينم المان هايي که خارج از جعبه قرار مي گيرند را تحت کنترل خود در آوريم.

ابتدا استايلي براي کد هاي overflow بنويسيد يا از کد هاي زير براي نمونه استفاده کنيد:

.overflowcode {
background: #EEEEEE;
width: 500px;
height: 150px;
overflow: auto;
text-align: left;
font: 12px «Courier New», cursive;
/* These code usuful for formatting scrollbars. You can change or delete these following code. */
scrollbar-3dlight-color : #999999;
scrollbar-arrow-color : #999999;
scrollbar-base-color : #666666;
scrollbar-darkshadow-color : Black;
scrollbar-face-color : #666666;
scrollbar-highlight-color : #999999;
scrollbar-shadow-color : #999999;
scrollbar-track-color : #8B8B8B;
}

هنگامي که ميخواهيد از کد هاي overflow در پست هايتان استفاده کنيد کافيست که کد هاي خود را در بين blockquote اي با کلاس overflowcode قرار دهيد

<blockquote class=”overflowcode”>Insert your code here <blockquote>

هر گاه طول و عرض پاراگراف هاي شما بيشتر از 500px و 150px شود بقيه ي کد ها به صورت اسکرول نمايش داده مي شود. به مثال زير توجه کنيد:

شرح بعضي از قوانين CSS:

• background
  استايل خود را براي background پس زمينه ي کدها تعريف کنيد
• border
  استايل  حاشيه ي مورد نظر خود را وارد نماييد.
• float
  براي تعريف مکان قرار گيري کدهاي خود از اين سلکتور استفاده کنيد.
• font
  استايل مربوط به خصيصه ي font را وارد نماييد..
• padding
  متن خود را از لبه ي حاشيه ها تراز کنيد و يک فضاي خالي براي خوانايي بيشتر ايجاد نماييد.
• overflow
  که همين الان توضيح دادم

بهينه سازي استايل ها

در صورتي که شما در طراحي صفحات و تمپليت خود از blockquote استفاده کرده باشيد استايل هاي بالا موجب مي شود که تمام blockquote ها را تحت تاثير خود قرار دهد پس بايد کاري کنيم که فقط blockquote هاي درون پست ها فرمت شوند نه همه ي blockquote ها.
در اين صورت selector  هاي استايل هاي بالا را به شکل زير تغيير دهيد:

.content blockquote

به جاي content کلاس اي را قرار دهيد که حاي پست هاي شما باشد. معمولا افراد محتواي پست هاي خود را با کلاس content فرمت مي کنند.
در اين صورت استايل ها را مي توانيد به صورت زير وارد کنيد:

.content blockquote {
 border-left: 9px solid gray
 float: left;
 background: #EEEEEE;
 text-align: left;
 padding: 14px 14px 14px 14px;
 font: 12px «Courier New», cursive;
}

بر گرفته از مقاله ي  Display Code In Entries  و اطلاعات بنده ي حقير

اطلاعات بيشتر:

ادامهٔ مطلب »