2016-03-29 9 views
5

में कस्टम ब्लॉक बनाने के लिए मैं RStudio के भीतर RMarkdown का उपयोग करके एक गिटबुक-शैली पुस्तक बनाने के लिए महान नए पैकेज bookdown के साथ प्रयोग कर रहा हूं। here देखें।RStudio के बुकडाउन

मेरा प्रश्न custom blocks बनाने के बारे में है। वहाँ कैसे एक सीएसएस फ़ाइल में एक ब्लॉक शैली को परिभाषित करने के दस्तावेज में एक उदाहरण है:

div.FOO { 
    font-weight: bold; 
    color: red; 
} 

और लेखकों क्या ब्लॉक कैसा लग सकता है के कुछ उदाहरण देते हैं।

enter image description here

AFAIK, वहाँ कैसे एक आइकन के साथ इस विशिष्ट ब्लॉक को परिभाषित करने का एक उदाहरण नहीं है। मुझे सीएसएस के बारे में ज्यादा जानकारी नहीं है, इसलिए मैं कुछ संशोधित कर सकता हूं जिसे मैं संशोधित कर सकता हूं।

मैं font awesome iconsLeanpub जैसे कुछ विशेष साइडबार बनाने के लिए उपयोग करना चाहता हूं। कुछ इस तरह बनाने के लिए कोई भी विचार:

enter image description here

मुझे लगता है मैं शामिल FontAwesome सीएसएस फ़ाइल (कहीं, यकीन नहीं है, जहां) के लिए, fontawesome निर्देशिका कॉपी करने पथ निर्दिष्ट करें, और <i> टैग का उपयोग की आवश्यकता होगी मेरी div परिभाषा में, उदाहरण के लिए, <i class="fa fa-comment"></i>। हालांकि इसे कार्यान्वित करने के तरीके पर वास्तविक स्पष्ट नहीं है ... या यदि यह भी काम करेगा।

+0

मैं वही चीज़ सोच रहा था। मुझे लगता है कि उत्तर https://bookdown.org/yihui/bookdown/style.css में निहित है आप शीर्ष पर कस्टम divs देख सकते हैं। – Frank

+1

यह दिलचस्प है, @ फ्रैंक। 'पृष्ठभूमि: # f5f5f5 url ("images/caution.png") बाएं केंद्र/3em नो-दोहराना देख रहा है;' मुझे सीएसएस में fontawesome प्रतीक का उपयोग करने के लिए खोज करने के लिए नेतृत्व किया। यह जांच [SO उत्तर] (http://stackoverflow.com/questions/14736496/use-font-awesome-icons-in-css)। –

+0

[इस चीटशीट] का उपयोग करना (http://fontawesome.io/cheatsheet/), मुझे लगता है कि टिप्पणी आइकन के लिए कोड 'fa-comment [& # xf075;] 'है। [यह उदाहरण] (http://codepen.io/astrotim/pen/IjJzL) दिखाता है कि ': बाद' का उपयोग कैसे करें, एसओ उत्तर में दिए गए सुझावों में से एक मैंने संदर्भित किया। '# रैप: {सामग्री:" \ f075 "के बाद; फ़ॉन्ट-फ़ैमिली: FontAwesome;} 'मुझे अभी तक इसका उपयोग करने का तरीका नहीं मिलता है, लेकिन ऐसा लगता है कि हम सही दिशा में आगे बढ़ रहे हैं। –

उत्तर

6

@Frank's tip के लिए धन्यवाद (स्थानीय छवियों का उपयोग करने के लिए his solution देखें), मैं निम्नलिखित के साथ आने में सक्षम था।

मैं इस SO answer और this specific example के आधार पर अपनी पुस्तक की निर्देशिका की जड़ में style.css फ़ाइल को यह कहा:

.rmdcomment { 
    padding: 1em 1em 1em 4em; 
    margin-bottom: 10px; 
    background: #f5f5f5; 
    position:relative; 
} 

.rmdcomment:before { 
    content: "\f075"; 
    font-family: FontAwesome; 
    left:10px; 
    position:absolute; 
    top:0px; 
    font-size: 45px; 
} 

मैं this FontAwesome cheatsheet से टिप्पणी आइकन के लिए मूल्य f075 मिला है।

फिर मैंने CSS toolkit from FontAwesome डाउनलोड किया और font-awesome.min.css फ़ाइल को मेरी पुस्तक निर्देशिका की जड़ में कॉपी किया। मैं अपने output.yml फ़ाइल में निम्न जोड़ा (टेम्पलेट मैं के साथ शुरू में, style.css, toc.css पहले से ही मौजूद थे):

```{block, type='rmdcomment'} 
Some text for this block. Some text for this block. Some text for this block. Some text for this block. Some text for this block. Some text for this block. 
``` 
:

bookdown::html_book: 
    css: [style.css, toc.css, font-awesome.min.css] 

अंत में, मैं type विकल्प का उपयोग कर मेरी RMD फ़ाइल में एक कोड हिस्सा डाला

enter image description here