انجمن‌های فارسی اوبونتو
جامعه کاربران => کافه اوبونتو => نویسنده: afrod در 31 تیر 1393، 12:42 ق‌ظ
-
پوسته های CSS رو می تونم با کمک firebug از راست به چپ کنم. ولی با پوسته ای که در آدرس http://dorfa.postach.io قرار داره و کدش رو در زیر گذاشتم، نمی دونم باید چکار کنم؟!
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xmlns:og="http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<title>
{% if is_login %}Login
{% elif is_home %}{{ site.author }}
{% elif is_tag %}{{ tag }}
{% elif post %}{{ post.title }}
{% endif %}
| {{ site.name }}
</title>
{{ header_meta }}
<link href="{{ static('themes/_assets/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" />
<link href="{{ static('themes/_assets/bootstrap/css/bootstrap-responsive.min.css') }}" rel="stylesheet" />
<link href="{{ static('themes/_assets/fontawesome/css/font-awesome.min.css') }}" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic' rel='stylesheet' type='text/css'>
<link href="{{ static('themes/apex/apex.css') }}" rel="stylesheet" />
<!--[if IE 7]>
<link href="{{ static('fontawesome/css/font-awesome-ie7.min.css') }}" rel="stylesheet">
<![endif]-->
<!--
<style>
/**
* Your custom override CSS goes here. If you wanted to override the default link colour and hover state, you would do this:
*
* a {
* color: #333; /* Override the default colour with a not-quite-black that is easy on the eyes on white screens */
* }
*
* a:hover {
* color: #545454; /* This will now change the hover state as well */
* }
*
* You can put anything you want to override in here, so be creative!
*/
</style>
-->
{% if site.analytics %}
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{{ site.analytics }}']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
{% endif %}
</head>
<body>
{% if is_login %}
{{ login_form }}
{% else %}
<div class="row">
<div class="span4 header">
<div class="bg-img" style="background-image: url('{% if site.cover_photo %}{{ site.cover_photo }}{% else %}{{ static('themes/expanse/images/cover-photo-1.jpg') }}{% endif %}');"></div>
<div class="gradient"></div>
<div class="title">
<h1>{{ site.name }}</h1>
<ul class="social">
{% if site.twitter %}
<li>
<a href="{{ site.twitter }}" title="Twitter" target="_blank">
<i class="icon-twitter"></i> Twitter
</a>
</li>
{% endif %}
{% if site.facebook %}
<li>
<a href="{{ site.facebook }}" title="Facebook" target="_blank">
<i class="icon-facebook-sign"></i> Facebook
</a>
</li>
{% endif %}
{% if site.googleplus %}
<li>
<a href="{{ site.googleplus }}?rel=author" title="Google+" target="_blank">
<i class="icon-google-plus"></i> Google+
</a>
</li>
{% endif %}
{% if site.linkedin %}
<li>
<a href="{{ site.linkedin }}" title="LinkedIn" target="_blank">
<i class="icon-linkedin"></i> LinkedIn
</a>
</li>
{% endif %}
<li>
<a href="{{ site.atom_url }}" title="RSS" target="_blank">
<i class="icon-rss"></i> RSS
</a>
</li>
</ul>
</div>
<a class="logo" href="/">
<img class="avatar" src="{{ site.avatar }}" alt="{{ site.author }}" width="100%" height="100%" />
</a>
<div class="site-description">
<ul>
<li><a href="/">Blog</a></li>
{% if pages %}
{% for page in pages %}
<li><a href="{{ page.permalink }}" class="{{ set_active(page.permalink) }}">{{ page.title }}</a></li>
{% endfor %}
{% endif %}
</ul>
</div>
</div>
</div>
<div class="row wrapper">
<div class="span4 spacer"></div>
{% if is_home or is_tag %}
<div class="span6 offset1 posts">
{% if is_tag %}
<h4 class="sub-heading span6">Showing all posts tagged {{ tag }}:</h4>
{% endif %}
{% if posts %}
{% for post in posts %}
<div class="post span6">
<div class="row">
<div class="span6">
<h2><a href="{{ post.permalink }}#disqus_thread">{{ post.title }}</a></h2>
</div>
</div>
<div class="post-body" data-type-cleanup="true">
{{ post.content }}
</div>
<div class="post-info">
<div class="info-left">
<p class="date">{{ post.created_at|format_date }}</p>
</div>
<div class="info-right">
<p class="read-more"><a href="{{ post.permalink }}">Read More »</a></p>
</div>
</div>
</div>
{% endfor %}
{% if not is_tag %}
<div class="pagination span6">
{% if pagination.prev %}<a href="{{ pagination.prev }}" class="post-prev">← View Previous Posts</a>{% endif %}
{% if pagination.next %}<a href="{{ pagination.next }}" class="post-next">View More Posts →</a>{% endif %}
</div>
{% endif %}
{% else %}
<h4 class="sub-heading span6">No Posts Yet :(</h4>
{% endif %}
</div>
{% elif post %}
<div class="span6 offset1 posts">
<div class="post whole span6">
<h1>{{ post.title }}</h1>
<div class="post-info">
<div class="info-left">
<p class="date">{{ post.created_at|format_date }}</p>
</div>
<div class="info-right">
<p class="comments">
<a href="/"><i class="icon-comment"></i> 0</a>
</p>
</div>
</div>
<div class="post-body">
<div class="post-content" data-type-cleanup="true">
{{ post.content }}
</div>
{% if post.type == 'link' %}
<p><a href="{{ post.url }}"><i class="icon-share"></i> {{ post.url }}</a></p>
{% endif %}
{{ theme.social.bar }}
{% if post.tags %}
<ul class="post-tags">
{% for tag in post.tags %}
<li><a href="/tag/{{ tag }}">{{ tag|format_tag(link=False, humanize=True) }}</a></li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="post-footer">
<p class="back"><a href="/">« Go Back</a></p>
</div>
{% if site.disqus %}
<div class="post-comments">
<div id="disqus_thread"></div>
<script>
var disqus_shortname = '{{ site.disqus }}';
var disqus_url = '{{site.base_url}}{{ post.permalink }}';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
</div>
{% endif %}
</div>
</div>
{% elif post.type == 'page' %}
<div class="span6 offset1 posts">
<div class="post whole span6">
<h1>{{ page.title }}</h1>
<div class="post-body" data-type-cleanup="true">
{{ page.content }}
</div>
<div class="post-footer">
<p class="back"><a href="/">« Go Back</a></p>
</div>
</div>
</div>
{% endif %}
</div>
{% endif %}
{{ footer_meta }}
<!-- bootstrap -->
<script src="{{ static('themes/_assets/bootstrap/js/bootstrap.min.js') }}"></script>
</body>
</html>
-
من از این استفاده می‌کنم:
https://github.com/odyseh/rtlbootstrap
-
من از این استفاده می‌کنم:
https://github.com/odyseh/rtlbootstrap
چطوری استفاده کنم؟ روی http://postach.io فقط امکان ویرایش کد بالا رو دارم. (چون جایی برای ذخیره نداره تا جایی که حتی مطالب رو از دراپ باکس و اورنوت باید منتشر کنیم)
لینکی که دادید رو در خط های زیر جایگزین کنم؟
<link href="{{ static('themes/_assets/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet" />
<link href="{{ static('themes/_assets/bootstrap/css/bootstrap-responsive.min.css') }}" rel="stylesheet" />
-
اگر از دراپ‌باکس به عنوان هاست استفاده میکنه، فایل css رو توی دراپ‌باکس آپلود کنید، بعد لینک مستقیمش رو بدین به اسکریپت.
می‌تونید خیلی کوتاه در مورد این‌که چرا این سرویس رو برای ساخت وبلاگ انتخاب کردین، بگین؟
-
دنبال یک سرویس مینیمال می گشتم و به این مقاله اعتماد کردم: http://www.cmscritic.com/minimalist-blogging-platforms
با بلاگر مشکلات فیلی دارم و می خوام سایتم را به یک سرویس بدون مشکلات فیلی، مهاجرت بدم.
اگر از دراپ‌باکس به عنوان هاست استفاده میکنه، فایل css رو توی دراپ‌باکس آپلود کنید، بعد لینک مستقیمش رو بدین به اسکریپت.
از لینک های raw ی گیتهاب استفاده کردم:
https://github.com/odyseh/rtlbootstrap/raw/master/dist/css/rtlbootstrap.css
https://github.com/odyseh/rtlbootstrap/raw/master/dist/css/rtlbootstrap.min.css
ولی چیز عجیبی از کار در آمد: http://dorfa.postach.io/ در مقایسه با این http://postach.io/static/themes/apex/screenshot-large.png
فایرباگ div.header رو برای به راست بردن پنل سمت چپ پیدا میکنه اما در کد خبری از div.header نیست!
سورس تم به چه زبانی نوشته شده؟!
-
گزینه‌های بهتری هم برای ساخت وبلاگ پیدا می‌شه...
به نظر میاد این سرویس از یک تم انجین استفاده میکنه که سینتکسش تا جایی که من فهمیدم (کدی توی پست اول گذاشتین) شبیه به twig (برای PHP) و jinja (برای python) هستش.